List Group
Basic List
The most basic list group is an unordered list with list items and the proper classes. Add .active& .disabledclasses for states.
- Regular list group item
- Active list group item
- Disabled list group item
Flush
Add .list-group-flushto remove some borders and rounded corners to render list group items edge-to-edge in a parent container.
- Regular list group item
- Active list group item
- Disabled list group item
Contextual classes
Use contextual classes to style list items with a stateful background and color.
- This is a regular 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 danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
Contextual classes inverse
Use .list-group-inv .list-group-inv-*to change the appearance of list group items.
- This is a regular 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 danger list group item
- This is a warning list group item
- This is a info list group item
With badges
Add badges to any list group item to show unread counts, activity, and more with the help of some flex utilities.
- List group item one 14
- List group item two 2
- List group item three 1
Links and buttons
Use anchor or button tag to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
Custom content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
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.With icons
- List group item one
- List group item two
- List group item three
- List group item one12
- List group item two10
- List group item three1
With checkbox
- 12
- 10
- 15
- 12
- 10
- 15
JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.jsfile—to extend our list group to create tabbable panes of local content.