Badges are used to style additional contents like showing count of unread email messages etc.
Add the .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 em units.
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.
Use the .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.
