# Badge

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

Bootstrap Badge documentation

## Contextual variations

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

Primary Secondary Success Danger Warning Info Light Dark Icon Right Icon left

                          <span class="badge badge-primary mb-1">Primary</span>
                          <span class="badge badge-secondary mb-1">Secondary</span>
                          <span class="badge badge-success mb-1">Success</span>
                          <span class="badge badge-danger mb-1">Danger</span>
                          <span class="badge badge-warning mb-1">Warning</span>
                          <span class="badge badge-info mb-1">Info</span>
                          <span class="badge badge-light mb-1">Light</span>
                          <span class="badge badge-dark mb-1">Dark</span>
                          <span class="badge badge-primary mb-1">Icon Right<img src="assets/img/svg/check-light.svg" alt="Right" class="ms-1"></span>
                          <span class="badge badge-primary mb-1"><img src="assets/img/svg/check-light.svg" alt="Right" class="me-1">Icon left</span>

## Size

Use the below mentioned modifier classes to change the appearance of a badge `.badge-sm`.

Primary Secondary Success Danger Warning Info Light Dark Icon Right Icon left

                          <span class="badge badge-sm badge-primary mb-1">Primary</span>
                          <span class="badge badge-sm badge-secondary mb-1">Secondary</span>
                          <span class="badge badge-sm badge-success mb-1">Success</span>
                          <span class="badge badge-sm badge-danger mb-1">Danger</span>
                          <span class="badge badge-sm badge-warning mb-1">Warning</span>
                          <span class="badge badge-sm badge-info mb-1">Info</span>
                          <span class="badge badge-sm badge-light mb-1">Light</span>
                          <span class="badge badge-sm badge-dark mb-1">Dark</span>
                          <span class="badge badge-sm badge-primary mb-1">Icon Right<img src="assets/img/svg/check-light.svg" alt="Right" class="ms-1"></span>
                          <span class="badge badge-sm badge-primary mb-1"><img src="assets/img/svg/check-light.svg" alt="Right" class="me-1">Icon left</span>

## Pill badges

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

Primary Secondary Success Danger Warning Info Light Dark

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

## More examples

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

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
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.

                          <button type="button" class="btn btn-primary">
                            Notifications <span class="badge badge-light">4</span>
                          </button>