Contextual

Use the .badge class, followed by.rounded-pill with .bg-{color}class within element to create contextual pill badge.

Primary Secondary Success Danger Warning Info Dark

Glow Badges

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

Primary Secondary Success Danger Warning Info Dark

Light Badges

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

Primary Secondary Success Danger Warning Info Dark

Pill Badges as Notification

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

4
5
6

Badge Pill Link

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

Primary

Block Badge Pill

Use .d-block with .rounded-pill to display your badge as block level element.

Block Badge Pill