How to create a multi-column grid layout using Bootstrap and CSS?

Question

I want to create a grid as shown in the image using bootstrap. can you help me out.enter image description here

Below is my code, i try but not able to correct it.

<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>

Please share your thoughts or approach how to solve it.

Answer 1

Bootstrap will make your grid columns' width equal by default. If you want some columns to be wider than others, you need to specify how many fractions of 12 they should span.

Check the Bootstrap documentation.

So, your first row would look like this:

<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>

Oh, and if you want the columns to be sized based on the content width, use class col-auto.