Boostrap v4.0.0-alpha.6 model - how to center model title

Question

How do you center a model's title? I tired to add the class "text-center" to the h1 tag but it keeps showing the tile left aligned.

Thanks

Solution 1

You can use the w-100 class on the h3.modal-title element along with text-center.

<div class="modal-header text-center">
  <h3 class="modal-title w-100">Quiz Results</h3>
</div>

Solution 2

I had to figure this out today in particular when I wanted a centered modal-title inside a modal-header - played around with a few different ways but here is what I settled on:

<div class='modal-dialog' role='document'>
  <div class='modal-content'>
    <div class='modal-header'>
      <h3 class='col-12 modal-title text-center'>
        Centered Modal Title
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </h3>
    </div>
  </div>
</div>

The key was having col-12 if you want to do it inside of the 'modal-header' tag.

Solution 3

The question has a detailed answer here

Bootstrap 4 Modal Center Content

Simply add w-100 property value to class property. That is:

<div class="modal-header">
   <h5 class="modal-title w-100 text-center">Contact us via Email</h5>
   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>

Solution 4

<h3 class="modal-title w-100 text-center">I'm centered title</h3>

Solution 5

Try changing modal-header

.modal-header{
justify-content: center;
}

View more solutions

Comments

[Shalin Patel]

Provide your code. so that we can go through and predict exact problem and give you proper answer.

[Casey Crookston]

Thanks! I'd been trying to get this for over an hour!

[japes Sophey]

Baller. Way to go!

[Sergio Gonzalez]

Worked like a charm! And I think it's better than using .col-12 because h3 is not inside a .row.