MENU


Badge

A badge represents a small colored label, typically mixed into some other content.

A badge can be used as part of links or buttons to provide a counter.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

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

</body><html>
You can color the badges differently.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <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">Info</span>
   <span class="badge bg-light text-dark">Light</span>
   <span class="badge bg-dark">Dark</span>

</body><html>