Badges & Labels
1.
Badges Variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Badge: Primary #1.01
To use, add .badge-primary to the base .badge class
Primary
Badge: Secondary #1.02
To use, add .badge-secondary to the base .badge class
Secondary
Badge: Success #1.03
To use, add .badge-success to the base .badge class
Success
Badge: Danger #1.04
To use, add .badge-danger to the base .badge class
Success
Badge: Warning #1.05
To use, add .badge-warning to the base .badge class
Warning
Badge: Info #1.06
To use, add .badge-info to the base .badge class
Info
Badge: Light #1.07
To use, add .badge-light to the base .badge class
Light
Badge: Dark #1.08
To use, add .badge-dark to the base .badge class
Dark
2.
Badges Options
Variations with links, dropdowns, and icons.
Badge: Pill #2.01
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Badge Pill
Badge: Without Rounded #2.02
To use, add .r-0 to the base .badge class.
Without Rounds
Badge: Dropdown #2.03
Example Badge with Dropdown.
Badge: Only Icon #2.04
Example below
Badge: Only Icon Rounded #2.04
To use, add .r-30 to the base .badge class
3.
Badges Border
Styles for badges as outline.
Badge: Primary #1.01
To use, add .badge-outline-primary to the base .badge class.
Primary
Badge: Secondary #1.02
To use, add .badge-outline-secondary to the base .badge class.
Secondary
Badge: Success #1.03
To use, add .badge-outline-success to the base .badge class.
Success
Badge: Danger #1.04
To use, add .badge-outline-danger to the base .badge class.
Success
Badge: Warning #1.05
To use, add .badge-outline-warning to the base .badge class.
Warning
Badge: Info #1.06
To use, add .badge-outline-info to the base .badge class
Info
Badge: Light #1.07
To use, add .badge-outline-light to the base .badge class.
Light
Badge: Dark #1.08
To use, add .badge-outline-dark to the base .badge class.
Dark