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

#### 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

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color