Kenhuang Academy
  • English

      • Bootstrap Badges

      Overview

      Bootstrap badges are small count and labeling components used to add additional information to UI elements.

      Basic Badges

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

      Button Badges

      Use badges as part of links or buttons to provide counters:

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