Modals

A modal is a dialog box that appears on top of the page, with the rest of the content dimmed and unclickable behind it — a confirmation prompt, a login form, a "here's more detail" popup, without navigating to a new page.

The full structure

A modal needs three pieces: a trigger button, the modal itself (hidden by default), and Bootstrap's JavaScript bundle loaded on the page to actually show/hide it:

HTML index.html

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

<div class="modal fade" id="confirmModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Are you sure?</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This will permanently delete your account. This can't be undone.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

Intended behavior (needs Bootstrap's JS bundle to actually run)

Before clicking: just a blue "Delete account" button, nothing else visible — the entire modal block is hidden by default. After clicking: the background dims behind a semi-transparent dark overlay, and a centered white dialog box appears on top with "Are you sure?" as its header, the warning text in the middle, and "Cancel"/"Delete" buttons at the bottom. Clicking Cancel, the header's close icon, or the dimmed background outside the box all close it and return to the normal page.

The trigger button's data-bs-target="#confirmModal" has to match the modal's own id="confirmModal" exactly — same pairing rule as the navbar toggle from lesson 6. modal-header, modal-body, and modal-footer are the three content sections Bootstrap expects, in that order, inside modal-content.

Important: unlike every other component in this course so far, a modal is functionally inert without Bootstrap's JavaScript bundle — the CSS alone only defines what it looks like once open, not the show/hide logic itself. Include Bootstrap's bundled JS via a <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> tag before </body>, or clicking the trigger button will do precisely nothing.

PreviousAlerts & Badges NextUtility Classes