Elements:List Groups
Examples
List groups allow the display of simple lists and more complex content in a bold and eye catching manner.
They can be applied to lists or divs containing link or button elements. A wrapper element with the class
list-group is required and each list item within the wrapper requires a
list-group-item class.
On a
ul with list items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
On a
div with links
Active & disabled items
.active and
.disabled classes can be applied to
list-group-item items to alter their appearance when in those states.
list-group-item-action class can also be applied to
list-group-item items to alter their appearance slightly so they look more like buttons.
With badges
You can include "badge" components within the
list-group-item elements to indicate counters or highlight an item.
- Cras justo odio 14
- Dapibus ac facilisis in new
- Morbi leo risus updated
Styles
list-group-item elements can be combined with contextual colour styles to alter the row colour.
Striped
Add the class
.list-group-striped to add alternating row striping.
- Cras justo odio 14
- Dapibus ac facilisis in new
- Morbi leo risus updated
- Dapibus ac leo risus hot
Content
List groups support bolder headers and content text using the
.list-group-item-heading and
.list-group-item-text classes.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.