Guide to setting up a multi-column grid system with Bootstrap and CSS

Trying to create a grid layout using Bootstrap, I need some assistance. Check out the image for reference: enter image description here

Here's the code I've been working on, but I can't seem to get it right:

<section id="section-2">
            <div class="container">
                <div class="row">
                  <div class="col">
                   <img src="./images/720685.png" alt="" width="300px" height="500px">
                  </div>
                  <div class="col">
                    <img src="./images/1109554.png" alt="" width="300px" height="200px">
                  </div>
                  <div class="col">
                    
                   <img src="./images/736462.png" alt="" width="300px" height="200px">
                  </div>
                  <div class="col">
                   <img src="./images/Dusk Launch13727_square.jpg" alt="" width="300px" height="200px">
                  </div>
                  <div class="col">
                    <img src="./images/Dusk Launch13727_square.jpg" alt="" width="300px" height="200px">
                   </div>
                   <div class="col">
                    <img src="./images/Dusk Launch13727_square.jpg" alt="" width="300px" height="200px">
                   </div>
                   <div class="col">
                    <img src="./images/Dusk Launch13727_square.jpg" alt="" width="300px" height="200px">
                   </div>
                </div>
            </div>
                <div class="container">
                    <div class="row">
                      <div class="col">
                       <img src="./images/720685.png" alt="" width="300px" height="200px">
                      </div>
                      <div class="col">
                       <img src="./images/1109554.png"alt="" width="300px" height="200px">
                      </div>
                    </div>
                </div>
        </section>

Any suggestions on how to solve this? Feel free to share your thoughts.

htmlcssflexboxbootstrap-5grid-layout

Answer №1

By default, Bootstrap ensures that your grid columns have equal width. However, if you want certain columns to be wider than others, you'll need to specify how many fractions of 12 they should span.

For more information, you can refer to the Bootstrap documentation.

Here's an example of how your first row might appear:

<div class="row">
    <div class="col-4">
    ...
    </div>
    <div class="col-8">
        <div class="row">
            <div class="col-3">
            ...
            </div>
            <div class="col-3">
            ...
            </div>
            <div class="col-6">
            ...
            </div>
        </div>
        <div class="row">
            <div class="col-3">
            ...
            </div>
            <div class="col-3">
            ...
            </div>
            <div class="col-6">
            ...
            </div>
        </div>
    </div>
</div>

Additionally, if you prefer columns to be sized based on the content width, you can use the col-auto class.

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

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

javascriptjqueryhtmlcss

Issue with implementing jQuery tab functionality

I'm just starting to learn JS, HTML, and CSS, and I could use some guidance on setting up jQuery tabs. Currently, I'm encountering an error that says "Uncaught TypeError: $(...).tabs is not a function". Any help would be greatly appreciated. Than ...

javascriptjqueryhtml

Creating a dynamic website with user-friendly editing capabilities

Having a good understanding of html5 and css3, I am currently exploring ways to create a website that enables visitors to edit content in real time for all other users to see. While aware of the contenteditable attribute, I have found that it does not reta ...

javascriptphpjqueryhtmlcss

Is it true that by utilizing Vue's v-for, every line of HTML code becomes a

I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...

javascripthtmlvue.js

I want to set a single background image for all slides in fullPage.js. How can I achieve this

I am attempting to replicate a similar effect as shown in this example: The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections. I have searched ...

javascriptjqueryhtmlcssfullpage.js

Comparison between WAMP and Live server integration with Facebook for connecting applications

I've been facing some challenges while integrating my website with Facebook Connect. I have been following the instructions provided in this guide. When attempting to run the following code from localhost, please note that for security reasons, my ap ...

phpjavascripthtmlfacebook

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I ...

javascriptjqueryhtmlcss

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Guide on executing edit form alongside file upload

Is there a way to update a form without having to upload a new image? I have successfully implemented multer for image uploads when creating a form. My frontend is built using ReactJS and the backend server side is Node.js. This is the front end code usi ...

htmlnode.jsreactjspostgresqlreact-router

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

javascriptcssreactjsscroll

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

pythonhtmlseleniumwebdriver

Having trouble making jQuery code disable input field based on checkbox status

Is there a way to automatically disable the price input field once the checkbox is checked and clear any existing text? I seem to be having trouble with my current code.. <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <scr ...

javascriptjqueryhtml

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

htmlcss

Avoid assigning a class name to child elements if both the parent and child elements already have inline background colors

I have a challenge where I need to assign a random class name to elements that have an inline background color. The additional condition is that if both the parent and child elements have inline background colors, the child element should not receive the c ...

javascripthtmlhtml-parsingdomparser

What could be causing my JavaScript source to fail to load in an HTML document?

Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...

javascripthtmlsrc

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascriptcssvue.jsgrid-layoutbootstrap-vue

Region Covered by Mouse Over Does Not Extend Across Whole Div

On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar ...

javascriptjqueryhtmlcssmouseover

Resizing an HTML table causes the background to break

I have incorporated a tailwind table with a max-width setting. In my html, I am utilizing the default Laravel Jetstream layout. However, I am facing an issue wherein the background doesn't repeat in the browser when trying to use the scrollbar on sma ...

htmlhtml-tablebackgroundtailwind-css

ZeroClipboard intricate CSS issue

I have a list of images with an option box that appears on mouseover. The box contains an embedded code input field for copying purposes. I recently implemented zeroclipboard to enable the copy function on click. However, when I hover over an image and try ...

jquerycssxhtmlzeroclipboard