Modals in Bootstrap 5 are elements that display a popup window at the top of the current page. Below is how to create a dialog box or popup using Bootstrap 5.
Modals in Bootstrap 5 are elements that display a popup window at the top of the current page. Below is how to create a dialog box or popup using Bootstrap 5.
How to create a modal in Bootstrap 5
The following sample code shows how to create a basic modal:
Modal Heading
Modal body. For example:
Bootstrap Example Modal template in Bootstrap 5
Click the button to open the modal.
Modal Heading
Modal body.
Add effects
Use a class .fadeto add a fade-in effect when opening and closing a modal:
Sample code:
For example:
Bootstrap Example Example of a modal blur effect.
Click the button to open the modal.
QuanTriMang
Modal body.
Modal size
Change the size of a modal by adding a class .modal-smfor small modals (maximum width 300px), a class .modal-lgfor large modals (maximum width 800px), or .modal-xlfor extra-large modals (maximum width 1140px). The default maximum width is 500px.
Add a size class to the element with the class .modal-dialog:
Small modal:
For example:
Bootstrap Example Small Modal
Click the button to open the modal.
Modal Heading
Modal body.
Large modal:
For example:
Bootstrap Example Large Modal
Click the button to open the modal.
Modal Heading
Modal body.
Extremely large modal:
For example:
Bootstrap Example Extra large Modal
Click the button to open this modal.
Modal Heading
Modal body.
By default, modals are medium-sized (maximum width 500px).
Full-screen modal
If you want the modal to extend across the entire width and height of the page, use the class .modal-fullscreen:
Sample code:
For example:
Bootstrap Example Full-screen modal
Click the button to open the modal in full screen.
Modal Heading
Modal body.
Full-screen responsive modal
You can also control how the modal is fully displayed for each screen size, with the class .modal-fullscreen-*-*:
| Class | Describe |
.modal-fullscreen-sm-down |
Full screen under 576px |
.modal-fullscreen-md-down |
Full screen under 768px |
.modal-fullscreen-lg-down |
Full screen under 992px |
.modal-fullscreen-xl-down |
Full screen under 1200px |
.modal-fullscreen-xxl-down |
Full screen under 1400px |
Center of modal
Align modals vertically and horizontally on the same page using the class .modal-dialog-centered:
For example:
Bootstrap Example For example, centering a modal vertically.
Modal Heading
Modal body.
Modal in roll form
When there is a lot of content inside a modal, a scroll bar will be added to the page. The basic code is as follows:
For example:
Bootstrap Example Modal in roll form
Modal Heading
Some text to enable scrolling.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
However, you can scroll only within the modal, instead of the page itself, by adding .modal-dialog-scrollableit..modal-dialog:
For example:
Bootstrap Example Rolled Modal
Click the button to open this modal.
Modal Heading
Some text to enable scrolling.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Above are the things you need to know about creating modals in Bootstrap 5. Hopefully, this article helps you better understand how to build a popup window for your website or application using Bootstrap 5 .