Modals

Modals are dialog overlays that focus the user's attention on a specific task or piece of content. They disable interaction with the rest of the page until dismissed.

Basic Modal

A simple modal with a title, body text, and action buttons. Triggered by a button with data-bs-toggle="modal" and data-bs-target pointing to the modal's ID.

<button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn bg-gradient-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Centered Modal

Add modal-dialog-centered to vertically center the modal in the viewport.

<div class="modal-dialog modal-dialog-centered">
  <!-- modal content -->
</div>

Control modal width with size classes on modal-dialog.

<div class="modal-dialog modal-sm">...</div>    <!-- Small: 300px -->
<div class="modal-dialog">...</div>              <!-- Default: 500px -->
<div class="modal-dialog modal-lg">...</div>     <!-- Large: 800px -->
<div class="modal-dialog modal-xl">...</div>     <!-- Extra Large: 1140px -->

Confirmation Dialog

A common pattern for delete or destructive actions.

<button type="button" class="btn bg-gradient-danger" data-bs-toggle="modal" data-bs-target="#confirmModal">
  <i class="fa fa-trash me-1"></i> Delete Item
</button>

<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Are you sure you want to delete this item? This action cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn bg-gradient-danger" data-bs-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>

Modals can contain forms for inline editing or data entry.

<div class="modal-body">
  <div class="mb-3">
    <label class="form-label">Name</label>
    <input type="text" class="form-control" placeholder="Full name">
  </div>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="email@example.com">
  </div>
  <div class="mb-3">
    <label class="form-label">Role</label>
    <select class="form-select">
      <option>Viewer</option>
      <option>Editor</option>
      <option>Admin</option>
    </select>
  </div>
</div>

Static Backdrop

Add data-bs-backdrop="static" to prevent closing the modal by clicking outside it.

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false"
     tabindex="-1" aria-hidden="true">
  <!-- modal content -->
</div>

Scrollable Content

Add modal-dialog-scrollable for modals with long content. The body scrolls while the header and footer stay fixed.

<div class="modal-dialog modal-dialog-scrollable">
  <!-- modal content with long body -->
</div>

Opening Modals via JavaScript

Modals can also be triggered programmatically using the Bootstrap Modal API:

// Show a modal
var modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();

// Hide a modal
modal.hide();

// Listen for events
document.getElementById('myModal').addEventListener('hidden.bs.modal', function () {
  // cleanup after modal closes
});

This approach is used by the site's Easter Egg — try the Konami Code to see it in action: ↑ ↑ ↓ ↓ ← → ← → B A

Usage Guidelines

  • Use modals sparingly. They interrupt the user's workflow. Consider inline content or expanding sections instead.
  • Provide a clear title that describes the modal's purpose.
  • Always include a close mechanism — both the X button and a Cancel/Close button in the footer.
  • Use centered modals (modal-dialog-centered) for important dialogs like confirmations.
  • Keep modal content focused. If you need extensive content, consider a dedicated page instead.
  • Ensure accessibility:
  • Use aria-labelledby pointing to the modal title
  • Use aria-hidden="true" on the modal element
  • Ensure tabindex="-1" on the modal
  • The close button should have aria-label="Close"
On this page