Last Updated on January 4, 2025 by Roshan Parihar
Learn how to make modal body scrollable in Bootstrap 5 and other versions. The short answer is to use the class .modal-dialog-scrollable. let’s find out with the examples given below.
How to Make Scrollable Modal in Bootstrap 5
To make the modal body scrollable in Bootstrap 5, add the class .modal-dialog-scrollable to the <div> element having class .modal-dialog as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModalScrollable"> Open scrollable modal </button> <!-- Modal --> <div class="modal fade" id="ModalScrollable" tabindex="-1" aria-labelledby="ModalScrollableLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5">Notification</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Please scroll down <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
You can click the button given above to see the live preview with scroll modal content. Scroll your mouse up and down to see the required result.
Scrollable Modal in Bootstrap 4
For making the modal scrollable in Bootstrap 4, you can add the class .modal-dialog-scrollable to the <div> element where class .modal-dialog is present.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalScrollable"> Open modal center </button> <!-- Modal --> <div class="modal fade" id="ModalScrollable" tabindex="-1" aria-labelledby="ModalScrollableLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ModalScrollableLabel">Notification</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Please scroll down <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
To see the live preview, you can click the button above. After that, again click the button and scroll up and down to see the scrollable content of modal.
Body Scrolling in Bootstrap 3
There are no class present in Bootstrap 3 to achieve the scrollable content in Bootstrap 3. However, you add some CSS to the modal body to make display scroll up and down.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style> .modal-body { max-height: calc(100vh - 212px); overflow-y: auto; } </style> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalScrollable"> Open modal center </button> <!-- Modal --> <div class="modal fade" id="ModalScrollable" tabindex="-1" aria-labelledby="ModalScrollableLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="ModalScrollableLabel">Notification</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Please scroll down <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
If you want to see the required result in Bootstrap 3, you have to click the above button for live preview. After you click the button, scroll up and down to see the content of the modal.