Bootstrap5 Modal

A modal (Modal) is a child window that overlays the parent form. Usually, the purpose is to display content from a separate source, allowing some interaction without leaving the parent form. The child window can provide information interaction, etc.

---

How to Create a Modal

The following example creates a simple modal effect:

---

Add Animation

Use the .fade class to set the effect of the modal popping up or closing:

---

Modal Size

We can use the.modal-smclass to create a small modal,.modal-lgclass can create a large modal.

The size class is placed<div>after the element's.modal-dialogclass:

Fullscreen Display

Use the.modal-fullscreenclass to make the modal display fullscreen:

Use the.modal-fullscreen-*-*class to control at what screen size to display fullscreen:

Class	Description	Example
.modal-fullscreen-sm-down	Fullscreen below 576px	Try it Yourself
.modal-fullscreen-md-down	Fullscreen below 768px	Try it Yourself
.modal-fullscreen-lg-down	Fullscreen below 992px	Try it Yourself
.modal-fullscreen-xl-down	Fullscreen below 1200px	Try it Yourself
.modal-fullscreen-xxl-down	Fullscreen below 1400px	Try it Yourself

---

Modal Centered Display

Use the.modal-dialog-centeredclass to set the modal to be centered both horizontally and vertically:

---

Modal Scrollbar

By default, if the modal contains a lot of content, the page will automatically generate a scrollbar, and the modal will scroll with the page:

If we only want to set a scrollbar inside the modal, we can use the.modal-dialog-scrollableclass:

Other Extensions