Badges
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Primary Badge
Add contextual class .badge-primary
1
10
100
Secondary Badge
Add contextual class .badge-secondary
1
10
100
Success Badge
Add contextual class .badge-success
1
10
100
Info Badge
Add contextual class .badge-info
1
10
100
Danger Badge
Add contextual class .badge-danger
1
10
100
Warning Badge
Add contextual class .badge-warning
1
10
100
Light Badge
Add contextual class .badge-light
1
10
100
Dark Badge
Add contextual class .badge-dark
1
10
100
Pill Badges
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Badges Outline
Use the .badge-outline modifier class to make badges outline.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Badges In Button
Badges can be used as part of links or buttons to provide a counter.
Badges In Header
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.