List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class.
Basic example
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/Disabled items
Add .active to a .list-group-item to indicate the current active selection.
Add .disabled to a .list-group-item to make it appear disabled.
Active list item
Dapibus ac facilisis in
Disabled list item
Porta ac consectetur ac
Vestibulum at eros
Contextual classes
Use contextual classes to style list items with a stateful background and color.
Dapibus ac facilisis in
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
With badges
Add badges to any list group item to show unread counts, activity and more.