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.
