Bootstrap Modal
A modal is a dialog box that pops up on top of the current page, dimming everything behind it until the user responds. Bootstrap 5 modals are perfect for login forms, confirmations, and important messages, and they work without you writing any JavaScript.
What is a Modal?
A modal grabs the user's attention by displaying content in a layer above the page. While it is open, Bootstrap adds a dark backdrop behind it so the rest of the page is dimmed and cannot be clicked. Modals are commonly used to confirm an action, show a form, or display details without navigating to a new page.
A modal is made of three main parts: the .modal wrapper, the .modal-dialog that centers and sizes it, and the .modal-content that holds the header, body, and footer.
Opening a Modal with a Button
You open a modal by clicking a trigger element, usually a button. The trigger needs data-bs-toggle="modal" and a data-bs-target that points to the modal's id. No JavaScript is required, Bootstrap wires it up for you.
Trigger button and modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap 5 modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Sizing and Centering
You can change the size of a modal by adding a size class to the .modal-dialog element: modal-sm for small, modal-lg for large, and modal-xl for extra large. To center the modal vertically in the screen, add modal-dialog-centered.
A large, centered modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="bigModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Terms of service</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Read our terms carefully before continuing.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Scrollable Content
When a modal has a lot of content, add modal-dialog-scrollable to the dialog. This keeps the header and footer fixed while the body scrolls, so the buttons are always reachable.
Scrollable modal dialog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<p>Lots of long content goes here...</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Common Modal Classes
Exercise: Bootstrap Modal
How is a Bootstrap 5 modal actually made visible, since it's hidden by default?
