Bootstrap 5 Fullscreen Modal
Bootstrap 5 Fullscreen Modal is used to create a modal that completely covers the entire screen of the user.
Bootstrap 5 Fullscreen Modal Used CLasses:
- modal-fullscreen: This class is used to create Full Screen Modal
- modal-fullscreen-*-down: This class is used to create a full-screen modal based upon breakpoints like sm, md, lg, xl,xxl
Syntax:
<div class="modal-dialog modal-fullscreen">
...
</div>
Example 1: In this example, we will learn about Fullscreen Modal
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Fullscreen Modal
</ h2 >
< button type = "button" class = "btn btn-primary"
data-bs-toggle = "modal" data-bs-target = "#GFG" >
Click Me
</ button >
< div class = "modal fade" id = "GFG" >
< div class = "modal-dialog modal-fullscreen" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title " >
GeeksforGeeks Java Development
</ h5 >
< button type = "button" class = "btn-close"
data-bs-dismiss = "modal" >
</ button >
</ div >
< div class = "modal-body" >
< img src =
height = "400px" width = "400px" alt = "Java"
class = "d-block w-100" >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will see a modal that will be full-screen on smaller screens.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >
Bootstrap 5 Fullscreen Modal
</ h2 >
< button type = "button" class = "btn btn-primary"
data-bs-toggle = "modal" data-bs-target = "#GFG" >
Click Me
</ button >
< div class = "modal fade" id = "GFG" >
< div class = "modal-dialog modal-fullscreen-lg-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title " >
GeeksforGeeks Java Development
</ h5 >
< button type = "button" class = "btn-close"
data-bs-dismiss = "modal" >
</ button >
</ div >
< div class = "modal-body" >
< img src =
height = "400px" width = "400px" alt = "Java"
class = "d-block w-100" >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal
Last Updated :
07 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...