I'm trying to create a site using bootstrap and no external css. It seems I can achieve many of my formatting goals using nested grid systems.
e.x.
<div class="container-fluid bs-docs-grid">
<div class="row show-grid">
<div class="col-md-6">
<div class="row show-grid">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
Is this a reasonable practice?
Nesting Columns You can nest columns once you have a container, row, and column set up. To do this, add a new row <div> within the parent column's code, then add your nested columns. It will function as if the area inside the new row is its own grid system.
Grid Classes xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts.
Your code for the nesting is exactly what Bootstrap recommends: http://getbootstrap.com/css/#grid-nesting
and
https://getbootstrap.com/docs/4.4/layout/grid/#nesting (for Bootstrap 4)
Unless you have a specific need for the show-grid and bs-docs-grid classes, there's no need to include them. They aren't part of the base bootstrap CSS.
If you can achieve the layout you need using nested grids, I would certainly use them. They will save you time and reduce potential browser compatibility issues.
Good luck!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With