Badges
Badges are small circles, positioned either at top-right or bottom-right of the parent component.
Badge can be used to display numbers, online / offline status, depending on where they are used.
Simple Badges
For Simple Badges just use badge class and for colors use badge keyword followed by the
-variant.
They can primary, danger, warning, info, dark, light and success
They can primary, danger, warning, info, dark, light and success
primary
danger
warning
info
dark
Light
success
HTML CODE
Icon with Badge
Icons with Badges can be used to show online, offline and buzy.
HTML CODE
Avtars with Badges
For Avtars wth badges we will have to position avtar as relative and then add badge as
shown below
AB
2
AB
HTML CODE