Alerts & Badges
Learn Bootstrap's alert contextual variants, dismissible alerts, and badges for counts, labels, and status indicators.
Introduction
Alerts and badges are both about drawing the user's eye to something small but important. Alerts communicate a status message — success, warning, error — in a prominent colored banner. Badges are compact, inline labels used for counts, statuses, or short tags attached to other content.
- Contextual alert variants and when to use each.
- How to build dismissible alerts with the close button.
- Badge basics and how to attach counts to buttons.
- Pill-shaped badges for status labels.
Alert Contextual Variants
Alerts use `.alert` plus a contextual `.alert-{variant}` class, mirroring the same color system used by buttons. Always include `role="alert"` so assistive technologies announce the message.
<div class="alert alert-success" role="alert"> Your changes have been saved successfully.</div><div class="alert alert-danger" role="alert"> There was an error processing your request.</div>Click Run to see what this code prints.
Dismissible Alerts
Add `.alert-dismissible`, the `fade show` classes, and a `.btn-close` button with `data-bs-dismiss="alert"` to let users close the alert. Bootstrap's JavaScript handles the fade-out animation and removal automatically.
<div class="alert alert-warning alert-dismissible fade show" role="alert"> Your session will expire in 5 minutes. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>Click Run to see what this code prints.
Alerts with Links & Content
An alert can hold headings, paragraphs, and links, not just plain text. Use `.alert-link` on any link inside an alert to automatically color it to match the alert's theme with proper contrast.
<div class="alert alert-info" role="alert"> <h4 class="alert-heading">New Feature Available!</h4> <p>Check out our new dashboard. <a href="#" class="alert-link">Learn more</a>.</p></div>Click Run to see what this code prints.
Badge Basics
A `.badge` is a small, bold, rounded label typically used inline with headings or text to show a count or a short status tag. Like buttons and alerts, it accepts the same contextual color classes.
<h5>Inbox <span class="badge bg-primary">4</span></h5><span class="badge bg-success">Active</span><span class="badge bg-secondary">Draft</span>Click Run to see what this code prints.
Badges on Buttons
Placing a badge inside a button (often combined with `.position-absolute` and `.translate-middle`) is a common pattern for notification counts, such as a shopping cart icon showing the number of items.
<button type="button" class="btn btn-primary position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 3 <span class="visually-hidden">unread messages</span> </span></button>Click Run to see what this code prints.
Pill Badges
Add `.rounded-pill` to any badge to give it fully rounded, capsule-shaped ends instead of the default slightly-rounded rectangle — a common style choice for status tags.
<span class="badge rounded-pill bg-success">Completed</span><span class="badge rounded-pill bg-warning text-dark">In Progress</span><span class="badge rounded-pill bg-danger">Overdue</span>Click Run to see what this code prints.
Common Mistakes
- Forgetting role="alert" on alert banners, hurting screen reader accessibility.
- Adding .alert-dismissible without the .btn-close button, leaving no way to actually dismiss it.
- Using .badge-warning or .badge-primary (Bootstrap 4 naming) instead of bg-warning/bg-primary in Bootstrap 5.
- Forgetting text-dark on light badge backgrounds like bg-warning or bg-light, producing low-contrast text.
Best Practices
- Match the alert variant to the actual severity of the message (success vs. warning vs. danger).
- Always include aria-label="Close" on the dismiss button for accessibility.
- Use .visually-hidden text inside notification badges to describe their meaning to screen readers.
- Reserve .rounded-pill badges for status tags and keep count badges the default shape for readability.
- Don't overuse alerts on a single page — reserve them for genuinely important messages.
Frequently Asked Questions
Yes, the fade-out and removal animation when clicking the close button is powered by Bootstrap's JS bundle.
Yes, you can apply .badge to an <a> tag just like buttons, though badges are typically used as static labels rather than interactive controls.
Bootstrap doesn't include built-in alert icons — you would add your own icon (e.g. from Bootstrap Icons) inside the alert markup alongside the text.
.badge is a small inline label meant to sit next to other content (like a count or tag), while .alert is a full-width block-level banner meant to stand alone as a message.
Key Takeaways
- .alert + a contextual variant creates a colored message banner.
- .alert-dismissible + .btn-close + data-bs-dismiss="alert" makes an alert closeable.
- .alert-link colors links to match the surrounding alert theme.
- .badge creates a small, bold, inline label using the same color system as buttons/alerts.
- .rounded-pill gives badges fully rounded, capsule-shaped ends.
- Position utilities (position-absolute, translate-middle) turn a badge into a notification counter.
Summary
Alerts and badges are small components, but they carry a lot of communicative weight — guiding users' attention to statuses, counts, and important messages. Next, you'll build modals, Bootstrap's way of showing focused dialogs on top of the current page.