Modal
Live
Draggable
Animation
Themes
Usecase
Positions
Options
| Reference | Details | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Modal components
|
Below is a static modal example (meaning its
position and display have
been overridden). Included are the modal header, modal
body (required for padding), and modal
footer (optional). We ask that you include modal
headers with dismiss actions whenever possible, or
provide another explicit dismiss action.
|
|||||||||||||||
Live demo
|
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. | |||||||||||||||
Vertically centered
|
Add .modal-dialog-centered to
.modal-dialog to vertically center the
modal.
|
|||||||||||||||
Tooltips and popovers
|
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. | |||||||||||||||
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
|
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.
|
|||||||||||||||
Draggable
|
Use draggable-modal-dialog by adding
class .draggable-modal-dialog with
.modal-dialog class.
|
|||||||||||||||
Themes
|
Use modal-theme-{color} by adding class
with .modal class as: theme-color name
from colors mapping $theme-colors.
|
|||||||||||||||
Usecase
|
See the example for best practices. | |||||||||||||||
Documentations
|
Please visit: https://getbootstrap.com/docs/5.3/components/modal/ |