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