Badges

Documentation and examples for badges, our small count and labeling component.

Headings

Example heading New

Example heading New

Example heading New

Example heading New

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

Buttons

<!--Button-->
<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Position

<!--Buttons-->
  <button type="button" class="btn btn-primary position-relative">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      99+
      <span class="visually-hidden">unread messages</span>
    </span>
  </button>

You can also replace the .badge class with a few more utilities without a count for a more generic indicator.

Position

<!--Button-->
  <button type="button" class="btn btn-primary position-relative">
    Profile
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
      <span class="visually-hidden">New alerts</span>
    </span>
  </button>

Background colors

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

Pill badges

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