Bootstrap 5 row/col structure

August 18, 2024

i want to achieve grid structure as illustrated in the attached image. My code is not providing the required results. Any help in this regard shall be highly appreciated.

<div class="container ">
        <div class="row ">
            <div class=" col-12 col-md-8 bg-primary ">
                1
            </div>
            <div class=" col-12 col-md-4 ">
                <div class="row ">
                    <div class="col-12 bg-info">
                        2
                    </div>
                    <div class="col-12 bg-warning">
                        3
                    </div>
                </div>
            </div>
        </div>
    </div>

>Solution :

Try it.

Is it consistent with what you want?

Among the breakpoints provided by bootstrap, the md size is 768px.

The 786px you want seems to need customization.

/* Medium   md  ≥768px */

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary">
      1
    </div>
    <div class="col-12 col-md-4">
      <div class="row">
        <div class="col-6 col-md-12 bg-info">
          2
        </div>
        <div class="col-6 col-md-12 bg-warning">
          3
        </div>
      </div>
    </div>
  </div>
</div>