When we nesting, we need above three things. The container is already defined. Therefore columns will behave like the container in the nested grid.Here how it works, Containers have left and right 15px padding. Then we define a column that again has 15px padding on left and right, therefore to nest a column inside of a container, we simply wrap the column with a row to nullify the extra padding of the column.
Automatic LayoutOne of a cool new feature is the auto-layout mode. It automatically distributes the space in a row.
In the above code, Sizeless columns share the available space equally. It will always fill-up the entire row.Column HeightsThe previous grid system was built on floated elements. Because of that, every column has different column heights, depending on the content height. In this flexbox based layout, every cell in a row aligned to be as tall as the column with the most content.Horizontal AlignmentIn Bootstrap 4 they have given a magic property called “justify-content-*” for positioning columns horizontally. No need to manually adjust the number of spaces like bootstrap 3 col-*-offset -* element. If you want to continue the same offset you can still do that as well. But those classes are now shortened to “.offset-xs-*”
Vertical AlignmentWith the support of the flexbox Bootstrap 4 allowing us to vertically align the whole row and individual columns within the row.How to vertically align the whole row:
How to align individual columns within the row: