Modals

A modal is a dialog box that overlays the rest of the page, typically used for confirmations, forms, or details that don't need their own full page. Bootstrap's modal handles the overlay, the centering, the open/close animation, and a fair amount of accessibility behavior — all triggered declaratively.

Basic structure

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmModal">
  Delete account
</button>

<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Are you sure?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This will permanently delete your account. This cannot be undone.
      </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</button>
      </div>
    </div>
  </div>
</div>

The button and the modal are connected the same way a navbar toggle connects to its collapse: data-bs-target="#confirmModal" on the trigger matches the id on the modal itself. Clicking the button — or any element inside the modal with data-bs-dismiss="modal" — opens or closes it without a line of JavaScript.

The nesting matters: .modal is the outer, fixed-position overlay; .modal-dialog sizes and centers the visible box; .modal-content is the actual white box with a border and shadow, split into .modal-header, .modal-body, and .modal-footer for consistent internal spacing.

What Bootstrap handles for you

Opening a modal does more than most people realize:

• It adds a .modal-backdrop behind the dialog and locks background scrolling, so the page underneath doesn't move.
• It moves keyboard focus into the modal and traps it there — pressing Tab cycles only through elements inside the modal, so a keyboard user can't accidentally tab into content hidden behind the overlay.
• Pressing Escape closes the modal by default.
• On close, it returns focus to whichever element originally opened it, so a keyboard user doesn't lose their place on the page.

All of that comes from including tabindex="-1" and aria-hidden="true" on the .modal element plus Bootstrap's JavaScript — you get real, correct focus management without writing any of it yourself, which is one of the strongest arguments for using a maintained component library instead of a hand-rolled dialog.

Sizing and behavior variants

<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-dialog-centered">...</div>

.modal-lg (or .modal-sm, .modal-xl) changes the dialog's max-width. .modal-dialog-centered vertically centers it in the viewport instead of the default, which sits near the top.

Controlling it from JavaScript

Data attributes cover most cases, but you can also control a modal programmatically — necessary if you need to open it based on some app logic rather than a click:

const modalEl = document.getElementById("confirmModal");
const modal = new bootstrap.Modal(modalEl);
modal.show();

This is the same underlying API the data attributes call for you — worth knowing once your triggers get more complex than "open on click."