Badges Examples

Basic

Default .badges with color

Default Primary Success Info Warning Danger

Pill

.badge-pill applies to .badge.

Default Primary Success 6 8 +9

More colors

.badge-* which * is one of the following color names.

Purple Pink Cyan Yellow brown Dark Grey Secondary

Sizing

Available sizes are sm, lg, xl

Extra large Large Medium Small

Dot badges

.badge-dot applies to .badge.





Ring badges

.badge-ring applies to .badge.






.fill can applies to .badge-ring