Bootstrap 5Feedback

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

.alert

Common Use Cases

→Form submission success/error messages
→Warning notices
→Cookie/privacy notices
→Feature announcements
→System status messages
→Validation error summaries

Variants & Classes

Variant	Description	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 + button.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>

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).

FAQ

How do I show a Bootstrap 5 alert after form submission?

After form submission, use JavaScript to add an alert element to the DOM (or toggle a hidden one's visibility). For the accessibility announcement to fire, add role='alert' and dynamically insert the element — don't just show a hidden one.