Modal
A modal is a window over the page that dims everything else and waits for an answer: confirm a deletion, fill in a short form. It is the first component in this chapter that requires JavaScript, so each example ends with bootstrap.bundle.min.js.
How JS components work
Bootstrap's interactive components can be controlled in two ways:
| Way | What it looks like |
|---|---|
| HTML attributes | data-bs-toggle="modal" and data-bs-target="#id" on a button |
| JavaScript | new bootstrap.Modal('#id'), then .show() and .hide() |
Attributes are enough in most cases: Bootstrap's script finds such buttons and attaches the handlers itself.
A modal opened by a button
The modal is a modal fade block with an id, inside it modal-dialog, inside that modal-content with three parts: header, body and footer. The button points to the modal with data-bs-target:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 260px">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
Delete project
</button>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="deleteModalLabel">Delete the project?</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">All tasks of the "Website" project will be deleted permanently.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Click the red button: the background dims and a window with the question slides in from the top. It closes with the cross, the "Cancel" button, the Escape key or a click on the dimmed area. The min-height block is only there to give the modal enough height in the preview.
Modal variants
The classes go on modal-dialog:
| Class | What it does |
|---|---|
modal-dialog-centered | The window is vertically centered |
modal-dialog-scrollable | Scrolling inside the modal body |
modal-sm, modal-lg, modal-xl | Modal width |
modal-fullscreen | Full-screen modal |
The data-bs-backdrop="static" attribute on the modal block prevents closing by a click outside — useful for a form where losing the input would be a pity.
Controlling it from JavaScript
A modal can be opened from code — for example after a failed payment — and you can find out when it was closed:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div style="min-height: 220px"></div>
<div class="modal fade" id="welcome" tabindex="-1" aria-labelledby="welcomeLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<h1 class="fs-5" id="welcomeLabel">Welcome to Tasko!</h1>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Get started</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const welcome = document.querySelector('#welcome');
welcome.addEventListener('hidden.bs.modal', () => console.log('Modal closed'));
new bootstrap.Modal(welcome).show();
</script>The modal opens right on load. After you click "Get started", "Modal closed" appears under the example: the hidden.bs.modal event fires when the modal is fully hidden.
Common mistake
Nesting a modal inside another block with its own positioning or overflow: hidden — for example, in a card or the header. The modal may get clipped or end up under the backdrop. Put modal markup straight into <body>, at the end of the page, before the scripts.