List Groups

List groups are a flexible and powerful component for displaying a series of content. List group items can be modified to support just about any content within. They can also be used as navigation via various props.

Bootstrap list group

docs

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

List group active items

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

List group disabled items

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

List group actionable items

Awesome link Link with active state Action links are easy Disabled link

List group buttons

List group with badges

Cras justo odio 14

Dapibus ac facilisis in 2

Morbi leo risus 1

List group variants

This is a default 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

List group variants active

This is a default 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

List group inside cards

Card with list group

Cras justo odio Dapibus ac facilisis in Vestibulum at eros

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.

Card with flush list group

Cras justo odio Dapibus ac facilisis in Vestibulum at eros

List group custom content

List group item heading

3 days ago

Donec 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 ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Disabled List group item

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.