Badge
Small count and labeling component.
Basic example
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Positioned example
Use utilities to modify a .badge and position it in the corner of a link or button.
Pill examples
Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Faded examples Custom
Use the .bg-${color}-faded class for a faded badge variant
Primary
Secondary
Success
Danger
Warning
Info
Dark
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Notifications
John Jackson
Just sent over regional sales. If you can let me know by the end...
5 mins ago
Peter Smith
Hi Rob, can we setup a meeting for tomorrow around 2pm...
30 mins ago
Helen Lewis
Need to arrange for this year's Office lisences. Have to add two team licenses...
43 mins ago