Alerts
Provide contextual feedback messages for typical user actions with flexible alert messages.
Contextual feedback!
Examples
M3 Soft Colors
A simple primary alert — check it out!
A simple success alert — check it out!
A simple danger alert — check it out!
Alerts provide contextual feedback for user actions. Use classes like .alert-primary or .alert-success to define the tone.
HTML
<!-- Contextual alert variants -->
<div class="alert alert-primary shadow-sm" role="alert">A simple primary alert!</div>
<div class="alert alert-success shadow-sm" role="alert">A simple success alert!</div>
<div class="alert alert-danger shadow-sm" role="alert">A simple danger alert!</div>Dismissing
Requires Bundle JS
Heads up! You should check in on some of those fields below.
Add .alert-dismissible and a btn-close to enable dismissal. This requires the Bootstrap JavaScript library.
HTML
<!-- Dismissible alert (requires Bootstrap JS) -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Heads up!</strong> Check these fields.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>