Kevin Powell - Community•12mo ago

Bootstrap Grid Doubt

had to make this, so i'm trying to make this responsive layout with bootstrap grid, the green box in medium and large screen should extend as you might already have guessed. But i'm unable to just using the concepts of grid in bootstrap. I do know how to do this with css grid template area and css flexbox but is there a way to do this with bootstrap grids only ?

1 Reply

MarkBoots•12mo ago

think this will do the trick (never worked with bootstrap before)

<div class="container">
  <div class="row">
    <div class="col-lg-6">item 1</div>
    <div class="col-lg-3 col-md-6 bg-primary">item 2</div>
    <div class="col-lg-3 col-md-6 bg-success">item 3</div>
    <div class="col-lg-3 col-md-6 bg-info">item 4</div>
    <div class="col-lg 6 bg-danger">item 5</div>
    <div class="col-md-3"></div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-6">item 1</div>
    <div class="col-lg-3 col-md-6 bg-primary">item 2</div>
    <div class="col-lg-3 col-md-6 bg-success">item 3</div>
    <div class="col-lg-3 col-md-6 bg-info">item 4</div>
    <div class="col-lg 6 bg-danger">item 5</div>
    <div class="col-md-3"></div>
  </div>
</div>

i tested this in https://playcode.io/bootstrap --edit, you can leave out the col-[md/sm]-12, that is the default for an item

Gaming

Programming

Bootstrap Grid Doubt