Bootstrap 5 Modal Example

Bootstrap 5 modals are popup dialogs used for confirmations, forms, alerts and more. This page covers 6 modal patterns — from a simple dialog to fullscreen and scrollable modals — each with working copy-paste HTML.

Quick Setup

Modals require Bootstrap 5 JS bundle:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

Class	What It Does
`.modal`	Required wrapper element
`.modal-dialog`	Positions and sizes the modal
`.modal-content`	White box containing the modal
`.modal-header`	Top section with title and close button
`.modal-body`	Main content area
`.modal-footer`	Bottom section with action buttons
`.modal-dialog-centered`	Vertically centers the modal
`.modal-dialog-scrollable`	Makes modal body scrollable
`.modal-fullscreen`	Covers entire screen
`.modal-sm`	Small modal (300px)
`.modal-lg`	Large modal (800px)
`.modal-xl`	Extra large modal (1140px)

1. Basic Bootstrap 5 Modal

A simple modal with header, body and footer. Triggered by a button click.

2. Bootstrap 5 Modal with Form

A modal containing a login form. Common pattern for quick sign-in without leaving the page.

3. Bootstrap 5 Confirmation Dialog

A delete confirmation modal with warning icon. Use before destructive actions.

4. Bootstrap 5 Fullscreen Modal

A modal that covers the entire screen. Use modal-fullscreen class on modal-dialog.

5. Bootstrap 5 Modal Sizes

Bootstrap 5 modals come in sm, default, lg and xl sizes. Use modal-sm, modal-lg or modal-xl on modal-dialog.

6. Bootstrap 5 Scrollable Modal

A modal with scrollable body content using modal-dialog-scrollable. Header and footer stay fixed.

Frequently Asked Questions

How do I trigger a Bootstrap 5 modal with JavaScript?▲

Use the Modal class: const modal = new bootstrap.Modal(document.getElementById('myModal')); modal.show(); To hide: modal.hide(). You can also use data-bs-toggle='modal' and data-bs-target='#myModal' on any button without writing JavaScript.

How do I close a Bootstrap 5 modal on backdrop click?▼

By default Bootstrap closes the modal on backdrop click. To disable this add data-bs-backdrop='static' to the modal element. To also prevent closing on Escape key add data-bs-keyboard='false'.

How do I center a Bootstrap 5 modal vertically?▼

Add modal-dialog-centered class to the modal-dialog element: <div class='modal-dialog modal-dialog-centered'>. This vertically centers the modal on the screen.

How do I pass data to a Bootstrap 5 modal?▼

Listen for the show.bs.modal event: document.getElementById('myModal').addEventListener('show.bs.modal', function(event) { const button = event.relatedTarget; const value = button.getAttribute('data-bs-value'); }). Then set data-bs-value on the trigger button.

How do I stack multiple Bootstrap 5 modals?▼

Bootstrap 5 does not officially support stacked modals. The recommended approach is to close the first modal before opening the second, or use a single modal and update its content dynamically using JavaScript.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →