##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Badges & Labels

### Badges

#### Badges Default

Wrap one of the seven contextual classes ( e.g. `.badge-success` ) for basic `.badge` class. Choose from success, info, warning, etc.

1 2 3 4 5 6 7
11 12 13 14 15 16 17

#### Badges Radius

It’s normally used to display quantitative information. Building on any radius style badges by adding an optional `.badge-radius`.

1 2 3 4 5 6 7

#### Badges Sizes

Various badges sizes for common scenarios, from default size to large/small size, you can add additional class `.badge-lg` or `.badge-sm`.

Large Default Small

#### Badges In Button

Easily highlight new or unread items by adding a `<span class="badge">` 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`, `.up`, `.badge-warning` class in `<span>` mark

5 3 3 3

#### Status Badges

You can use this examples to create status indicator badges with `<div class="avatar-online”>` for profile images or similar elements.

#### Badges In Nav

Built-in styles are included for placing badges in active states in pill navigations. Highlight unread items by adding a `<span class="badge">` to tab div.

### Lables

#### Labels Default

Add any of the default mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger Dark

#### Labels Round

Round labels can used in taxonomies to provide an ad-hoc, user-generated scheme for classification. Add `.label-round` to change its shape.

Default Primary Success Info Warning Danger Dark

#### Labels Outline

The label can have outline style and different border color options. Add `.label-outline` to change its border style.

Default Primary Success Info Warning Danger Dark

#### Labels Sizes

Various label sizes for common scenarios, from default size to large/small size, you can add additional class `.label-lg` or `.label-sm`.

Large Default Small

#### Labels In Header

They show the information in combination with other visual heading elements by adding `<span class=”label label-primary”>`.

# h1. Bootstrap heading New

## h2. Heading New

### h3. Heading New

#### h4. Heading New

##### h5. Heading New

###### h6. Heading New