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
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>
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'>×</span>
</button>
</h3>
</div>
</div>
</div>
The key was having col-12
if you want to do it inside of the 'modal-header' tag.
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">×</span>
</button>
</div>
<h3 class="modal-title w-100 text-center">I'm centered title</h3>
Try changing modal-header
.modal-header{
justify-content: center;
}
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;
}
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">×</span>
</button>
</div>
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.
try style="margin: 0 auto;"
like <h5 class="modal-title" style="margin: 0 auto;">title</h5>
it's work fine!
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">×</span>
</button>
</div>
Simply add .justify-content-center
class in modal header div:
<div class="modal-header justify-content-center">
//your content here
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.