Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a
Modals have three optional sizes, available via modifier classes to be placed on a
.modal-dialog to vertically center the modal.
You can also create a scrollable modal that allows scroll the modal body by adding
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Toggle Between Modals
Toggle between multiple modals with some clever placement of the
Varying Modal Content
Modal of buttons that all trigger the same modal with slightly different contents. Use
event.relatedTarget and HTML
data-bs-target attributes to vary the contents of the modal depending on which button was clicked.