Alerts & Toasts in Bootstrap
From the Bootstrap 5 cheat sheet · JavaScript Components · verified Jul 2026
Alerts & Toasts
Alert messages and toast notifications
html
<!-- Basic Alert -->
<div class="alert alert-primary" role="alert">
A simple primary alert
</div>
<!-- Dismissible Alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This alert is dismissible.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- Toast -->
<div class="toast" role="alert">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Toast message content
</div>
</div>💡 Toasts are opt-in, must be initialized with JavaScript
⚡ Use toast-container for proper positioning and stacking
📌 alert-dismissible adds close functionality to alerts
🔥 Toasts autohide by default after 5 seconds