htmlcsstwitter-bootstraptwitter-bootstrap-3grid-system

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?


Solution

  • 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!