# Badges

Documentation and examples for badges, our small count and labeling component.

#### Examples

Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.

# Example heading New

    <h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
    <h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
    <h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
    <h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
    <h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
    <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

#### Background colors

Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default `.bg-light`, you’ll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.

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>

#### Badge with icon

You can use any font icon or SVG icons with badge.

Primary Secondary Success Danger Warning Info Light Dark

    <a href="#" class="badge text-bg-primary"><i class="fas fa-circle me-2 small fw-bold"></i>Primary</a>
    <a href="#" class="badge text-bg-secondary"><i class="fas fa-circle me-2 small fw-bold"></i>Secondary</a>
    <a href="#" class="badge text-bg-success"><i class="fas fa-circle me-2 small fw-bold"></i>Success</a>
    <a href="#" class="badge text-bg-danger"><i class="fas fa-circle me-2 small fw-bold"></i>Danger</a>
    <a href="#" class="badge text-bg-warning"><i class="fas fa-circle me-2 small fw-bold"></i>Warning</a>
    <a href="#" class="badge text-bg-info"><i class="fas fa-circle me-2 small fw-bold"></i>Info</a>
    <a href="#" class="badge text-bg-light"><i class="fas fa-circle me-2 small fw-bold"></i>Light</a>
    <a href="#" class="badge text-bg-dark"><i class="fas fa-circle me-2 small fw-bold"></i>Dark</a>

#### Background soft colors

Use our background soft utility classes to quickly change the appearance of a badge. Please note that when using background soft utility classes, you’ll likely need a text color utility like `.text-primary` for proper styling. This is because background utilities do not set anything but `background-color`.

Primary soft Secondary soft Success soft Danger soft Warning soft Info soft Dark soft

    <a href="#" class="badge bg-primary bg-opacity-10 text-primary">Primary soft</a>
    <a href="#" class="badge bg-secondary bg-opacity-10 text-secondary">Secondary soft</a>
    <a href="#" class="badge bg-success bg-opacity-10 text-success">Success soft</a>
    <a href="#" class="badge bg-danger bg-opacity-10 text-danger">Danger soft</a>
    <a href="#" class="badge bg-warning bg-opacity-10 text-warning">Warning soft</a>
    <a href="#" class="badge bg-info bg-opacity-10 text-info">Info soft</a>
    <a href="#" class="badge bg-dark bg-opacity-10 text-dark">Dark soft</a>

#### Background soft colors with icon

You can use any font icon or SVG icons with badge.

Primary soft Secondary soft Success soft Danger soft Warning soft Info soft Dark soft

    <a href="#" class="badge bg-primary bg-opacity-10 text-primary"><i class="fas fa-circle me-2 small fw-bold"></i>Primary soft</a>
    <a href="#" class="badge bg-secondary bg-opacity-10 text-secondary"><i class="fas fa-circle me-2 small fw-bold"></i>Secondary soft</a>
    <a href="#" class="badge bg-success bg-opacity-10 text-success"><i class="fas fa-circle me-2 small fw-bold"></i>Success soft</a>
    <a href="#" class="badge bg-danger bg-opacity-10 text-danger"><i class="fas fa-circle me-2 small fw-bold"></i>Danger soft</a>
    <a href="#" class="badge bg-warning bg-opacity-15 text-warning"><i class="fas fa-circle me-2 small fw-bold"></i>Warning soft</a>
    <a href="#" class="badge bg-info bg-opacity-10 text-info"><i class="fas fa-circle me-2 small fw-bold"></i>Info soft</a>

For more information refer official Bootstrap documentation for detailed technical explanation.