Labels & Badges

Labels

Labels

Add the following classes to the base .label class to create styled labels.

Label Add class .label-default
Label Add class .label-primary
Label Add class .label-success
Label Add class .label-info
Label Add class .label-warning
Label Add class .label-danger
Label Add class .label-inverse

Rounded labels

Add class .rounded to the base class .label.

Label Label Label Label Label Label Label

Circle labels

Add class .circle to the base class .label.

Label Label Label Label Label Label Label

Hexagon labels

Add the following classes to the base .label.label-hexagon classes to create styled hexagon labels.

1 Add class .label-hexagon-default
2 Add class .label-hexagon-primary
3 Add class .label-hexagon-success
4 Add class .label-hexagon-info
5 Add class .label-hexagon-warning
6 Add class .label-hexagon-danger
7 Add class .label-hexagon-inverse

Dropdowns

Outline Labels

Outline labels

Add the following classes to the base class .label to create outline labels.

Label Add class .label-default-outline
Label Add class .label-primary-outline
Label Add class .label-success-outline
Label Add class .label-info-outline
Label Add class .label-warning-outline
Label Add class .label-danger-outline
Label Add class .label-inverse-outline

Outline rounded labels

Add class .rounded to the base class .label.

Label Label Label Label Label Label Label

Outline circle labels

Add class .circle to the base class .label.

Label Label Label Label Label Label Label

Outline hexagon labels

Add the following classes to the base .label.label-hexagon classes to create outline hexagon labels.

1 Add class .label-hexagon-default-outline
2 Add class .label-hexagon-primary-outline
3 Add class .label-hexagon-success-outline
4 Add class .label-hexagon-info-outline
5 Add class .label-hexagon-warning-outline
6 Add class .label-hexagon-danger-outline
7 Add class .label-hexagon-inverse-outline

Dropdowns

Badges

Badges

Badges in pill navigations

Badges

Badges inside a list item

  • 3 Messages
  • 7 Inbox
  • 12 Chat
  • 17 Notifications
  • 22 Alerts