We use this element in our themes to present call-to-actions, menus and lists of articles.
Usage
Use .list-group
to wrap two or more .list-group-item
elements to create a list group.
<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>
List groups and their items can contain almost any custom content and HTML.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action is-active">
<div class="flex w-100 justify-content-between align-items-baseline">
<h5 class="mt-3 text-inherit">Article title</h5>
<small>3 days ago</small>
</div>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="flex w-100 justify-content-between align-items-baseline">
<h5 class="mt-3">Article title</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="flex w-100 justify-content-between align-items-baseline">
<h5 class="mt-3">Article title</h5>
<small class="text-muted">3 days ago</small>
</div>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
Badges can be added to .list-group-item
s and aligned using flex utilities.
<ul class="list-group">
<li class="list-group-item flex justify-content-between align-items-center">
Open
<span class="badge">14</span>
</li>
<li class="list-group-item flex justify-content-between align-items-center">
Pending
<span class="badge">2</span>
</li>
<li class="list-group-item flex justify-content-between align-items-center">
On-hold
<span class="badge">1</span>
</li>
</ul>
States
Active
Add .is-active
to a .list-group-item
to indicate the current active selection.
<ul class="list-group">
<li class="list-group-item is-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>
Disabled
Add .is-disabled
to a .list-group-item
to make it appear disabled.
<ul class="list-group">
<li class="list-group-item is-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>
Some elements with .is-disabled
will also require custom JavaScript to disable their click events (e.g., links).
Links and buttons
Use <a>
or <button>
elements with the .list-group-item-action
class to create actionable list group items with hover, disabled, and active states.
<div class="list-group">
<a class="list-group-item list-group-item-action is-active" href="#">Cras justo odio</a>
<a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
<a class="list-group-item list-group-item-action" href="#">Morbi leo risus</a>
<a class="list-group-item list-group-item-action" href="#">Porta ac consectetur ac</a>
<a class="list-group-item list-group-item-action is-disabled" href="#" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>
With <button>
elements you can make use of the disabled
attribute instead of the .is-disabled
class.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action is-active">Cras justo odio</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
Variants
Horizontal
Use .list-group-horizontal
to 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.
<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>
Use the .flex-fill
utility class on each list group item to have them occupy the same amount of horizontal space.
<ul class="list-group list-group-horizontal">
<li class="list-group-item flex-fill text-center">Cras justo odio</li>
<li class="list-group-item flex-fill text-center">Dapibus ac facilisis in</li>
<li class="list-group-item flex-fill text-center">Morbi leo risus</li>
</ul>
Flush
Add .list-group-flush
to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
<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>