Badge
This Here Is A Badge
Badge
Badges are used to add additional information to any content.
Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any).
Default
Default badges with different backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill Badges
Pill badges with different backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Numbered
Numbered badges with different backgrounds.
1
2
3
4
5
6
7
8
Numbered Pill Badges
Numbered pill badges with different backgrounds.
1
2
3
4
5
6
7
8
Outline
Outline badges with different backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Pill Badges
Outline pill badges with different backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Light
Badges with light backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
Light Pills
Badges with light backgrounds.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
Bullet Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark