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.
Activity
-
John Doe
5m agoYear End Report 24KB -
Sally Field
1h ago -
Mark Robinson
2h ago -
Jeffrey Way
6h ago
Company Meetup
+ 12 others
Patrick Johnson · 2 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
You · 5 mins ago
Maecenas aliquet eu felis vel.
Patrick Johnson · 25 mins ago
Cras sit amet gravida augue.