Badges are used to style additional contents like showing count of unread email messages etc.
.badge class along with the additional contextual classes(like badge-secondary).
Badges scale to match the size of the immediate parent element by using relative font sizing and
Badges can also be used as part of links or buttons to provide a counter.
To support assistive technologies – such as screen readers you can give additional text hidden with the .sr-only class.
Depending on usage you can give additional related text like "unread messages"(visually hidden piece) at the end of a sentence, link, or button to make it understandable to the non-visual users.
<button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button>
Add any of the below contextual classes to change the appearance of a badge.
.badge-pill modifier class to make badges more rounded.
Using the contextual
.badge-* classes on an
<a> element will provide badges with hover and focus states.