Bootstrap 4 Badge with Material Design UI
Badge is a new UI element. It provides users with a visual clue to help them discover additional relevant content. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
Bootstrap 4 Badge
Easily highlight new or unread items by adding a
<span class="badge"> to links, Bootstrap 4 navs, and more. Create rounded actionable badges by using
.badge-pill class in the
Badge can also be used inside other elements, such as buttons.
Icon with Notification Badge
Notification Badge also known as Dots notifies the users that there is a pending notification or activity that they have not yet acted upon. Create the notification badge overlapping on an icon using
Notification Badge on Text
You can also create a notification badge which overlaps on a text label.
Contextual Notification Badges
You can also change the color of the bagde using
The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.
||Add this class to create notification badge.||Required|
||Add this class to create notification badge which overlaps the element.||Optional|
||Add this class to create contextual notification badges.||Optional|