How to use Bootstrap badges for notifications

Bootstrap badges are used to display notifications, counts, or status indicators; 1. Use .badge with .bg-* and .text-white classes, adding .rounded-pill for pill-shaped styles; 2. Position badges using .position-relative on the parent and .position-absolute with utilities like .top-0 .start-100 .translate-middle for corner alignment; 3. Combine with buttons or icons by nesting the badge inside, adjusting color and position for visual clarity; 4. Update dynamically with JavaScript to show or hide based on count, improving usability; always use semantic colors, keep text short, ensure accessibility with visually-hidden text, and avoid overuse to maintain clean UI, resulting in effective and responsive notification indicators.

Bootstrap badges are lightweight and flexible components perfect for adding notifications, counts, or status indicators to your web interface. They’re commonly used alongside navigation items, buttons, or list elements to show things like unread messages, cart items, or update alerts.

Here’s how to effectively use Bootstrap badges for notifications:

1. Basic Badge Setup

To create a simple notification badge, use the .badge class with a utility background color (like .bg-primary, .bg-danger, etc.). Always include .text-white for readable text on colored backgrounds.

<span class="badge bg-danger text-white">3</span>

This creates a red circular badge showing "3"—ideal for unread notifications.

Note: In Bootstrap 5 , badges no longer have default styling like pills or padding unless you include additional classes. Use .rounded-pill for a pill-shaped badge.

<span class="badge bg-danger text-white rounded-pill">3</span>

This gives a softer, pill-style look commonly used in modern UIs.

2. Positioning Badges on Elements

You’ll often want badges to appear in the corner of buttons, avatars, or nav links. Use positioning utilities to place them precisely.

Example: Badge on a Navigation Link

<a href="#" class="position-relative">
  Messages
  <span class="position-absolute top-0 start-100 translate-middle badge bg-danger text-white rounded-pill">
    9 
    <span class="visually-hidden">unread messages</span>
  </span>
</a>

• position-relative on the parent allows absolute positioning of the badge.
• top-0 start-100 places the badge at the top-right.
• translate-middle centers it perfectly by shifting it -50% in both directions.
• <span class="visually-hidden"> improves accessibility.

This pattern is widely used in dashboards and mobile-style menus.

3. Using Badges with Buttons or Icons

Badges work well with icons (e.g., from Bootstrap Icons or Font Awesome) to show notification counts.

<button type="button" class="btn btn-outline-secondary position-relative">
  <i class="bi bi-bell"></i> Alerts
  <span class="position-absolute top-0 start-100 translate-middle badge bg-warning text-dark rounded-pill">
    5
  </span>
</button>

Tips:

• Use bg-warning text-dark for yellow badges since white text doesn’t contrast well.
• Adjust top, start, or use end/bottom classes depending on where you want the badge (e.g., top-right vs. bottom-left).

4. Dynamic Badge Control with JavaScript (Optional)

You can update badge content dynamically. For example, hiding the badge when there are no notifications:

function updateNotificationCount(count) {
  const badge = document.getElementById('notification-badge');
  if (count > 0) {
    badge.textContent = count > 9 ? '9 ' : count;
    badge.style.display = 'inline'; // Show badge
  } else {
    badge.style.display = 'none'; // Hide badge
  }
}

In HTML:

<a href="#" class="position-relative">
  Notifications
  <span id="notification-badge" class="position-absolute top-0 start-100 translate-middle badge bg-danger text-white rounded-pill" style="display: none;">
    0
  </span>
</a>

This keeps the interface clean when no alerts are present.

Key Tips for Effective Notification Badges

• Use semantic colors:

  • .bg-danger for urgent alerts
  • .bg-warning for warnings
  • .bg-secondary for less important counts

• Limit text length: Keep badge text short—numbers or short labels like "New", "On", or "!".

• Ensure accessibility: Always include visually-hidden text for screen readers when the badge conveys meaning.

• Avoid stacking too many: Too many badges clutter the UI. Prioritize only the most relevant notifications.

Basically, Bootstrap badges are easy to set up and highly customizable for notifications. With a few utility classes and smart positioning, you can create clean, responsive indicators that enhance user experience without overwhelming the design.

The above is the detailed content of How to use Bootstrap badges for notifications. For more information, please follow other related articles on the PHP Chinese website!