Bootstrap 5Feedback

Bootstrap 5 Modal

A Bootstrap 5 modal is a dialog box that appears on top of the current page, requiring user interaction before returning to the main content. Bootstrap 5 modals are accessible, keyboard-navigable, and focus-trapped by default. They're triggered via data attributes or JavaScript.

Primary Class

.modal

Common Use Cases

→Confirmation dialogs
→Image lightboxes
→Login/signup forms in overlay
→Cookie consent dialogs
→Video player overlays
→Terms acceptance prompts

Variants & Classes

Variant	Description	Classes
Default modal	Standard centred dialog with header, body, and footer.	`modal fade + modal-dialog + modal-content + modal-header/body/footer`
Large modal	Wider modal for more content.	`modal-dialog modal-lg`
Full-screen modal	Covers the entire viewport.	`modal-dialog modal-fullscreen`
Vertically centred	Centred both horizontally and vertically.	`modal-dialog modal-dialog-centered`
Static backdrop	Modal won't close when clicking outside.	`data-bs-backdrop='static'`

Code Example

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- Modal markup -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title fw-bold" id="myModalLabel">Confirm Action</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted">Are you sure you want to proceed? This action cannot be undone.</p>
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Confirm</button>
      </div>
    </div>
  </div>
</div>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Image gallery lightbox modal
✓Video embed modal with auto-play on open
✓Multi-step form modal
✓Cookie consent modal with accept/decline
✓Subscribe modal triggered on exit intent

Best Practices

Always include aria-labelledby and aria-hidden

Accessibility requires the modal element to have aria-hidden='true' initially and aria-labelledby pointing to the modal title. Bootstrap handles focus management automatically when these attributes are in place.

Use modal-dialog-centered for forms and alerts

A vertically centred modal feels more intentional and professional than one that anchors to the top. Add modal-dialog-centered to the modal-dialog div for most use cases.

Avoid nesting modals

Bootstrap 5 doesn't support nested modals. If you need layered interactions, use offcanvas for the secondary level or restructure the UX to avoid the need.

FAQ

How do I open a Bootstrap 5 modal with JavaScript?

Use Bootstrap's Modal API: const modal = new bootstrap.Modal(document.getElementById('myModal')); modal.show(); Or use the data-bs-toggle='modal' and data-bs-target='#modalId' attributes on a button for no-JS triggering.

How do I prevent a Bootstrap 5 modal from closing on outside click?

Add data-bs-backdrop='static' to the modal element. This prevents the backdrop click from closing the modal. You can also add data-bs-keyboard='false' to prevent Escape key from closing it.