Modal
Modal View
Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".
Default Modal
Display a default modal using Bootstrap by adding a <div class="modal fade"> structure. Trigger it with a button or link using data-bs-toggle="modal" and data-bs-target="#defaultModal" for a live demo experience.
Static backdrop
Create a static backdrop modal using Bootstrap by adding the data-bs-backdrop="static" attribute to your modal. This prevents the modal from closing when clicking outside of it.
Scrolling long content
Handle long content in a Bootstrap modal by adding .modal-dialog-scrollable to the <div class="modal-dialog">. This allows the modal body to scroll while keeping the header and footer fixed.
Vertically centered
Center a Bootstrap modal vertically by adding .modal-dialog-centered to the <div class="modal-dialog">. This aligns the modal in the middle of the viewport.
Tooltips and popovers
Enable tooltips and popovers inside a Bootstrap modal by initializing them with data-bs-toggle="tooltip" or data-bs-toggle="popover". This allows interactive elements within the modal to display additional information.
Fullscreen Modal
Create a fullscreen modal in Bootstrap by adding the .modal-fullscreen class to the <div class="modal-dialog">. This expands the modal to cover the entire viewport.
Modal Size
Adjust the size of a Bootstrap modal by adding size-specific classes like .modal-sm for small, .modal-lg for large, or .modal-xl for extra-large to the <div class="modal-dialog">.
Fullscreen Modals Example
Handle long content in a Bootstrap modal by adding .modal-dialog-scrollable to the <div class="modal-dialog">. This allows the modal body to scroll while keeping the header and footer fixed.
| Class | Availability |
|---|---|
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
576px |
.modal-fullscreen-md-down |
768px |
.modal-fullscreen-lg-down |
992px |
.modal-fullscreen-xl-down |
1200px |
.modal-fullscreen-xxl-down |
1400px |
Draggable Modal
Make a Bootstrap modal draggable by adding the data-draggable="true" attribute to the <div class="modal"> element. This allows users to move the modal around the screen.
Animated Modal
Choose an animation from the dropdown and click Show Modal to see the Bootstrap modal open with a smooth animation effect.