Modals in Bootstrap 5

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.

<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:

This is how fade animation is applied on modal.

Without animation

Remove the .fade class to open the modal without any animation.

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:

This is how a small modal is created.

Large Modal

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.

Centered Modal

Use .modal-dialog-centered class with .modal-dialog to show modal vertically and horizontally in the center of the page.

Scrolling Modal

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.

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.