Your email

Don't have an account yet? Sign up.

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

Landkit only

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap'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 Light Dark
<span class="badge bg-primary-soft">Primary</span>
<span class="badge bg-secondary-soft">Secondary</span>
<span class="badge bg-success-soft">Success</span>
<span class="badge bg-info-soft">Info</span>
<span class="badge bg-warning-soft">Warning</span>
<span class="badge bg-danger-soft">Danger</span>
<span class="badge bg-light-soft">Light</span>
<span class="badge bg-dark-soft">Dark</span>

Sizing

Landkit only

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

Landkit only

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-soft">
  <i class="fe fe-check"></i>
</span>

Float

Landkit 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 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
  • Soft
  • Sizing
    • Page generated in 0.35 ms (2,883 Hz)
    ©2025 Staticflux Inc. All rights reserved.