Badge

Easlily create nicely looking badges to label and highlight your content.


Usage

To create a badge, just add the .badge class to a <div> or <span> element.

Usage

  • Class Description
    .badge Defines the base style of a Badge component.

    Modifiers

    Class Description
    .badge-notification Gives the badge a rounded border
    .badge-success A color modifier - applies the "success" color pallete to the badge.
    .badge-warning A color modifier - applies the "warning" color pallete to the badge.
    .badge-danger A color modifier - applies the "danger" color pallete to the badge.
  • Default Notification Success
  • <span class="badge">Default</span>
    <span class="badge badge-notification">Notification</span>
    <span class="badge badge-success">Success</span>

Modifiers

Notification

Add the .badge-notification class to indicate a notification, typically it is used with numbers.

Usage

  • 1 2 3 10 100
  • <span class="badge badge-notification">...</span>

Color Modifiers

Add the .badge-success, .badge-warning or .badge-danger class for additional colors.

Usage

  • Success Warning Danger
  • <span class="badge badge-success">...</span>
    <span class="badge badge-warning">...</span>
    <span class="badge badge-danger">...</span>