Badges

Please read the official Bootstrap documentation for a full list of options.

Primary Secondary Success Danger Warning Info Light Dark

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

Light Badges

Primary Secondary Success Danger Warning Info

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

Dismissible Badges

Primary Secondary Success Danger Warning Info

<span class="badge bg-primary-light badge-dismissible">Primary <button type="button" class="btn-close"></button></span>
<span class="badge bg-secondary-light badge-dismissible">Secondary <button type="button" class="btn-close"></button></span>
<span class="badge bg-success-light badge-dismissible">Success <button type="button" class="btn-close"></button></span>
<span class="badge bg-danger-light badge-dismissible">Danger <button type="button" class="btn-close"></button></span>
<span class="badge bg-warning-light badge-dismissible">Warning <button type="button" class="btn-close"></button></span>
<span class="badge bg-info-light badge-dismissible">Info <button type="button" class="btn-close"></button></span>