Badges

Primary Badge

Use .badge class to get badge. For Primary, colored badge use .badge-primary class.

Primary

Secondary Badge

Use .badge class to get badge. For Secondary, colored badge use .badge-secondary class.

Secondary

Success Badge

Use .badge class to get badge. For Success, colored badge use .badge-success class.

Success

Danger Badge

Use .badge class to get badge. For Danger, colored badge use .badge-danger class.

Danger

Info Badge

Use .badge class to get badge. For Info, colored badge use .badge-info class.

Info

Warning Badge

Use .badge class to get badge. For Warning, colored badge use .badge-warning class.

Warning

Light Badge

Use .badge class to get badge. For Light, colored badge use .badge-light class.

Light

Dark Badge

Use .badge class to get badge. For Dark, colored badge use .badge-dark class.

Dark
Badge With Components

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.

Pill Badges

Primary Badge

Use .badge-pill class to get badge pill. For Primary, colored badge use .badge-primary class.

25

Secondary Badge

Use .badge-pill class to get badge pill. For Secondary, colored badge use .badge-secondary class.

85

Success Badge

Use .badge-pill class to get badge pill. For Success, colored badge use .badge-success class.

41

Danger Badge

Use .badge-pill class to get badge pill. For Danger, colored badge use .badge-danger class.

36

Info Badge

Use .badge-pill class to get badge pill. For Info, colored badge use .badge-info class.

77

Warning Badge

Use .badge-pill class to get badge pill. For Warning, colored badge use .badge-warning class.

30

Light Badge

Use .badge-pill class to get badge pill. For Light, colored badge use .badge-light class.

45

Dark Badge

Use .badge-pill class to get badge pill. For Dark, colored badge use .badge-dark class.

37