Advertisement
Google Ad Slot: content-top
Bootstrap 5 Modal
The Modal component in Bootstrap 5 allows you to create dialogs for user interaction, alerts, or additional content display. Modals can include headers, footers, and body content.
Basic Modal:
A simple modal with a button to toggle it.
Example
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is the modal body content.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Static Backdrop:
Prevent the modal from closing when clicking outside of it by setting data-bs-backdrop="static" and data-bs-keyboard="false".
Example
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch Static Modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Static Backdrop</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
You can't close this modal by clicking outside or pressing Escape.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Scrollable Modal:
Create a modal with a scrollable body for longer content.
Example
<div class="bootstrap5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
Launch Scrollable Modal
</button>
<div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Add long content here to enable scrolling -->
<p>Repeated content... Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Vertically Centered Modal:
Center the modal vertically using .modal-dialog-centered.
Example
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centeredModal">
Launch Centered Modal
</button>
<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="centeredModalLabel">Centered Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This modal is vertically centered.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Large,Small and Fullscreen Modals:
Change modal size using .modal-lg or .modal-sm or .modal-fullscreen
Large modal
Small modal
Fullscreen modal
Small modal
Fullscreen modal
Example
<b>Large Modal:</b>
<div class="modal-dialog modal-lg">
...
</div>
<b>Small Modal:</b>
<div class="modal-dialog modal-sm">
...
</div>
<b>Fullscreen Modal:</b>
<div class="modal-dialog modal-fullscreen">
...
</div>