Badges
Badges Default
Add any of the default mentioned modifier classes to change the appearance of a badge.
badges Round
Round badges can used in taxonomies to provide an ad-hoc, user-generated scheme for classification. Add .badge-round to change its shape.
badges Outline
The badge can have outline style and different border color options. Add .badge-outline to change its border style.
badges Sizes
Various badge sizes for common scenarios, from default size to large/small size, you can add additional class .badge-lg or .badge-sm.
badges In Header
They show the information in combination with other visual heading elements by adding <span class=”badge badge-primary”>.
h1. Bootstrap heading New
h2. Heading New
h3. Heading New
h4. Heading New
h5. Heading New
h6. Heading New
Badge-pills
badge-pills Default
Wrap one of the seven contextual classes ( e.g. .badge-success ) for basic .badge .badge-pill class. Choose from success, info, warning, etc.
badge-pills Sizes
Various badge-pills sizes for common scenarios, from default size to large/small size, you can add additional class .badge-lg or .badge-sm.
badge-pills In Button
Easily highlight new or unread items by adding a <span class="badge badge-pill"> 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, .badge-pill, .up, .badge-warning class in <span> mark
Status badge-pills
You can use this examples to create status indicator badge-pills with <div class="avatar-online”> for profile images or similar elements.
badge-pills In Nav
Built-in styles are included for placing badge-pills in active states in pill navigations. Highlight unread items by adding a <span class="badge badge-pill"> to tab div.