<ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

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.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group"><li class="list-group-item disabled"aria-disabled="true">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

Add .disabledto a .list-group-itemto make it appeardisabled. Note that some elements with .disabledwill also require custom JavaScript to fully disable their click events(e.g.,links).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

Add .list-group-flushto remove some borders and rounded corners to render list group items edge-to-edge in a parent container(e.g.,cards).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul class="list-group"><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item list-group-item-primary">A simple primary list group item</li><li class="list-group-item list-group-item-secondary">A simple secondary list group item</li><li class="list-group-item list-group-item-success">A simple success list group item</li><li class="list-group-item list-group-item-danger">A simple danger list group item</li><li class="list-group-item list-group-item-warning">A simple warning list group item</li><li class="list-group-item list-group-item-info">A simple info list group item</li><li class="list-group-item list-group-item-light">A simple light list group item</li><li class="list-group-item list-group-item-dark">A simple dark list group item</li></ul>

Use contextual classes to style list items with a stateful background and color.

• Dapibus ac facilisis in
• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group item
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-primary badge-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-success badge-pill">2</span></li><li class="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus <span class="badge badge-danger badge-pill">1</span></li></ul>

Add badges to any list group item to show unread counts,activity,and more with the help of some utilities.

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center iq-bg-primary">Cras justo odio <span class="badge badge-primary badge-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-center iq-bg-success">Dapibus ac facilisis in <span class="badge badge-success badge-pill">2</span></li><li class="list-group-item d-flex justify-content-between align-items-center iq-bg-danger">Morbi leo risus <span class="badge badge-danger badge-pill">1</span></li></ul>

Add badges to any list group item to show unread counts,activity,and more with the help of some utilities.

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

<ul class="list-group"><li class="list-group-item active">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul>

Add .activeto a .list-group-itemto indicate the current active selection.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<div class="list-group"><a href="#"class="list-group-item list-group-item-action active">Cras justo odio </a><a href="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a><a href="#"class="list-group-item list-group-item-action">Morbi leo risus</a><a href="#"class="list-group-item list-group-item-action">Porta ac consectetur ac</a><a href="#"class="list-group-item list-group-item-action disabled"tabindex="-1"aria-disabled="true">Vestibulum at eros</a></div>

Use <a>s or <button>s to create actionablelist group items with hover,disabled,and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements(like <li>s or <div>s) don’t provide a click or tap affordance.

Be sure to not use the standard .btnclasses here.

<ul class="list-group list-group-horizontal"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li></ul>

Add .list-group-horizontalto change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively,choose a responsive variant .list-group-horizontal-{sm|md|lg|xl}to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

ProTip:Want equal-width list group items when horizontal? Add .flex-fillto each list group item.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

<div class="list-group"><a href="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a><a href="#"class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a><a href="#"class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a></div>

Use contextual classes to style list items with a stateful background and color.

<div class="list-group"><a href="#"class="list-group-item list-group-item-action active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1 text-white">List group item heading</h5><small>3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small>Donec id elit non mi porta.</small></a><a href="#"class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a><a href="#"class="list-group-item list-group-item-action"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">List group item heading</h5><small class="text-muted">3 days ago</small></div><p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small class="text-muted">Donec id elit non mi porta.</small></a></div>

Add nearly any HTML within,even for linked list groups like the one below,with the help of flexbox utilities.