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

html css bootstrap-modal
Artoo Smith picture Artoo Smith · Feb 8, 2017 · Viewed 24.3k times · Source

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

Answer

webprojohn picture webprojohn · Mar 27, 2018

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>

Related questions

Set textarea width to 100% in bootstrap modal

Was trying all possible ways, but never succeeded: <div style="float: right"> <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button> </div> <!-- Modal --> &…

Read More
Bootstrap : how to disable vertical scrollbar?

when my modal popup window opens, it adds a vertical scrollbar to the right of the browser window. How do i disable this? I think this is enabled when the modal window has a very large height value where it …

Read More
Bootstrap 4 Modal Slide from Left

I need the bootstrap modal to be open by slide from Left. However, the function can only work on Bootstrap 3 but not Bootstrap 4. Bootstrap 3 ver. : https://codepen.io/bootpen/pen/jbbaRa , Bootstrap 4 ver. : https://codepen.io/rae0724/pen/yKZjax <…

Read More