A rendered modal with header, body, and set of actions in the footer.
Specify the position for the modal. You can display modal at top, bottom, or center of page by specifying classes modal-top, modal-bottomand modal-dialog-centeredrespectively.
Examples of custom modals.
Show different contexual alert messages using modal component
A rendered modal with header having contexual background color.
Modal with header, body and footer having contexual background color.
Display a series of modals one by one to guide your users on multiple aspects or take step wise input.
Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use
event.relatedTarget and HTML data-bs-*
attributes to vary the contents of the modal depending on which button was clicked.
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
German
French
Arabic
