CSS / Bootstrap H4 не по центру

Question

Я пытаюсь центрировать заголовок <h4> в модале начальной загрузки. Это мой код:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="
    margin-top: 40px">

    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title text-center">Demander à être rappelé</h4>
      </div>

      <div class="modal-body">
       [body.....]      
      </div>

    </div>

  </div>

</div>

Это работает, когда я пробую JSFiddle, но не в своем коде! Я думаю, что это связано с использованием WP (в конфликте с начальной загрузкой), но я совсем не уверен.

Answer 1

добавить justify-content-center класс к modal-header

.modal  {
 display: block !important; // only for demo
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document" style="
    margin-top: 40px">

    <div class="modal-content">

      <div class="modal-header justify-content-center">
        <h4 class="modal-title text-center">Demander à être rappelé</h4>
      </div>

      <div class="modal-body">
       [body.....]      
      </div>

    </div>

  </div>

</div>