Modal is a dialog box or a popup window that is used to give important information to the user before taking any action or moving further on a web page. Basically, bootstrap 5 modals are used to give information like session time out or it appears when a user is trying to delete or update something. Moreover, it is used for confirmation purposes or to show hidden content on demand.
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.
Basic 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.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-01.gif" height="476" src="data:image/svg xml,” width=”1122″>
<div class=“container” style=“margin-top: 15px;”>
<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”>
Open Modal
</button>
<div class=“modal” id=“MM”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<h4 class=“modal-title”>Categories</h4>
<button type=“button” class=“btn-close” data-bs-dismiss=“modal”></button>
</div>
<div class=“modal-body”>
<form class=“form-control”>
<input class=“form-control” type=“text” placeholder=“Category Name”>
<br>
<textarea class=“form-control” placeholder=“Description”></textarea>
</form>
</div>
<div class=“modal-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>
</div>
</div>
</div>
</div>
</div>
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:
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-02.gif" height="476" src="data:image/svg xml,” width=”1122″>
This is how fade animation is applied on modal.
Without animation
Remove the .fade class to open the modal without any animation.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-03.gif" height="476" src="data:image/svg xml,” width=”1122″>
This is how a modal looks without animation.
Modal Sizes
Modals can have three sizes:
- Small
- Large
- Extra-large
Small Modal
To create a small modal, the .modal-sm class is used:
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-04.gif" height="476" src="data:image/svg xml,” width=”1122″>
This is how a small modal is created.
Large Modal
To create a large modal, the .modal-lg class is used:
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-05.gif" height="613" src="data:image/svg xml,” width=”1354″>
This is how a large modal is created.
Extra Large Modal
To create an extra large modal, the .modal-xl class is used:
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-06.gif" height="613" src="data:image/svg xml,” width=”1354″>
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.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-07.gif" height="613" src="data:image/svg xml,” width=”1354″>
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.
Centered Modal
Use .modal-dialog-centered class with .modal-dialog to show modal vertically and horizontally in the center of the page.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-08.gif" height="562" src="data:image/svg xml,” width=”1304″>
Scrolling Modal
A scrollbar is automatically added to a page when the content in a model is large.
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-09.gif" height="626" src="data:image/svg xml,” width=”1356″>
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
<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/bootstrap-modals-10.gif" height="582" src="data:image/svg xml,” width=”1220″>
A scrollable modal is successfully created and working perfectly fine.
Conclusion
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.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg6265d47f67465.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
