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.