@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Badges

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

## Background colors

Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default `.bg-light`, you’ll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.

Primary Secondary Success Danger Warning Info Light Dark

      <!-- Primary badge -->
      <span class="badge bg-primary">Primary</span>

      <!-- Secondary badge -->
      <span class="badge bg-secondary">Secondary</span>

      <!-- Success badge -->
      <span class="badge bg-success">Success</span>

      <!-- Danger badge -->
      <span class="badge bg-danger">Danger</span>

      <!-- Warning badge -->
      <span class="badge bg-warning text-dark">Warning</span>

      <!-- Info badge -->
      <span class="badge bg-info text-dark">Info</span>

      <!-- Light badge -->
      <span class="badge bg-light text-dark">Light</span>

      <!-- Dark badge -->
      <span class="badge bg-dark">Dark</span>

## Pill badges

Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.

Primary Secondary Success Danger Warning Info Light Dark

      <!-- Primary badge -->
      <span class="badge rounded-pill bg-primary">Primary</span>

      <!-- Secondary badge -->
      <span class="badge rounded-pill bg-secondary">Secondary</span>

      <!-- Success badge -->
      <span class="badge rounded-pill bg-success">Success</span>

      <!-- Danger badge -->
      <span class="badge rounded-pill bg-danger">Danger</span>

      <!-- Warning badge -->
      <span class="badge rounded-pill bg-warning text-dark">Warning</span>

      <!-- Info badge -->
      <span class="badge rounded-pill bg-info text-dark">Info</span>

      <!-- Light badge -->
      <span class="badge rounded-pill bg-light text-dark">Light</span>

      <!-- Dark badge -->
      <span class="badge rounded-pill bg-dark">Dark</span>

## Buttons

Badges can be used as part of links or buttons to provide a counter.

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

## Positioned

Use utilities to modify a `.badge` and position it in the corner of a link or button.

    <!-- Positioned -->
     <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.

    <!-- Positioned -->
     <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>

## Dot

Use `.badge-dot` classes on an `<a>` element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark

    <!-- Primary badge -->
       <span class="me-2"><span class="badge bg-dot bg-primary me-1"></span>
       <span>Primary</span></span>

       <!-- Secondary badge -->
       <span class="me-2"><span class="badge bg-dot bg-secondary me-1"></span><span
           class="text-secondary">Secondary</span></span>

       <!-- Success badge -->
       <span class="me-2"><span class="badge bg-dot bg-success me-1"></span><span
           class="text-success">Success</span></span>

        <!-- Danger badge -->
       <span class="me-2"><span class="badge bg-dot bg-danger me-1"></span><span
           class="text-danger">Danger</span></span>

        <!-- Warning badge -->
       <span class="me-2"><span class="badge bg-dot bg-warning me-1"></span><span
           class="text-warning">Warning</span></span>

       <!-- Info badge -->
       <span class="me-2"><span class="badge bg-dot bg-info me-1"></span><span
           class="text-info">Info</span></span>

       <!-- Light badge -->
       <span class="me-2"><span class="badge bg-dot bg-light me-1"></span><span
           class="text-light">Light</span></span>

       <!-- Dark badge -->
       <span class="me-2"><span class="badge bg-dot bg-dark me-1"></span><span
        class="text-dark">Dark</span></span>

## Simple Badge

Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.

# Example heading New

    <!-- Headings -->
    <h1>Example heading <span class="badge bg-secondary">New</span></h1>
    <h2>Example heading <span class="badge bg-secondary">New</span></h2>
    <h2>Example heading <span class="badge bg-secondary">New</span></h2>
    <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>

@@include("../partials/scripts.html")