Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Nested Grid Systems Best Practices

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?

like image 884
Ben Pearce Avatar asked Apr 16 '14 21:04

Ben Pearce


People also ask

What's the best way to nest columns using Bootstrap?

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.

What is the correct order in the Bootstrap 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)

How many tiers does Bootstrap 5 grid system includes for building complex responsive layouts?

Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts.


1 Answers

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!

like image 72
David Taiaroa Avatar answered Oct 23 '22 10:10

David Taiaroa