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