Bootstrap 4 badges classes are used to add additional information to the content such as important heading, warning messages, notification counter, etc. To create a badge, add the .badge class within the element.
Contextual Badges:
By using contextual classes, you can change the color of bootstrap 4 badges. When you are using bootstrap’s .bg-light then you also use text color utility like .text-dark for proper styling. This is because background utilities do not set anything except background-color.
Pill badges:
You can create the pill shape badges means badges with rounded corners using the class .badge-pill as shown in the below example.
Links:
By using the contextual .badge-* classes on an <a> element provide actionable badges with hover and focus states.
Badge inside an Element:
You can create badges inside an element as shown in below example: