Sometimes, we want to vertically centering Bootstrap modal window.

In this article, we’ll look at how to vertically centering Bootstrap modal window.

How to vertically centering Bootstrap modal window?

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.

For instance, we 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

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.