Badge - Documentation | Front - Admin & Dashboard 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 badge-primary">Primary</span>
                      <span class="badge badge-secondary">Secondary</span>
                      <span class="badge badge-success">Success</span>
                      <span class="badge badge-danger">Danger</span>
                      <span class="badge badge-warning">Warning</span>
                      <span class="badge badge-info">Info</span>
                      <span class="badge badge-light">Light</span>
                      <span class="badge badge-dark">Dark</span>

Soft

Use .badge-soft-* classes.

Preview
HTML

Primary Secondary Success Danger Warning Info Light Dark

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

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Preview
HTML

Primary Secondary Success Danger Warning Info Light Dark

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

Preview
HTML

Primary Secondary Success Danger Warning Info Light Dark

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

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 badge-secondary">New</span></div>
                      <div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
                      <div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
                      <div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
                      <div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
                      <div class="h6">Example heading <span class="badge badge-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 badge-light badge-pill ml-1">2</span>
                      </button>