Contextual

Use the .badge class, followed by.badge-pill with .badge-{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 .badge-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.badge-pill with <a> tag to make your badge a link.

Primary

Block Badge Pill

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

Block Badge Pill