How to vertically centering Bootstrap modal window?

Sometimes, to do vertically centering Bootstrap modal window.

How to vertically centering Bootstrap modal window ,we will look at in this article.

How to vertically centering Bootstrap modal window?

We use the modal-dialog-centered class to vertically centering Bootstrap modal window.
For instance, we can also write

<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  Launch demo modal
</button>

<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

to add the modal-dialog-centered class to the div that has the modal-dialog class to vertically center the modal.

Conclusion

We use the modal-dialog-centered class to vertically centering Bootstrap modal window.

Leave a Reply