Badge - Documentation | Front - Multipurpose Responsive Template

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Preview
HTML

Primary Secondary Success Danger Warning Info Light Dark

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

Soft

Use .badge-soft-* classes.

Preview
HTML

Primary Primary Light Secondary Success Danger Warning Info Light Dark

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

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Preview
HTML

Primary Secondary Success Danger Warning Info Light Dark

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

More examples

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Preview
HTML

Example heading New

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

Badges can be used as part of links or buttons to provide a counter.

Preview
HTML

              
                <button type="button" class="btn btn-primary">
                  Notifications <span class="badge bg-light text-dark ms-1">2</span>
                </button>