Labels

Labels are generally used to provide emphasis on a characteristic of an object, e.g., the category of a document. They are generally actionless.

Avoid mixing standard and subtle labels.

Standard

Use standard labels by default unless there are going to be many on the screen at once.

Standard labels

Primary Secondary Success Danger Warning Info Light Dark

Example HTML usage:

<!--Standard badges-->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Pill labels

Primary Secondary Success Danger Warning Info Light Dark

Example HTML usage:

<!--Pill badges-->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Link labels

Primary Secondary Success Danger Warning Info Light Dark

Example HTML usage:

<!--Links badges-->
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Subtle labels

Primary Secondary Success Danger Warning Info Info Dark

Example HTML usage:

<!--Standard badges-->
<span class="badge badge-subtle-primary">Primary</span>
<span class="badge badge-subtle-secondary">Secondary</span>
<span class="badge badge-subtle-success">Success</span>
<span class="badge badge-subtle-danger">Danger</span>
<span class="badge badge-subtle-warning">Warning</span>
<span class="badge badge-subtle-info">Info</span>
<span class="badge badge-subtle-light">Info</span>
<span class="badge badge-subtle-dark">Dark</span>

Badges

Badges are generally used for emphasizing a numerical characteristic of an object, e.g., the number of unread items in a folder.

5 200 0

Example HTML usage:

<span class="badge badge-primary">5</span>
<span class="badge badge-secondary">200</span>
<span class="badge badge-danger">0</span>

Inbox 1,932
Outbox 2
Spam

Example HTML usage:

<ul class="list-group">
  <li class="list-group-item">
    Inbox <span class="badge badge-secondary float-right">1,932</span>
  </li>
  <li class="list-group-item active">
    Outbox <span class="badge float-right">2</span>
  </li>
  <li class="list-group-item">Spam</li>
</ul>

Example HTML usage:

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
  <span class="sr-only">unread messages</span>
</button>

Example heading New

Example HTML usage:

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>