Menu
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
758
You can use the w-100 class on the h3. modal-title element along with text-center . Worked like a charm!
In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.
display: block; max-width: 100%; height: auto; display:block means text-align:centre which is inherited from text-center will have no effect. If you remove the . img-responsive class, your image will be centred.
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
