What are the steps to implementing a grid image system in Bootstrap4?

How can I use Bootstrap4 and CSS3 to position picture 4 and 5 under picture 2 and 3 within a grid layout?

<main>
   <div class="container-fluid">
   <div class="row">
      <h1 class="col-12">Anonymous</h1>
   </div>
   <div class="row">
      <!-- pic 1 -->
      <div class="col-6 card border-0">
         <img id="img-anonymous" src="images/home picture/_118375100_gettyimages-1304610824.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
      <!-- pic 2 -->
      <div class="col-3 card border-0">
         <img id="img-anonymous" src="images/home picture/_118809405_index.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
      <!-- pic 3 -->
      <div class="col-3 card border-0">
         <img id="img-anonymous" src="images/home picture/_118809064_tv067645357.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
      <!-- pic 4 -->
      <div class="col-3 card border-0">
         <img id="img-anonymous" src="images/home picture/_118803936_united-boom.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
      <!-- pic 5 -->
      <div class="col-3 card border-0">
         <img id="img-anonymous" src="images/home picture/_118803936_united-boom.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
   </div>
</main>

Currently, picture 4 and 5 are not positioning correctly under picture 2 and 3. How can I achieve the desired layout?

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

cssbootstrap-4grid

Answer №1

To achieve a stacked layout for your content, it is necessary to enclose each row within the following HTML structure:

<div class="row">
  Content
 </div>

It is important to note that Bootstrap follows a grid system where each row is divided into 12 columns. If the total sum of column widths exceeds 12, the content will not fit within a single row.

Answer №2

To achieve this layout, create a row div with two col-6 divs. The first div will display the main image on the left, while the second div will contain a nested row div with four col-6 divs for additional pictures.

View the code on jsfiddle

    <main>
   <div class="container-fluid">
   <div class="row">
      <h1 class="col-12">Anonymous</h1>
   </div>
   <div class="row">
      <!-- Main Image -->
      <div class="col-6 card border-0">
         <img id="img-anonymous" src="images/home picture/_118375100_gettyimages-1304610824.jpg" alt="Anonymous Hackers"/>
         <div class="card-img-overlay">
            <p>Anonymous Hackers:</p>
         </div>
      </div>
      <div class="col-6">
        <div class="row">
           <div class="col-6 card border-0">
             <img id="img-anonymous" src="images/home picture/_118809405_index.jpg" alt="Anonymous Hackers"/>
             <div class="card-img-overlay">
                <p>Anonymous Hackers:</p>
             </div>
          </div>
          <!-- Additional Pictures -->
          <div class="col-6 card border-0">
             <img id="img-anonymous" src="images/home picture/_118809064_tv067645357.jpg" alt="Anonymous Hackers"/>
             <div class="card-img-overlay">
                <p>Anonymous Hackers:</p>
             </div>
          </div>
          <div class="col-6 card border-0">
             <img id="img-anonymous" src="images/home picture/_118803936_united-boom.jpg" alt="Anonymous Hackers"/>
             <div class="card-img-overlay">
                <p>Anonymous Hackers:</p>
             </div>
          </div>
          <div class="col-6 card border-0">
             <img id="img-anonymous" src="images/home picture/_118803936_united-boom.jpg" alt="Anonymous Hackers"/>
             <div class="card-img-overlay">
                <p>Anonymous Hackers:</p>
             </div>
          </div>      
        </div>
      </div>
      <!-- End Additional Pictures -->

   </div>
</main>

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

Struggling with jquery's addClass method when trying to apply a class to

Below is a sample tr: <tr> <td><input type="text" class="ingredient required" name="ingredient"></td> <td><input type="number" class="amount required" name="amount" ></td> <td><input type="number" c ...

javascriptjqueryhtmlcssdom

Creating a Dynamic Navigation Bar with HTML and CSS

I've been exploring the code on w3schools.com, and while there are some great examples, I'm struggling to understand it all. Unfortunately, there aren't any instructions on customizing the code for a third level of menus. Can someone simplif ...

htmlcssnavigationhoverdropdown

What steps should I take to resolve the navigation bar problem on my website?

How can I resolve the navbar alignment issue on my website? Upon visiting this link (), you will notice that the navbar buttons appear cramped together on the homepage. However, the same code implemented on the "About us" and "Contact us" pages does not ex ...

twitter-bootstrap-3bootstrap-4

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

jqueryhtmlcss

Incorporate a tall button on the right edge of the division

I have successfully implemented a sidebar with the ability to hide or display it using this link. Now, I am looking to add a clickable bar on the right side of the div that can also trigger the hide/show functionality. After experimenting, I discovered th ...

htmlcsstwitter-bootstrap

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Is there a way to create a hover effect on an input number field within a certain class, causing the -webkit-inner-spin-button opacity to change to 1?

Is it possible to achieve this? I attempted the following, but it's not working: .myClass input[type=range]:hover > .myClass input[type=range]::-webkit-inner-spin-button{ opacity: 0; } .myClass input[type=range]:hover > input[type=range]:: ...

htmlcss

Having trouble implementing CSS styling on my Django HTML file

I have come across several solutions on this issue but haven't been able to resolve my problem. I am attempting to apply my style.css located in the path \...\static\css. Below is my directory structure as shown in the image here: https ...

pythoncssdjangodjango-settingsdjango-static

A guide on verifying the percentage value of an element's height in Selenium with Java

I was able to retrieve the element's height in pixels using: element.getCssValue("height") However, the height returned was: Height: 560px What I actually need is for the height to be displayed as: Height: 100% Or perhaps Height: 50% ...

javacssseleniumselenium-webdriver

Tips for adjusting the HTML font size in Bootstrap 4 while maintaining a responsive navbar

Attempting to scale a webpage the Bootstrap 4 way by using html font-size and rem everywhere else seems to be causing issues with the responsive navbar activation. The problem arises when the view is scaled down; the responsive navbar fails to hide the men ...

htmlcssfrontendbootstrap-4

What is the method for accessing the z-index property of an element in Selenium using Python?

Is it possible to confirm the depth of web elements by checking the "z-index" attribute? Successfully locating an element can be achieved using one of the two statements below. e = WebDriverWait(tA.driver,1).until(EC.visibility_of_element_located((By.XPA ...

pythoncssseleniumz-indexwebdriverwait

The alignment of SVG is not in sync with the aspect ratio

I've been struggling with this issue for some time now, trying to align the SVGs correctly for different width and height values. My viewBox has an aspect ratio of 16:9, and I want to scale the SVG accordingly. It's working fine for certain combi ...

htmlcsssvg

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

htmlcss

Resizing an image proportionally using a div container with a child specifying the height dimension

When using a div element on its own, it automatically adjusts its height to fit its contents. I am trying to achieve a layout where a parent div contains two child elements: another div (or left-aligned image) and an unordered list (ul). The inner div (or ...

htmlcsssemantic-markup

The color type input is not responding to the onChange event

I have been searching a lot and exploring answers on Stack Overflow, yet I have had no luck. I am trying to retrieve the color value when the color is changed in an input field. Here is the code I am using, could you please assist me in finding out why it ...

javascriptjqueryhtmlcss

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

javascripthtmlcssreactjsnext.js

Excessive size of bootstrap form

I'm currently working on designing a form within a section that has a width of col-sm-8. The form consists of three columns: label, text input, and username check. I've designated the label to have a width of col-sm-2, the username check to have ...

htmlcsstwitter-bootstrap

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

javascriptcssangularjsng-animate

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

javascripthtmlcssd3.js

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss