Bootstrap5 Badges
Badges are mainly used to highlight new or unread items. To use badges, simply add the.badgeclass plus a color class with a specific meaning (e.g..bg-secondary) to the<span>element. Badges can change based on the size of the parent element:
Examples
<h1>Test Heading<span class="badge bg-secondary">New</span></h1>
<h2>Test Heading<span class="badge bg-secondary">New</span></h2>
<h3>Test Heading<span class="badge bg-secondary">New</span></h3>
<h4>Test Heading<span class="badge bg-secondary">New</span></h4>
<h5>Test Heading<span class="badge bg-secondary">New</span></h5>
<h6>Test Heading<span class="badge bg-secondary">New</span></h6>
Try it Yourself »
Various Color Types of Badges
The following lists all types of badge colors:
Examples
<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 »
Pill Badges
Use the.rounded-pillclass to set pill-shaped badges:
Examples
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
Try it Yourself »
Badges Inside Elements
The following example embeds badges in buttons:
Examples
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-light">4</span>
</button>
Try it Yourself »