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.