Bootstrap 5 Badges


Badges are small components that you can use to highlight and display additional information or context within your website or web application. They are typically used to label, categorize, or provide additional information about elements like buttons, links, or other content.

Headings with Badges

Example 
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Try it Yourself

Output:


Colored Badges

Use any of the contextual classes (.bg-*) to change the color of a badge:

Example 
<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">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
Try it Yourself

Output:


Pill Badges

Use the .rounded-pill class to make badges more rounded with a larger border-radius.

Example 
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</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">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Try it Yourself

Output:


Buttons with Badges

You can add badges to buttons to provide additional information or context.

Example 
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-danger">7</span>
</button>
Try it Yourself

Output:


Positioning Badges

In Bootstrap 5, you can use utility classes to position badges exactly where you want them within an element. You can adjust the position of badges using classes like .position-relative, .position-absolute, and various placement classes.

And also add positioning classes like .top, .bottom, .start, or .end

Example 
<button type="button" class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
    9+
  </span>
</button>
Try it Yourself
  • To place a badge at the top-left corner of an element, you can use the .position-absolute class in combination with .top-0 and .start-0 classes.
  • To place a badge at the top-right corner of an element, you can use the .position-absolute class in combination with .top-0 and .start-100 classes.

    • Output: