Badges Examples


Default .badges with color

Default Primary Success Info Warning Danger


.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


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