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.
Bootstrap class
.alertCommon use cases
- Form submission success/error messages
- Warning notices
- Cookie/privacy notices
- Feature announcements
- System status messages
- Validation error summaries
Variants and classes
| Variant | Description and classes |
|---|---|
| Success alert | Green: confirms a successful action.alert alert-success |
| Danger alert | Red: signals an error or destructive action.alert alert-danger |
| Warning alert | Yellow: signals caution.alert alert-warning |
| Info alert | Blue: informational message.alert alert-info |
| Dismissible alert | Alert with a close button that removes it.alert alert-success alert-dismissible fade show + btn-close data-bs-dismiss="alert" |
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 template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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).