Bootstrap Nested Grid Systems Best Practices

Question

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?

Answer 1

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!