Badges, Labels and Stickers

Badges

Badge Pill

Badges as Anchor Tag

Badge with Links Inside

Badge with Text Truncate

Badge Sizes

Labels

As Anchor Tag

Label Inverse

Add class label-inverse-primary, label-inverse-secondary, label-inverse-success, label-inverse-info, label-inverse-warning, label-inverse-danger, label-inverse-light, or label-inverse-dark to label for an inverted style.

As Anchor Tag

Label Dismissible

Normal Label Label Lg

Normal Label Normal Label Normal Label Normal Label Normal Label Normal Label

Normal Label

Normal Label

Label with Text Truncate

An Interactive Label

Add the tabindex="0" attribute to the .label element to create an interactive label with multiple controls inside. The inner controls should have the attribute tabindex="-1" to remove them from the tab order. The inner controls can be placed back in the tab order by changing back to tabindex="0" with javascript.

Label Secondary

Label Primary

Interactive Label Examples

See Form Elements (Input Groups) for more details.

Tags

winterfell Stark

Type a comma or press return to enter a tag.

Select

Tags using Content Editable

wall wallpaper wonderwall winterfell kings landing some value

Type a comma or press return to enter a tag.

Select

Label Sizes

Use label-lg to make the label larger or use the mixin label-size($sassMap) to create a custom sized label.

Sticker

Stickers are monospaced badges/labels.

Positional Stickers

Place them anywhere relative to your container using positional sticker classes sticker-top-left, sticker-bottom-left, sticker-top-right, and sticker-bottom-right.

Sticker Sizes

Stickers come in 4 sizes sm, normal, lg, and xl . Create your own custom size with the sticker-size mixin.

Sticker Overlay

Overlay content over stickers by nesting sticker-overlay inside sticker.

JB

TT

SP

BC

Sticker Outside

Add class sticker-outside in conjunction with sticker positions to position the sticker on the outside corners.

Sticker User Icon