Wrapping bootstrap columns in extra div
It's happening because col-*
must be placed directly inside row
.
Read the Bootstrap docs..
"Content should be placed within columns, and only columns may be immediate children of rows."
This is especially important in Bootstrap 4 because the columns will simply stack/wrap vertically if not placed directly inside a .row
.
Also read:
How the Bootstrap Grid Works
Bootstrap Rows and Columns - Do I need to use row?
Bootstrap 4.0 Grid System Layout not working