Badges
Documentation and examples for badges, Bootstrap’s small count and labeling component.
Example
Badges scale to match the size of the immediate parent element by using relative font sizing and
@em units. As of v5, badges no longer have focus or hover styles for links.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<title>Example Heading <ph outputclass="bg-secondary">New</ph></title>
<p>Example Text <ph outputclass="bg-secondary">New</ph></p>Background colors
Set a background-color with contrasting foreground color with Bootstrap’s text-bg-{color} helpers. Previously it was required to manually pair your choice of @outputclass text-{color} and bg-{color} utilities for styling, which you still may use if you prefer.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<ph outputclass="text-bg-primary">Primary</ph>
<ph outputclass="text-bg-secondary">Secondary</ph>
<ph outputclass="text-bg-success">Success</ph>
<ph outputclass="text-bg-danger">Danger</ph>
<ph outputclass="text-bg-warning">Warning</ph>
<ph outputclass="text-bg-info">Info</ph>
<ph outputclass="text-bg-light">Light</ph>
<ph outputclass="text-bg-dark">Dark</ph>