Badges
Use .badge class to get badge. For Primary, colored badge use .badge-primary class.
Use .badge class to get badge. For Secondary, colored badge use .badge-secondary class.
Use .badge class to get badge. For Success, colored badge use .badge-success class.
Use .badge class to get badge. For Danger, colored badge use .badge-danger class.
Use .badge class to get badge. For Info, colored badge use .badge-info class.
Use .badge class to get badge. For Warning, colored badge use .badge-warning class.
Use .badge class to get badge. For Light, colored badge use .badge-light class.
Use .badge class to get badge. For Dark, colored badge use .badge-dark class.
Badge With Components
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
Use badge class in anchor tag for badge with link.
Use badge class in button tag for badge with button.
Built-in styles are included for placing badges in active states in pill navigations.
Pill Badges
Use .badge-pill class to get badge pill. For Primary, colored badge use .badge-primary class.
Use .badge-pill class to get badge pill. For Secondary, colored badge use .badge-secondary class.
Use .badge-pill class to get badge pill. For Success, colored badge use .badge-success class.
Use .badge-pill class to get badge pill. For Danger, colored badge use .badge-danger class.
Use .badge-pill class to get badge pill. For Info, colored badge use .badge-info class.
Use .badge-pill class to get badge pill. For Warning, colored badge use .badge-warning class.
Use .badge-pill class to get badge pill. For Light, colored badge use .badge-light class.
Use .badge-pill class to get badge pill. For Dark, colored badge use .badge-dark class.