bootstrap-5

Bootstrap 5 row/col structure

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.

<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-12 bg-info">
          2
        </div>
        <div class="col-12 bg-warning">
          3
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here

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>