Modal
Default Modals
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Static Backdrop
When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.
Scrolling Long Content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable modal that allows scroll the
modal body by adding .modal-dialog-scrollable to
.modal-dialog.
Modal Position
Add .modal-dialog-centered to
.modal-dialog to vertically center the modal.
Specify the position for the modal. You can display modal at top, bottom of page
by specifying classes modal-top and modal-bottom
respectively.
Toggle Between Modals
Toggle between multiple modals with some clever placement of
the data-bs-target and
data-bs-toggle attributes. For example, you could toggle a password
reset modal from within an already
open sign in modal. Please note multiple modals cannot be open at the same
time—this method simply
toggles between two separate modals.
Optional Sizes
Modals have three optional sizes, available via modifier
classes to be placed on a .modal-dialog. These sizes kick in at certain
breakpoints to avoid horizontal scrollbars on narrower viewports.
Fullscreen Modal
Modals have three optional sizes, available via modifier
classes to be placed on a .modal-dialog. These sizes kick in at certain
breakpoints to avoid horizontal scrollbars on narrower viewports.
Modal Based Alerts
Modals have three optional sizes, available via modifier
classes to be placed on a .modal-dialog. These sizes kick in at certain
breakpoints to avoid horizontal scrollbars on narrower viewports.