Badges
Badges are a small labelling component that can be used inline with other text or independently.
Default Badges
By default, badges scale to the size of their parent, and use background utilities to set their coloring. Below are some examples of badges being used with heading elements.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Colors
The background utilities used in this theme can be utilized to set the background color of a badge. For proper styling, a text utility may be needed for badges with lighter background colors.
Pill Badges
The rounded, pill effect for badges can be acheived by simply appending the
.badge
class with the
.rounded-pill
border radius utility class.
Integration
The badge component integrates well with the button component to add notifications or small badge alerts to a clickable zone.
Related Links
Bootstrap's badge component documentation