CODEWITHSUNDEEP
cssbootstrap-4
ebillis
ebillis

Reputation: 195

CSS/Bootstrap H4 not centered

I'm trying to centered a <h4> title in a bootstrap modal. This is my code :

<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>

It's work when i try on JSFiddle but not in my code ! I think it's caused by the WP is use (In conflict with bootstrap) but i'm not sure at all.

Upvotes: 0

Views: 331

Answers (1)

patelarpan
patelarpan

Reputation: 8001

add justify-content-center class to 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>

Upvotes: 1

Related Questions