VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-modal-vertically-centered/

⇱ Bootstrap 5 Modal Vertically Centered - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Modal Vertically Centered

Last Updated : 2 Aug, 2024

Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead. Using bootstrap modal classes we can make the modal body align vertically centered.

Bootstrap 5 Modal Vertically Centered Classes:

  • modal-dialog-centered: To make modal vertically centered

Syntax:

<div class="modal-dialog modal-dialog-centered">
 ...
</div>

Example 1: In this example, we will learn about Modal Vertically Centered

Output

Example 2: In this example, we will learn about Vertically centered scrollable modal

Output

Reference: https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered

Comment

Explore