Modal in Bootstrap
From the Bootstrap 5 cheat sheet · JavaScript Components · verified Jul 2026
Modal
Modal dialogs
html
<!-- Modal Trigger Button -->
<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">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body text
</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</button>
</div>
</div>
</div>
</div>💡 Use data-bs-backdrop="static" to prevent closing on outside click
⚡ modal-dialog-centered for vertical centering
📌 Multiple modals shouldn't be opened simultaneously
🔥 Use modal events to trigger actions on show/hide