The label component that is part of Bootstrap is expanded with several variants and some additional classes.

Default label

Simply use class label-default

Business
Primary label

Simply use class label-primary

Communication
Success label

Simply use class label-success

Education
Info label

Simply use class label-info

Entertainment
Warning label

Simply use class label-warning

Finance
Danger label

Simply use class label-danger

Health & Fitness
Danger outline label

Simply use class label-outline-danger

Health & Fitness
Warning outline label

Simply use class label-outline-warning

Finance
Info outline label

Simply use class label-outline-info

Entertainment
Success outline label

Simply use class label-outline-success

Education
Primary outline label

Simply use class label-outline-primary

Communication
Default outline label

Simply use class label-outline-default

Business
Pill label as a link

Labels with hover state, but only for links

Business mails Business mails Answer pending Answer pending
Font size, paddings, colors, can be changed through variables.

Labels with others

The following examples are some cases but not the only ones on how this component can be composed with others.
Label with arrows as a link

Labels with hover state and arrows of all sizes.

small default large large default small
Label as a tag

A label can appear as a tag

Tags Bootstrap Angular JS Laravel
Removable labels

Label with icon and remove button

Public
Family
Friends
Label with arrow

Simply use class arrow-left

196k likes
Label with arrow

Simply use class arrow-left

Are you sure you want to delete?
Label with arrow

Simply use class arrow-right

Teddy Wilson has been deleted.
Label with arrow

Simply use class arrow-right

1,691 views

Bootstrap 4 is coming!

Support the project you love. Become a Member Today

Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more