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:

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

Reference:

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