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

Question

Is it (allowed) recommended to use .col-*'s as children in a .d-flex container? Or is it not the way .d-flex should be used but rather use .row?

---

In the Bootstrap 4 Docs I cant find any example which uses a .col-* in a .d-flex container. They are only using layouts like this

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

But these .p-2 classes doens't make these cols responsive. They only have a padding defined and no width has been given.

So for example I want something like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-wrap">
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
</div>

Is a good or bad practice according Bootstrap? I can't find anything related about .d-flex and .col-* combined.

Answer 1

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

Answer 2

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.