##### Milestone 30%

##### Release 60%

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

# List

### List Style

#### Basic List

The most basic list group is simply an ordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

- 1. Active
- 2. Dapibus ac facilisis in
- 3. Morbi leo risus
- 4. Disabled
- 5. Vestibulum at eros

#### List Group Bordered Style

Add the `.list-group-bordered` to the wrap.

- 1. Active
- 2. Dapibus ac facilisis in
- 3. Morbi leo risus
- 4. Disabled
- 5. Vestibulum at eros

#### List Group With Divider line

Add the `.list-group-dividered` to the wrap.

- 1. Active
- 2. Dapibus ac facilisis in
- 3. Morbi leo risus
- 4. Disabled
- 5. Vestibulum at eros

#### Badges List

Add the badges component to any list group item and it will automatically be positioned on the right.

- 6 Cras justo odio
- Dapibus ac facilisis in
- 3 Morbi leo risus
- 10 Porta ac consectetur ac
- Vestibulum at eros
- Ibus ac facilis

#### Linked Items

Linkify list group items by using anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

#### Background

Add the color by `.bg-*` to the wrap. Also your will be add the class with `.bg-inherit`

Inbox Profile visits Call Messages Bookmarks

#### Contextual Classes

Use contextual classes to style list items, default or linked. Also includes `.active` state.

- Cras justo odio
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros

#### Custom Content

Add nearly any HTML within, even for linked list groups like the one below.

#### List 1

Donec id elit non mi porta gravida at eget metus.

#### List 2

Donec id elit non mi porta gravida at eget metus.

#### List 3

Donec id elit non mi porta gravida at eget metus.

#### With Gap

Add the `.list-group-gap` to the wrap for gap the items.

- Inbox
- Profile visits
- Call
- Messages
- Bookmarks

#### User List

A list item can contain an image with state.

- #### Herman Beck

  CEO

- #### Mary Adams

  CIO

- #### Caleb Richards

  CTO

- #### June Lane

  CVO

#### Media List

A list item can contain an image, user name and description.

- #### Edward Fletcher

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.

- #### Crystal Bates

  Porta ac consectetur ac. Porta ac consectetur ac.

- #### Nathan Watts

  Cbh libero, in gravida nulla. Nulla vel metus.

- #### Heather Harper

  Bbh libero, in gravida nulla. Nulla vel metus.