Bootstrap 5 Alert
Bootstrap 5 alerts provide contextual feedback messages for user actions. Eight colour variants (success, info, warning, danger, primary, secondary, light, dark) cover all feedback scenarios. Alerts can be dismissible with a close button using Bootstrap's Alert JavaScript plugin.
Primary Class
.alertCommon Use Cases
- →Form submission success/error messages
- →Warning notices
- →Cookie/privacy notices
- →Feature announcements
- →System status messages
- →Validation error summaries
Variants & Classes
| Variant | Description |
|---|---|
| Success alert | Green — confirms a successful action. |
| Danger alert | Red — signals an error or destructive action. |
| Warning alert | Yellow — signals caution. |
| Info alert | Blue — informational message. |
| Dismissible alert | Alert with a close button that removes it. |
Code Example
<!-- Success dismissible alert -->
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="20" height="20" role="img" aria-label="Success:">
<use xlink:href="#check-circle-fill"/>
</svg>
<div>
<strong>Success!</strong> Your message has been sent. We'll be in touch within 24 hours.
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
<strong>Error:</strong> Please fill in all required fields before submitting.
</div>Live Examples
Contextual Alerts
Success, warning, and danger alert variants with contextual colours and dismiss buttons.
Alert with Left Border
Modern alert style with coloured left border instead of full background fill.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Alert with left border accent (no background fill)
- ✓Floating toast-style alert
- ✓Full-width banner announcement alert
- ✓Alert with icon and action button
- ✓Inline form error message
Best Practices
Always add role='alert' for accessibility
The role='alert' attribute tells screen readers to announce the alert content immediately when it appears. For dynamically added alerts via JavaScript, this ensures users with assistive technology receive the feedback.
Use alert-dismissible with fade and show together
For the close animation to work correctly, the alert needs all three: alert-dismissible (positions the close button), fade (enables CSS transition), and show (sets initial visible state).