Bootstrap Default Badges
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.
Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
Use .border .border-* with .text-* and .bg-white utility classes to give badges a outlined style.
Use the btn btn-* utility class make badges act like anchors / buttons with focus and hover styles.
Themed Badges
Badges
| Type | Badge | Badge Pill | Outline |
|---|---|---|---|
| Default | 126 | 26 | 1 |
| KonKon | 214 | 14 | 2 |
| Primary | 38 | 8 | 3 |
| Info | 38 | 8 | 3 |
| Success | 42 | 2 | 4 |
| Warning | 57 | 7 | 5 |
| Danger | 35 | 3 | 5 |
| Secondary | 35 | 3 | 5 |
| Light | 35 | 3 | 5 |
| Dark | 35 | 3 | 5 |
Badges
Bootstrap badges in headings
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Hover and focus styles for a.badge and button.badge were removed from Bootstrap starting v5.0.0-alpha1.
Instead, we are using .badge-link .btn-* and .badge-link .btn-outline-* as an alternative by taking advantage of the css variables. Do this without using the .btn class. Button badges will need to use .badge-btn or .badge-btn-outline to work properly.