Open In App

Bootstrap 5 Modal Scrolling long content

Last Updated : 05 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable. Modals can either be scrolled independently of the page or we can scroll the modal body. We will learn about them using examples

Syntax:

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

Bootstrap 5 Modal Scrolling long content Class:

  • modal-dialog-scrollable: This class is used for making a scrolling modal content

Example 1: In this example, we will learn how we create a modal such that it scrolls independently of the page.

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>
        <h3>
            Bootstrap 5 Modal Scrolling long content
        </h3>
  
        <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-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="GFGLabel"
                            Modal Scroll independent of the page
                        </h5>
                        <button type="button" class="btn-close" 
                                data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src=
                             width="400px" alt="Java" 
                             class="d-block w-100">
                        <br><br>
                        <img src=
                            height="400px" width="400px" 
                            alt="HTML" class="d-block w-100">
                        <br><br>
                        <img src=
                            height="400px" width="400px" 
                            alt="Angular" class="d-block w-100">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In this example, we will create a scrollable modal that allows scrolling the modal body by adding class modal-dialog-scrollable 

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 Modal Scrolling long content
        </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-lg  
                        modal-dialog-scrollable ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="GFGLabel"
                            Modal Scrolling the modal body
                        </h5>
                        <button type="button" class="btn-close" 
                                data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src=
                            width="400px" alt="Java" 
                            class="d-block w-100">
                        <br><br>
                        <img src=
                            height="400px" width="400px" 
                            alt="HTML" class="d-block w-100">
                        <br><br>
                        <img src=
                            height="400px" width="400px" 
                            alt="Angular" class="d-block w-100">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/modal/#scrolling-long-content



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads