Loading. Please Wait.

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Default Examples

To already existing class .badge add an additional class .badge-success

examples

1 2 3 4 5
Outlines Examples

To already existing class .badge add an additional class .badge-outline

examples

1 2 3 4 5
Badges Inside Button & Link

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

examples

Inbox 42
Adapts to Active Nav States

Built-in styles are included for placing badges in active states in pill navigations.

examples

Badges with Icons

To already existing class .badge add an additional class .badge-with-icon

examples

1 2 3 4 5
Badges Status with Avatar

For avatar control class is .avatar-status & position .avatar-top or .avatar-bottom.

examples

Avatar
Avatar
Avatar
Avatar

Labels

Available Colors Variations

To already existing class .label add an additional class .label-success

examples

Default Primary Success Info Warning Danger
Outlines Examples

To already existing class .label add an additional class .label-outline

examples

Default Primary Success Info Warning Danger
Labels Pills

To already existing class .label add an additional class .label-pill

examples

Default Primary Success Info Warning Danger

Headers with Label

If you add to the .h1 to .h6 then you get the result as below. Just add the <span class=”label label-outline label-primary”>

.h1 Example Heading New

.h2 Example Heading New

.h3 Example Heading New

.h4 Example Heading New

.h5 Example Heading New
.h6 Example Heading New

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar