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
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Modal Vertically centered</h2>
<button type="button"
class="btn btn-success"
data-toggle="modal"
data-target="#GFG">
Launch Vertically Centered modal
</button>
<div class="modal fade" id="GFG">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
I am modal vertically centered
</h5>
</div>
<div class="modal-body">
GeeksforGeeks
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
height="100px"
width="300px">
</div>
<div class="modal-footer">
<button type="button" class="btn"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Example 2: In this example, we will learn about Vertically centered scrollable modal
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Modal Vertically centered</h2>
<button type="button"
class="btn btn-success"
data-toggle="modal"
data-target="#GFG">
Launch Vertically Centered modal
</button>
<div class="modal fade" id="GFG">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
I am modal vertically centered
</h5>
</div>
<div class="modal-body">
GeeksforGeeks
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">Java</h5>
<p class="card-text">
Java is Object Oriented. However, it is not
considered as pure object-oriented as it
provides support for primitive data types
(like int, char, etc)
</p>
</div>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">Java</h5>
<p class="card-text">
Java is Object Oriented. However, it is not
considered as pure object-oriented as it
provides support for primitive data types
(like int, char, etc)
</p>
</div>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">Java</h5>
<p class="card-text">
Java is Object Oriented. However, it is not
considered as pure object-oriented as it
provides support for primitive data types
(like int, char, etc)
</p>
</div>
</div>
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">Java</h5>
<p class="card-text">
Java is Object Oriented. However, it is not
considered as pure object-oriented as it
provides support for primitive data types
(like int, char, etc)
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Reference: https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered
