Add any of the default mentioned modifier classes to change the appearance of a badge.
Round badges can used in taxonomies to provide an ad-hoc, user-generated
scheme for classification. Add
change its shape.
The badge can have outline style and different border color options.
.badge-outline to change its border style.
Various badge sizes for common scenarios, from default size to
large/small size, you can add additional class
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
Wrap one of the seven contextual classes ( e.g.
.badge-success ) for basic
Choose from success, info, warning, etc.
Various badge-pills sizes for common scenarios, from default
size to large/small size, you can add additional class
badge-pills In Button
Easily highlight new or unread items by adding a
<span class="badge badge-pill"> to button div.
They’re commonly found in email cilents like Mail.app or on mobile
apps for push notifications. Highligh unread items by adding
.badge-warning class in
You can use this examples to create status indicator badge-pills
<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
<span class="badge badge-pill"> to tab