CODEWITHSUNDEEP
htmlcssbootstrap-modal
Artoo Smith
Artoo Smith

Reputation: 425

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

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

Upvotes: 31

Views: 57616

Answers (12)

Ruslan Babich
Ruslan Babich

Reputation: 41

<div class="modal-header">
    <div class="col-1"></div>
    <div class="col-10 text-center"><h5 class="modal-title">Чтото пошло не так... :(</h5></div>
    <div class="col-1 ms-3">
        <button type="button" class="btn-close" onclick="closeModal()"></button>
    </div>
</div>

enter image description here

Upvotes: 0

Rejaul
Rejaul

Reputation: 980

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

Upvotes: 5

AMDP
AMDP

Reputation: 365

Yes CSS is enough, even in bootstrap vue:

<b-modal id="mymodal" title="My Modal">

you just need:

.modal-title{
  width: 100%;
  text-align: center;
}

in your css file to have it centered.

Upvotes: 1

Priya Chetwani
Priya Chetwani

Reputation: 61

Simply add .justify-content-center class in modal header div:

<div class="modal-header justify-content-center">
     //your content here
</div>

Upvotes: 0

Forbrig
Forbrig

Reputation: 36

To center the title and maintain the dismiss button you could do something like this:

<div class="modal-header pl-0">
    <h5 class="modal-title w-100 text-center position-absolute">Title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Upvotes: 1

lwairore
lwairore

Reputation: 708

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>

Upvotes: 31

Rusell Jane Quitain
Rusell Jane Quitain

Reputation: 151

Try changing modal-header 

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

Upvotes: 2

user3057623
user3057623

Reputation: 11

You can also add these classes to modal-header
.ml-auto .mr-auto

<div class="modal-header ml-auto mr-auto">
 <h5 class="modal-title" id="exampleModalLongTitle">Model Title</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;</span>
  </button>
</div>

Upvotes: 1

Vali.Pay
Vali.Pay

Reputation: 384

try style="margin: 0 auto;" like <h5 class="modal-title" style="margin: 0 auto;">title</h5> it's work fine!

Upvotes: 0

Victor Di
Victor Di

Reputation: 1198

Sava approach worked for me. Another way is to add "margin: 0 auto;" for any css class you are using for a title. for example if you use modal-title, add to your css:

.modal-title {
    margin: 0 auto;
}

Upvotes: 1

webprojohn
webprojohn

Reputation: 998

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>

Upvotes: 61

Sava
Sava

Reputation: 830

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.

Upvotes: 36

Related Questions