This article is about
- How to create a modal in bootstrap 5?
- Basic Modal
- Add Animation to a modal
- Modal Sizes
- Centered Modal
- Full-Screen Modal
- Responsive Full-Screen Modal
- Scrolling Modal
How to create a modal
To create a modal, first create a div with .modal class along with its unique id then wrap this div around a div with .modal-dialog class, inside this div create another div with the .modal-content class and inside .modal-content div create three more divs with the .modal-header, .modal-body, .modal-footer classes.
.modal-header div contains the title of the modal and its dismissal button.
.modal-body div contains the main content off the modal.
.modal-footer div contains the control buttons of the modal.
To create a basic modal, create a div that use .modal class with unique id after that wrap this div around the divs containing .modal-dialog, .modal-content, .modal-header, .modal-body and .modal-footer classes as shown in the example.
<h1>Add Categories</h1> <br>
This modal example is for adding categories
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MM">
<div class="modal" id="MM">
<!-- M.Header -->
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
<!-- M.body -->
<input class="form-control" type="text" placeholder="Category Name">
<textarea class="form-control" placeholder="Description"></textarea>
<!-- M.footer -->
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
This is how a basic model is created.
Add Animation to a modal
To add animation to your modal use .fade class with .modal class:
This is how fade animation is applied on modal.
Remove the .fade class to open the modal without any animation.
This is how a modal looks without animation.
Modals can have three sizes:
To create a small modal, the .modal-sm class is used:
This is how a small modal is created.
To create a large modal, the .modal-lg class is used:
This is how a large modal is created.
Extra Large Modal
To create an extra large modal, the .modal-xl class is used:
This is how an extra large modal is created.
Full Screen Modals
If you want your modal to appear on full screen then use .modal-fullscreen class with .modal-dialog class.
This is how a full-screen modal is created.
Responsive Full-Screen Modals
We can also control when the modal will show as a fullscreen modal. For that use the following classes as your requirement.
- .modal-fullscreen-sm-down this class shows fullscreen modal when screen size is below 576px.
- .modal-fullscreen-md-down this class shows fullscreen modal when screen size is below 768px.
- .modal-fullscreen-lg-down this class shows fullscreen modal when screen size is below 992px.
- .modal-fullscreen-xl-down this class shows fullscreen modal when screen size is below 1200px.
- .modal-fullscreen-xxl-down this class shows fullscreen modal when screen size is below 1400px.
Use .modal-dialog-centered class with .modal-dialog to show modal vertically and horizontally in the center of the page.
A scrollbar is automatically added to a page when the content in a model is large.
So it is not a good approach to scroll the whole page instead of scrolling the modal only to solve this problem add a class .modal-dialog-scrollable with the .modal-dialog class to make the modal scrollable
A scrollable modal is successfully created and working perfectly fine.
Modal is created by using the .modal class which wraps around other divs containing .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer . The above article outlines the basic structure of the bootstrap 5 modal with a header, body, and footer which contain action buttons for the user. Also, it showcases different modal types like modal sizes, modals with or without animation, centered modal, and responsive fullscreen modals.