Badges and Pills
The theme supports Bootstrap-style badges and pills with the CSS classes
badge and pill: badge pill
There are also the variations
badge-primary, badge-secondary, badge-success, badge-danger,
badge-warning, badge-info, badge-light, badge-dark, pill-primary,
pill-secondary, pill-success, pill-danger, pill-warning, pill-info,
pill-light and pill-dark:
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
To use these you put one of the CSS classes on a <span> like this:
<span class="badge-primary">My Badge</span>
You can also put one of the badge or pill classes on an <a> to create a badge
or pill with hover and focus states:
Badge
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Badges and pills can be used inside paragraphs (or list items, headings etc):
Heading Pill
This is a paragraph with an inline badge in it.
- First list item 23
- Second list item 16
- Third list item 32