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

More Bootstrap tasks

Back to the full Bootstrap 5 cheat sheet