Basic Example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Active Items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Disabled Items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
With Buttons
Contextual Classes
- Dapibus ac facilisis in
- This is a danger list group item
- This is a dark list group item
- This is a info list group item
- This is a light list group item
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a warning list group item
Contextual Classes
Contextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the
.active state; apply it to indicate an active selection on a contextual list group item.
With Badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Custom Content
List group item heading
3 days agoDonec 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 agoDonec 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 agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Simple List
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
- Single-line item
- Single-line item
- Single-line item
- Subheader
- Single-line item
- Single-line item
Simple List
- Single-line item
- Single-line item
- Single-line item
- Subheader
- Single-line item
- Single-line item
Icon with Text
-
Single-line item
-
Single-line item
-
Single-line item
- Subheader
-
Single-line item
-
Single-line item
Icon with Text (Dense)
-
Single-line item
-
Single-line item
-
Single-line item
- Subheader
-
Single-line item
-
Single-line item
Avatar with Text
- Contacts
-
Emily Castro -
Miguel Howell -
Brad Hunt -
Sherry Nichols -
Eleanor Larson
Avatar with Text (Dense)
- Contacts
-
Emily Castro
-
Miguel Howell
-
Brad Hunt
-
Sherry Nichols
-
Eleanor Larson
Avatar with Text and Icon
- Contacts
-
Emily Castro
-
Miguel Howell
-
Brad Hunt
-
Sherry Nichols
-
Eleanor Larson
Avatar with Text and Icon (Dense)
- Contacts
-
Emily Castro
-
Miguel Howell
-
Brad Hunt
-
Sherry Nichols
-
Eleanor Larson
Two-Line List
- Subheader
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List (Dense)
- Subheader
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Icon
- Subheader
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Icon (Dense)
- Subheader
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Avatar
- Contacts
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Avatar (Dense)
- Contacts
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Avatar and Icon
- Contacts
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Two-Line List with Avatar and Icon (Dense)
- Contacts
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
-
Two line item
Secondary text
Three-Line List
- Subheader
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List (Dense)
- Subheader
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Icon
- Subheader
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Icon (Dense)
- Subheader
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Avatar
- Contacts
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Avatar (Dense)
- Contacts
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Avatar and Icon
- Contacts
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
Three-Line List with Avatar and Icon
- Contacts
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.
-
Three line item
Secondary Text
Donec id elit non mi porta gravida at eget metus.