Switching Grid 1 and 2 in Bootstrap 4

Here is an example of what I need:

Image:

https://i.sstatic.net/EPCAq.png

This is the code I am using:

<div class="container">
        <div class="row">
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-6">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
            </div>
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-right" alt="Niš">
            </div>
        </div>
        <!-- THIS IS THE ISSUE -->
        <div class="row">
            <!-- THIS COLUMN NEEDS TO BE BELOW COLUMN 1 / LEFT SIDE -->
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <!-- THIS COLUMN NEEDS TO BE BELOW COLUMN 3 / RIGHT SIDE -->
            <div class="col-3 ml-auto">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
        <!-- END OF ISSUE -->
        <div class="row">
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
    </div>

I am struggling to identify where the issue lies. If anyone knows what the problem is, please provide a solution. Thank you

PS. Apologies for any mistakes in my English

Thank you all.

htmlcssbootstrap-4

Answer №1

Update: My response has been enhanced to incorporate background images and emulate the original design more effectively. Gratitude to AndreiGheorghiu for providing assistance in providing a more precise answer.

.grid{
  display: grid;
  grid-gap:10px;
  height:500px;
  grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
  grid-template-areas: "topLeft large large large topRight"
                       "midLeft large large large midRight"
                       "bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}

.pic{
  background:url(https://placeimg.com/400/400/any) no-repeat center/cover;
  font: 700 20px sans-serif;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:2px 2px 5px #000;
}

.pic-1{
   grid-area: topLeft;
}

.pic-2{
   grid-area: large;
}

.pic-3{
   grid-area: topRight;
}

.pic-4{
   grid-area: midLeft;
}

.pic-5{
   grid-area: midRight;
}

.pic-6{
   grid-area: bottomLeft;
}

.pic-7{
   grid-area: bottomCenter;
}

.pic-8{
   grid-area: bottomRight;
}
<div class="grid">
  <div class="pic pic-1">Foxwoods</div>
  <div class="pic pic-2">New York City</div>
  <div class="pic pic-3">Las Vegas</div>
  <div class="pic pic-4">Philadelphia</div>
  <div class="pic pic-5">San Francisco</div>
  <div class="pic pic-6">Miami</div>
  <div class="pic pic-7">Boston</div>
  <div class="pic pic-8">Washington D.C.</div>
</div>

Answer №2

Feel free to give this code a shot,

Just a heads up: This code includes responsive classes. Make sure to run it as a full page

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
        <div class="col-md-6">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
        </div>
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
    </div>
    <div class="row mt-md-4">
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
    </div>
</div>

Answer №3

To arrange the small images in the same column and display them as blocks, use the following CSS code: 

display:block; width: 100%; height: auto;
.

My personal approach involves applying the class .no-gutter to .row elements and adding white borders to images:

[my-gallery]:not(#_) {
  padding: 8px;
}
[my-gallery] img {
  display: block;
  background-color: #f5f5f5;
  width: 100%;
  height: auto;
  border: 8px solid white;
}
[my-gallery] .strethed img {
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid" my-gallery>
        <div class="row no-gutters">
            <div class="col">
                <img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
                <img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
            </div>
            <div class="col-6 strethed">
                <img src="https://picsum.photos/306/204/?random" alt="Belgrade">
            </div>
            <div class="col">
                <img src="https://picsum.photos/309/206/?random" alt="Niš">
                <img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
            </div>
        </div>
        <div class="row no-gutters" >
            <div class="col">
                <img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Several pictures are not displaying in the viewpage

I have a controller method set up to fetch files from a specific folder. public JsonResult filesinfolder(ProductEdit model) { string productid = "01"; string salesFTPPath = "C:/Users/user/Documents/Visual Studio 2015/Projects/root ...

jqueryhtmlasp.net-mvcrazor

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

javascripthtmlstringvariablesconcatenation

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Issue with blogger posts not showing thumbnails on the homepage

Check out my blog Lately, I've noticed that some of my Blogger posts are not displaying thumbnails in the home menu when using a custom template. However, after testing with different custom templates, I don't believe the issue lies with the tem ...

htmltemplatesblogger

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...

javascripthtmlangulartypescriptionic2

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

Can you explain the media breakpoints in Bootstrap 4 for size up, down, and in between

I'm curious to understand the definitions of media-breakpoint-up, media-breakpoint-down, media-breakpoint-between, and media-breakpoint-only in Bootstrap 4. Can anyone provide an explanation? ...

sassbootstrap-4breakpoints

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

javascriptphpjqueryhtmlajax

Retrieve the information from the API and populate the tables with the data

I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...

javascripthtmlreactjsreduxmaterial-ui

Incorporating multiple CSS style sheets within a single HTML document

As part of my assignment, I have successfully created two different CSS style sheets. The next step is to link both style sheets to a single HTML page and provide users with the option to switch between the two styles. I am wondering how to achieve this. ...

javascripthtmlcssdreamweaver

The issue of drop shadows causing links to not work properly in Internet Explorer

I am currently working on a website design that features a fixed menu positioned behind the body. When the menu icon is clicked, some jQuery code shifts the body to the left. To create the effect of the fixed menu being positioned underneath, I have added ...

javascriptcssinternet-explorer

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

javascripthtmlnode.jsejs

Attempting to reduce the width of the dig when it reaches 400

I have a square element with a click event that increases its size by 50 pixels on each click. However, once it reaches a size of 400 pixels, the size decreases by 50 pixels with every click instead. Additionally, when the size of the square reaches 100 p ...

javascripthtmlcss

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...

htmlcssangulartypescriptreact-native

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

jqueryhtmlcssslideshow

The A-frame inspector tool is not very useful within the Glitch platform

Just want to preface this by saying that I am completely new to both a-frame and Stack Overflow. Lately, I've been experimenting with A-frame templates similar to the one linked here: When I pull up the inspector for the example above (ctrl-alt-i), ...

htmlaframe

PHP A more organized method for passing button values when the value is specifically 0

Hey there, I've come across a situation where I had to make some tweaks to my code to get it working. I'm curious if there is a cleaner solution out there that I might be missing, or if my workaround is actually the best approach for solving this ...

phphtmlbutton

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

Merge HTML documents with this powerful JavaScript library

Our team has developed an email generator that creates HTML emails based on specific parameters. Users can simply select or deselect options and the email will be regenerated accordingly. Occasionally, users may need to make minor manual changes to the co ...

javascripthtmlmerge