Nearby lessons
10 of 39⚠️ BS5 Alerts
📖 Bootstrap 5 Alerts Overview
Bootstrap 5 alerts are used to provide contextual feedback messages for typical user actions. They support different color variants, dismissible behavior, and can contain any HTML content.
🎨 Basic Alert Variants (.alert-*)
All alerts start with the base .alert class plus a color variant:
.alert-primary.alert-secondary.alert-success.alert-info.alert-warning.alert-danger.alert-light.alert-dark
🔗 Alerts With Links (.alert-link)
Use .alert-link to style links inside alerts so they match the alert color.
📦 Alerts With Additional Content
Alerts can contain headings, paragraphs, and horizontal rules for more complex messages.
❌ Dismissible Alerts (.alert-dismissible)
Add .alert-dismissible, .fade, and .show with a .btn-close inside the alert to let users close it.
✅ Alert Best Practices
- Use appropriate colors: Match alert variant to the message type (success, danger, warning, info, etc.)
- Keep messages concise: Clearly explain what happened and what to do next
- Allow dismissal when possible: Use dismissible alerts for non-critical messages
- Ensure accessibility: Use
role="alert"for important alerts so screen readers announce them - Avoid overuse: Too many alerts can overwhelm users and reduce impact
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Buttons