# List Group

## Latest Notifications

New Order

Selena has placed an new order

10 AM
New Enquiry

Phileine has placed an new order

9 AM
Support Ticket

Emma has placed an new order

10 AM
New order

Ryan has placed an new order

10 AM
Comapny Meetup

Phileine has placed an new order

10 AM
Support Ticket

Emma has placed an new order

10 AM
New Enquiry

Phileine has placed an new order

9 AM

## To Do List

Add task
Finish Dashboard UI Kit update Finished
Create new prototype for the landing page Today
Add new Google Analytics code to all main files Yesterday
Update parallax scroll on team page Dec 15, 2018
Update parallax scroll on team page Dec 15, 2018
Create online customer list book Dec 15, 2018
Lorem ipsum dolor sit amet, consectetur. Dec 15, 2018
Update parallax scroll on team page Dec 15, 2018

## Basic List

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Read bootstrap documentaion for more details.

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

## Links and Buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. Read bootstrap documentaion for more details.

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

## Contextual Classes List

Use contextual classes to style list items with a stateful background and color. Read bootstrap documentaion for more details.

- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item

## With Badges

Add badges to any list group item to show unread counts, activity, and more. Read bootstrap documentaion for more details.

- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 24
- Porta ac consectetur ac 6
- Vestibulum at eros 6

## Desable List

Add `.disabled` to a `.list-group-item` to make it appear disabled. Read bootstrap documentaion for more details.

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

## Custom Content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. Read bootstrap documentaion for more details.

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.