Bootstrap 5 Modal Scrolling long content
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 = "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/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity = "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" height = "400px" width = "400px" alt = "Java" class = "d-block w-100" > < br >< br > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height = "400px" width = "400px" alt = "HTML" class = "d-block w-100" > < br >< br > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" 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 = "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/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity = "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" height = "400px" width = "400px" alt = "Java" class = "d-block w-100" > < br >< br > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height = "400px" width = "400px" alt = "HTML" class = "d-block w-100" > < br >< br > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" 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
Contact Us