Badges

A small count and labeling component.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Dark Light
Primary Secondary Success Danger Warning Info Dark Light

Subtle

Theme only

Creates a subtle variant of a corresponding contextual badge variation. These can be used exactly like Theme's core badges, including modifying classes like .rounded-pill, as an <a> itself, or inside of <button> or <a> elements.

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

Sizing

Create badges of a bigger size with a .badge-lg modifier.

Large Standard 
<span class="badge badge-lg bg-primary">
  <span class="h6 text-uppercase fw-bold">Large</span>
</span>

Circle

Turn any badge into a circle with a .badge-rounded-cirle modifier. 

<span class="badge badge-lg badge-rounded-circle bg-primary">
  <i class="fe fe-check"></i>
</span>

<span class="badge badge-rounded-circle bg-secondary-subtle">
  <i class="fe fe-check"></i>
</span>

Float

Position any badge absolutely inside or outside an element with .badge-float-inside and .badge-float-outside modifiers.

Inside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?

Outside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur? 

<!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge bg-primary rounded-pill badge-float badge-float-inside">
      Inside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>

<!-- Card -->
<div class="card">
  <div class="card-body">

    <!-- Badge -->
    <span class="badge bg-primary rounded-pill badge-float badge-float-outside">
      Outside
    </span>
    
    <!-- Text -->
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?
    </p>

  </div>
</div>
Jump to