Open In App

Bootstrap 5 Fullscreen Modal

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads