--- layout: docs title: List group description: Learn about Bootstrap's list group component for rendering series of related content. group: components --- List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Basic example The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. {% example html %} {% endexample %} ## Active items Add `.active` to a `.list-group-item` to indicate the current active selection. {% example html %} {% endexample %} ## Disabled items Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links). {% example html %} {% endexample %} ## Links and buttons Use ``s or ` {% endexample %} ## Contextual classes Use contextual classes to style list items with a stateful background and color. {% example html %} {% endexample %} Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item. {% example html %}
Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
{% endexample %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {{ callout-include | markdownify }} ## With badges Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment) and the badge's placement. {% example html %} {% endexample %} ## Custom content Add nearly any HTML within, even for linked list groups like the one below. {% example html %}
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.
{% endexample %}