Bootstrap: Problems when using justify-content-center does not work when using with display utilities (d- {sm, md, lg, xl})

[Infolu]

I am having a problem with using display utilities (d- {sm, md, lg, xl}) in a row that has justify -content-center to row to center the column in the center plus someone had this problem or any solution to this?

Here is an example of the problem code

<div class="row  justify-content-center d-none d-sm-block">
  <div class="col-10">
    <div class="row  text-center">
      <div class="col-12 col-sm" style="background-color: #000000;">
        <p>Text Exemple</p>
      </div>
    </div>
  </div>
</div>

Greetings

[mdo]

Use of flex utilities requires a display: flex. Change your d-sm-block to d-sm-flex.

[iz-syed]

@import "../node_modules/bootstrap/scss/utilities";

[ajdysick]

Using d-sm-flex did solve my justify-content-center issue. But I want to understand why this simple change worked.

Can someone please explain?