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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
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 =
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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
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 =
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 =
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 =
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 =
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