Using .col-* in .d-flex container bootstrap 4

As explained the docs...

"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side."

Therefore, col-* are supposed to be the immediate children .row. Also .row and col-* are designed together as a grid. This allows columns to wrap to the next line as needed. The wrapping works in your example because of flex-wrap.

So, 2 reasons col-* should be in row instead of d-flex:

• left/right side alignment with container content
• column wrapping according to grid widths

Compare col-* inside row vs d-flex: https://www.codeply.com/go/82ecXXvpkO

I can't find any example which uses a .col-* in a .d-flex container.

This should be your first indication that yes, you ought to rely on .row. The d-flex class applies the following CSS:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

And that's it. Meanwhile .row interacts with .container (or .container-fluid). It also provides additional margin settings so that your nested .col-*-* items are positioned correctly.

The d-flex class is part of Bootstrap 4s "Utility" classes; these are classes designed to provide you additional flexibility with your layout and structure; not to replace more robust components like Grid.