List Group
Basic example
The most basic list group is 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
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
Disabled items
Add .disabled to a .list-group-item to make it
appear disabled. Note that some elements with .disabled will also require custom
JavaScript to fully disable their click events (e.g., links).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
With badges
Use the .badge class together with a
contextual class (like .badge-secondary) . Use any of the contextual classes (.badge-*) to change the color of a badge:
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 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
