Secondary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-secondaryclass within element to create default pill badge.

Secondary

Primary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-primaryclass within element to create primary pill badge.

Primary

Success Pill Badges

Use the .badge class, followed by.badge-pill with .badge-successclass within element to create success pill badge.

Success

Danger Pill Badges

Use the .badge class, followed by .badge-pill with .badge-dangerclass within element to create danger pill badge.

Danger

Info Pill Badges

Use the .badge class, followed by .badge-pill with .badge-infoclass within element to create info pill badge.

Info

Warning Pill Badges

Use the .badge class, followed by .badge-pill with .badge-warningclass within element to create warning pill badge.

Warning

Glow Badges

Use class .badge-glow to add glow effect to your badge

Primary
Success
Danger
Info
Warning

Light Badges

Use class .badge-pill class with .badge.badge-light-{colorName} to add light effect to your badge.

Primary
Success
Danger
Info
Warning

Badge Pills With Icons

Pill Badges as Notification

Use .badge-up to set pill badge to higher than other text. So that it can work with notifications also.

Icon Pill with Color Variations

4
5
6

Badge Pill Link

Use class .badge.badge-pill with <a> tag to make your badge a link

Primary

Badge Pill Dropup

wrap your .badge with .dropup to make your badge a dropup

Block Badge Pill

use .block with .badge-pill to display your badge as block level element

Block Badge Pill

Badge Pill Sizes

Use classes badge-{xl|lg|md|sm} to change size of a badge

Extra Large
Large
Medium
Small