Wrapping bootstrap columns in extra div

Question

I'm using bootstrap v4 and when I wrap columns in extra div the layout becomes broken. Why is that? Link to codepen http://codepen.io/mariuszdaniel/pen/aJJjzJ

Works

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-8"></div>
    </div>
</div>

Not working

<div class="container">
    <div class="row">
        <div class="myclass">
            <div class="col-4"></div>
            <div class="col-8"></div>
        </div>
    </div>
</div>

Answer 1

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