##### Mannat Themes

We Design and Develop Clean and High Quality Web Applications

Upgrade your plan

#### Lists

Today: Jan 11

#### Basic Example

List groups are a flexible and powerful component for displaying a series of content.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Disabled

#### Active items

Add `.active` to a `.list-group-item` to indicate the current active selection.

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

#### Links and buttons

Uses `<a>` or `<button>`s to create actionable list group itemswith hover and active states by adding `.list-group-item-action`.

Link Link disabled

#### Flush

Add `.list-group-flush` to remove some borders and rounded corners.

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

#### Horizontal

Add `.list-group-horizontal` to change the layout of list group items from vertical

- Cras justo
- Dapibus
- Morbi leo

#### With badges

Add badges to any list group item to show unread counts, activity.

- Cras justo odio
  4
- New Notifications
  New
- Payment Successfull
  Successfully
- Payment pending
  Pending
- Good Morning!
  1

#### Contextual classes

Use contextual classes to style list items with a stateful background and color.

- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item