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.

Bootstrap class

.modal

Common use cases

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

Variants and classes

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

Code example

HTML

<!-- 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>

Live examples

Standard Modal

A real modal behind a trigger button. Cancel, Delete, the close button and Escape all close it, and it opens again every time.

Example 1

Modal with Form

A form inside a modal, opened from a button. Labels are tied to their inputs.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.