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