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.