Badges
Badges Default
Wrap one of the seven contextual classes ( e.g. .badge-success ) for basic .badge class. Choose from success, info,
warning, etc.
Badges Radius
It’s normally used to display quantitative information. Building
on any radius style badges by adding an optional .badge-radius.
Badges Sizes
Various badges sizes for common scenarios, from default size to
large/small size, you can add additional class .badge-lg or .badge-sm.
Badges In Button
Easily highlight new or unread items by adding a <span class="badge"> to button div.
Absolute Positioning
They’re commonly found in email cilents like Mail.app or on mobile
apps for push notifications. Highligh unread items by adding
.badge, .up, .badge-warning class in <span> mark
Status Badges
You can use this examples to create status indicator badges with
<div class="avatar-online”> for profile images
or similar elements.
Badges In Nav
Built-in styles are included for placing badges in active states
in pill navigations. Highlight unread items by adding a <span class="badge"> to tab div.
Lables
Labels Default
Add any of the default mentioned modifier classes to change the appearance of a label.
Labels Round
Round labels can used in taxonomies to provide an ad-hoc, user-generated
scheme for classification. Add .label-round to change
its shape.
Labels Outline
The label can have outline style and different border color options.
Add .label-outline to change its border style.
Labels Sizes
Various label sizes for common scenarios, from default size to
large/small size, you can add additional class .label-lg or .label-sm.
Labels In Header
They show the information in combination with other visual heading
elements by adding <span class=”label label-primary”>.