Skip to content
This repository has been archived by the owner on Apr 27, 2024. It is now read-only.

Latest commit

 

History

History
68 lines (57 loc) · 2.43 KB

2019-09-13-badges-and-pills.md

File metadata and controls

68 lines (57 loc) · 2.43 KB
Raw

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