Bootstrap 5 Badges

Small count and labeling components

🏷️ What are Bootstrap Badges?

Badges are small components used to display counts, labels, or status indicators. They scale to match the size of their parent element and can be customized with colors and styles. 


<!-- Basic Badge Example -->
<h1>Notifications <span class="badge bg-primary">4</span></h1>

Output:

Notifications 4

Badge Colors

Contextual badge coloring enhances information categorization while improving visual scanning efficiency and interface comprehension across all user abilities. Apply Bootstrap's background utility classes (bg-primary, bg-success, etc.) to badges to create visual associations with specific content types, statuses, or categories. Each color conveys semantic meaning that users interpret subconsciously, accelerating content processing and decision-making. Ensure badge colors maintain sufficient contrast ratios for readability while aligning with overall interface color hierarchy. Contextual coloring improves information architecture by creating visual groupings and relationships within complex interfaces. These visual cues reduce cognitive load and improve task completion rates—positive engagement signals that search engines monitor. Additionally, properly colored badges enhance accessibility when combined with appropriate text labels for screen reader users. 

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Output:

Primary Secondary Success Danger Warning Info Light Dark

🔹 Pill Badges

Pill-styled badges create modern visual treatments while improving touch target sizes and aesthetic appeal across all interface contexts. Add the rounded-pill utility class to standard badges to create fully rounded capsules ideal for tags, categories, and status indicators. The pill shape provides more generous padding and improved visual weight compared to standard rectangular badges, making them particularly effective for mobile interfaces requiring larger touch targets. Pill badges also create softer, more contemporary aesthetics that align with modern design trends. When implementing pill badges, ensure text remains legible at all sizes and maintain appropriate minimum dimensions for accessibility compliance. These visual enhancements improve interface appeal and usability—factors that contribute to longer session durations and lower bounce rates, positively influencing SEO metrics through improved user engagement signals. 

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>

Output:

Primary Success Danger Warning

🔹 Badges in Buttons

Integrated badge-button combinations communicate quantitative information while maintaining interaction functionality and visual hierarchy. Place badges within button elements to indicate counts, statuses, or numerical data relevant to the button's action. Bootstrap automatically positions and scales badges within buttons, maintaining visual balance and interaction integrity. This pattern is particularly effective for navigation items showing unread counts, cart buttons displaying item quantities, or action buttons indicating pending tasks. Ensure badges within buttons maintain sufficient color contrast and don't interfere with button text legibility or hover/focus states. This integration improves interface information density without increasing cognitive load—helping users make informed decisions about which actions to take. These clarity improvements enhance user experience metrics that search engines evaluate during quality assessments. 

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">9</span>
</button>

<button type="button" class="btn btn-success">
  Messages <span class="badge bg-light text-dark">4</span>
</button>

Output:

🔹 Positioned Badges

Strategically positioned badges create visual emphasis while maintaining layout integrity and accessibility across all interface elements. Combine Bootstrap's positioning utilities (position-absolute, top-0, start-100) with transform utilities (translate-middle) to place badges in precise locations relative to parent containers. This technique is ideal for notification indicators on avatars, status markers on icons, or quantitative overlays on interface elements. Ensure positioned badges don't obscure critical content or interactive areas, particularly on touch devices where accidental activation could occur. Proper badge positioning improves information hierarchy by drawing attention to important status changes while maintaining clean visual design. These enhancements contribute to better user comprehension and task efficiency—positive engagement signals that indirectly influence SEO rankings through improved user satisfaction metrics. 

<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">
    99+
  </span>
</button>

Output:

🧠 Test Your Knowledge

Which class makes a badge pill-shaped?