Badges are small labeling components which can be used for notification counters and other indicators.

Examples #

Badges can be created using the .badge class. They scale to match the size of the immediate parent element by using relative font sizing and em units. Therefore, they can be used inside elements and components such as headings and buttons.

However, the most common use case for badges is using utility classes (particularly positioning utilities) to position them in ways where they best serve as labels and indicators. This is shown in the examples below.

<button type="button" class="btn btn-secondary position-relative">
  <i class="fa-light fa-inbox me-1"></i> Inbox
  <span class="badge position-absolute top-0 start-100 translate-middle text-bg-primary">1</span>

<button type="button" class="btn btn-secondary position-relative ms-2">
  <i class="fa-light fa-user me-1"></i> Profile
  <span class="badge position-absolute top-0 start-100 translate-middle rounded-pill bg-danger p-1">
    <span class="visually-hidden">New alerts</span>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).

Background colors #

The color and background-color of badges can be easily changed by using the color and background helpers. You can also use utilities (.text-{color} and .bg-{color}) to get the look you want, although this is not recommended because of anti-aliasing.

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>

Pill badges #

You can also create rounded, pill-like badges using the .rounded-pill class.

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
Up next

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.