Skip to content

Bootstrap Modal

Modals display focused content or actions in a dialog layered above the page. This lesson covers building modals, triggering them, and controlling size and behavior.

Bootstrap Modal Overview

A modal is triggered by an element with data-bs-toggle="modal" and data-bs-target pointing to the modal's id. The modal itself is structured with .modal-dialog, .modal-content, and inner .modal-header, .modal-body, and .modal-footer sections, while Bootstrap manages the backdrop, focus trapping, and Escape-to-close behavior.

Modals can be sized with modal-sm, modal-lg, or modal-xl, centered vertically with modal-dialog-centered, made scrollable with modal-dialog-scrollable for long content, and locked open with a static backdrop so accidental outside clicks don't dismiss important dialogs.

Concept Description Common Usage
data-bs-toggle="modal" Trigger attribute on a button or link Opening a modal on click
.modal-dialog Sizing and positioning wrapper Controls width and vertical alignment
.modal-header / .modal-body / .modal-footer Structured sections inside the dialog Title, main content, and action buttons
data-bs-backdrop="static" Prevents closing by clicking outside Forcing users to explicitly confirm or cancel
modal-dialog-centered / scrollable Vertical centering or internal scrolling Long content or short confirmation dialogs

Bootstrap Modal Example

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDelete">
  Delete Account
</button>

<div class="modal fade" id="confirmDelete" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteLabel">Delete your account?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This action cannot be undone. All your data will be permanently removed.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Delete Account</button>
      </div>
    </div>
  </div>
</div>

The trigger button uses data-bs-toggle="modal" with data-bs-target matching the modal's id to open it. modal-dialog-centered vertically centers the dialog, and the header's btn-close plus data-bs-dismiss="modal" attributes give users two clear ways to cancel: the close icon or the Cancel button in the footer.

Top 10 Bootstrap Modal Examples

These are the modal structural and behavioral patterns you'll build repeatedly.

# Example Syntax
1 Modal trigger button <button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
2 Modal shell <div class="modal fade" id="myModal" tabindex="-1">...</div>
3 Modal dialog + content <div class="modal-dialog"><div class="modal-content">...</div></div>
4 Modal header with close button <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
5 Centered modal <div class="modal-dialog modal-dialog-centered">...</div>
6 Large modal <div class="modal-dialog modal-lg">...</div>
7 Scrollable modal body <div class="modal-dialog modal-dialog-scrollable">...</div>
8 Static backdrop (non-dismissible outside) <div class="modal" data-bs-backdrop="static">...</div>
9 Fullscreen modal <div class="modal-dialog modal-fullscreen">...</div>
10 Manual JS trigger new bootstrap.Modal(document.getElementById('myModal')).show();

Best Practices

  • Always include aria-labelledby pointing to the modal's title for screen reader context.
  • Use data-bs-backdrop="static" and data-bs-keyboard="false" for dialogs requiring explicit confirmation.
  • Keep modal-footer actions consistent: cancel/secondary on the left, primary action on the right.
  • Use modal-dialog-scrollable for modals with long content instead of letting the whole page scroll.
  • Reserve fullscreen or large modals for content that genuinely needs the extra space.
  • Never trap users without a clear way to close the modal unless the action truly requires it.
  • Test focus management—Bootstrap automatically returns focus to the trigger element when closed.

Common Mistakes

  • Mismatching data-bs-target and the modal's id, so the trigger does nothing.
  • Forgetting tabindex="-1" on the modal root, which Bootstrap's docs recommend for correct focus handling.
  • Nesting one modal inside another, which Bootstrap does not support well.
  • Not adding aria-label to the close button, leaving it unclear for assistive technology.
  • Using a static backdrop on a modal without ever giving users a visible way to close it.
  • Putting critical page content only inside a modal, hurting SEO and discoverability.

Key Takeaways

  • Modals are triggered with data-bs-toggle="modal" and data-bs-target referencing the modal id.
  • modal-header, modal-body, and modal-footer structure the dialog's content.
  • Sizing classes (modal-sm/lg/xl/fullscreen) and modal-dialog-centered control layout.
  • Static backdrops force explicit confirmation instead of allowing outside-click dismissal.
  • Accessible labeling and focus management are built in but depend on correct markup.

Pro Tip

For destructive actions, combine a static backdrop with a disabled keyboard Escape (data-bs-keyboard="false") only when the action is truly critical—otherwise leave both dismissal paths open so users don't feel trapped.

You now understand how to build Bootstrap modals. Continue to Bootstrap Offcanvas to build slide-in panels.