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

All rights reserved | © 2021

Template created by PixelRocket

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 ago
    Submitted quarterly marketing report for review.
    Year End Report 24KB
  • Sally Field

    1h ago
    Marked project status as completed.
  • Mark Robinson

    2h ago
    Created 2 new products in Mens Shoes
  • Jeffrey Way

    6h ago
    Set user status as 'offline'
View All Activity
Company Meetup
HTML Bootstrap Admin Template by Pixel Rocket
Patrick Johnson · 2 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
You · 5 mins ago
Maecenas aliquet eu felis vel.
HTML Bootstrap Admin Template by Pixel Rocket
HTML Bootstrap Admin Template by Pixel Rocket
Patrick Johnson · 25 mins ago
Cras sit amet gravida augue.