...

Badges

A small count and labeling component.

Bootstrap documentation

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Soft

Skola only

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

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

Sizing

Skola only

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

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

Circle

Skola only

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

<span class="badge badge-lg badge-rounded-circle badge-primary">
  <i class="fas fa-check"></i>
</span>

<span class="badge badge-rounded-circle badge-secondary-soft">
  <i class="fas fa-check"></i>
</span>

Float

Skola only

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