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 <a> tag.

Badge can also be used inside other elements, such as buttons.

1 2 3 4 5 6 7 8


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 .pmd-badge .pmd-badge-overlap.



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 .pmd-badge-* class.



Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.

Classes Effect Remark
.pmd-badge Add this class to create notification badge. Required
.pmd-badge-overlap Add this class to create notification badge which overlaps the element. Optional
.pmd-badge-* Add this class to create contextual notification badges. Optional