List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
The list group item will be styled differently if you use li.list-group-item
. This is best illustrated in the Basic list group/Basic list group alternate and the Linked list group/Linked list group using list items examples.
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
This style matches the default Linked list group.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Add the badges component to any list group item and it will automatically be positioned on the right.
Linkify list group items by using anchor tags instead of list items (that also means a parent <div>
instead of an <ul>
). No need for individual parents around each element.
Linkify list group items by using list items instead of anchor tags.
The list group collapsible menu requires the collapse plugin to be included in your version of Bootstrap.
Be sure to add a role="menu"
to every list-group-item-menu
and dropdown-menu
to help with accessibility.
List group items may be buttons instead of list items (that also means a parent <div>
instead of an <ul>
). No need for individual parents around each element. Don't use the standard .btn
classes here.
Add .disabled
to a .list-group-item
to gray it out to appear disabled.
Use contextual classes to style list items, default or linked. Also includes .active
state.
Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.