### Badges

##### Default Badges

Use the badge class to show a default badge.

Primary Secondary Success Danger Warning Info Light Dark

##### Rounded Badges

Use the `.rounded-pill` to create a soft badge more rounded.

Primary Secondary Success Danger Warning Info Light Dark

##### Soft Badges

Use the `badge-soft-` class to create a softer badge.

Primary Secondary Success Danger Warning Info Light Dark

##### Soft Rounded Badges

Use the `rounded-pill badge-soft-` to create a soft badge more rounded

Primary Secondary Success Danger Warning Info Light Dark

##### Outline Badges

Use the `badge-outline-` to create a badge with the outline.

Primary Secondary Success Danger Warning Info Light Dark

##### Outline Rounded Badges

Use the `rounded-pill badge-outline-` class to create a outline pill badge.

Primary Secondary Success Danger Warning Info Light Dark

##### Soft Border Badges

Use the `badge-border` and `badge-soft-` with below mentioned modifier classes to make badges with border & soft backgorund.

Primary Secondary Success Danger Warning Info Light Dark

##### Soft Border Rounded Badges

Use the `badge-border` and `badge-soft-` with below mentioned modifier classes to make badges with border & soft backgorund.

Primary Secondary Success Danger Warning Info Light Dark

##### Gradient Badges

Primary Secondary Success Danger Warning Info orange purple

##### Gradient Pill Badges

Primary Secondary Success Danger Warning Info orange purple

##### Badge Usage

##### Buttons With Badges

##### Headings

# Example heading New