Modals
Modals Examples
Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.
Default Modal
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed a
.modal-fullscreen
.
Optional Sizes
Modals have three optional sizes, available via modifier classes to be placed on a
.modal-dialog
.
Vertically Centered
Add
.modal-dialog-centered
to
.modal-dialog
to vertically center the modal.
Scrollable Modal
Scrolling long content modal and You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable
to
.modal-dialog
.
Static Backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Varying Modal Content
Use
event.relatedTarget
and HTML
data-bs-*
attributes
to vary the contents of the modal depending on which button was clicked.
Toggle between modals
Toggle between multiple modals with some clever placement of the
data-bs-target
and
data-bs-toggle
attributes.