Nested Rows Larger Than Parent

I have an issue with Bootstrap 4 grid layout & I'm working with Vertical forms. I would like to nest col-lg-9(child) inside col-lg-6(parent). for Example: Created a sample moc

Solution 1:

It's because you are nesting columns directly inside other columns. Don't' do that.

When nesting in a column you must first put a Bootstrap row inside it and then put at least one Bootstrap column inside that new row.

Don't ever nest a Bootstrap column directly inside another Bootstrap column.

Here's the nesting structure you must have in your case:

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-9">
                    content goes here
                </div>
            </div>
        </div>
    </div>
</div>

Reference:

https://getbootstrap.com/docs/4.0/layout/grid/#nesting