List
Basic list
The most basic list group is simply an unordered list with list items, and the proper classes.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Badges list
Add the badges component to any list group item and it will automatically be positioned on the right.
- 10 Cras justo odio
- 9 Dapibus ac facilisis in
- 4 Morbi leo risus
- 14 Porta ac consectetur ac
- 5 Vestibulum at eros
Linked list
Linkify list group items by using anchor tags instead of list items.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Disabled items
Add .disabledto a .list-group-itemto gray it out to appear disabled.
Contextual classes
Use contextual classes to style list items, default or linked. Also includes .activestate.
- Cras sit amet nibh libero
- Dapibus ac facilisis in
- Porta ac consectetur ac
- Vestibulum at eros
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group with right icons
List group items by using right icons instead of list items.
List group with left icons
List group items by using left icons instead of list items.
List group with background
Use different types of background color of list items.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
User list
Use different types of user list groups with image.
-
Cras justo odio
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Dapibus ac facilisis
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Morbi leo risus
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Porta ac consectetur
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Vestibulum at eros
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
User list with circle
Use different types of user list groups with circle image.
-
Cras justo odio
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Dapibus ac facilisis
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Morbi leo risus
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Porta ac consectetur
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
-
Vestibulum at eros
Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.
List notifications
Use different types of notification list groups with icons.
-
Porta ac consectetur
Just now online
-
Vestibulum at eros
6 minits ago
-
Cras justo odio
10 minits ago
-
Dapibus ac facilisis
5 Days ago
-
Morbi leo risus
1 Month ago