How to add nested rows with Bootstrap grid system with HTML?

Spread the love

Sometimes, we want to add nested rows with Bootstrap grid system with HTML.

In this article, we’ll look at how to add nested rows with Bootstrap grid system with HTML.

How to add nested rows with Bootstrap grid system with HTML?

To add nested rows with Bootstrap grid system with HTML, we use the row and col classes.

For instance, we write

<div class="container">
  <div class="row">
    <div class="col big-box">image</div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>
  </div>
</div>

to add the row class to the row divs.

And we add the col class to the column divs.

Conclusion

To add nested rows with Bootstrap grid system with HTML, we use the row and col classes.

Leave a Reply

Your email address will not be published. Required fields are marked *