List group
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.
Examples
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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
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
- Vestibulum at eros
Links
With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Advanced examples
Here are some more advanced custom examples we’ve made in order to bring more functionality with some really cool list group examples.
Members
Team members
Checklist
-
Call with Dave
10:30 AM -
Lunch meeting
10:30 AM -
Argon Dashboard Launch
10:30 AM -
Winter Hackaton
10:30 AM
Progress
Messages
Tim
New order for Argon Dashboard
Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Mike
● Your theme has been updated
Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Tim
New order for Argon Dashboard
Doasdnec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Notifications
Countries
-
Country:
United States
Visits:2500
Bounce:30%
-
Country:
Germany
Visits:2500
Bounce:30%
-
Country:
Great Britain
Visits:2500
Bounce:30%