Bootstrap 5 List group component
Responsive List group built with the latest Bootstrap 5. List gorup component used for displays a continuous group of text or images.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
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.
- Inbox
- Draft
- Trash
- Spam
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<i class="fa-solid fa-inbox fa-lg me-3"></i> Inbox
</li>
<li class="list-group-item list-group-item-action">
<i class="fa-solid fa-envelope-open fa-lg me-3"></i> Draft
</li>
<hr/>
<li class="list-group-item list-group-item-action">Trash</li>
<li class="list-group-item list-group-item-action">Spam</li>
</ul>
Active items
Add .active
to .list-group-item
to indicate the current active selection.
- Inbox
- Draft
- Trash
- Spam
<ul class="list-group">
<li class="list-group-item list-group-item-action"><i class="fa-solid fa-inbox fa-lg me-3"></i> Inbox</li>
<li class="list-group-item list-group-item-action active"><i class="fa-solid fa-envelope-open fa-lg me-3"></i> Draft</li>
<hr/>
<li class="list-group-item list-group-item-action">Trash</li>
<li class="list-group-item list-group-item-action">Spam</li>
</ul>
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).
- Inbox
- Draft
- Trash
- Spam
<ul class="list-group">
<li class="list-group-item list-group-item-action"><i class="fa-solid fa-inbox fa-lg me-3"></i> Inbox</li>
<li class="list-group-item list-group-item-action disabled"><i class="fa-solid fa-envelope-open fa-lg me-3"></i> Draft</li>
<hr/>
<li class="list-group-item list-group-item-action">Trash</li>
<li class="list-group-item list-group-item-action">Spam</li>
</ul>
.disabled
will also require custom JavaScript to fully disable their click events (e.g., links).Links and buttons
Use <a>
s or <button>
s to create actionable list 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 .btn
classes here.
Links
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#">
<i class="fa-solid fa-inbox fa-lg me-3"></i> Inbox
</a>
<a class="list-group-item list-group-item-action active" href="#">
<i class="fa-solid fa-envelope-open fa-lg me-3"></i> Draft
</a>
<a class="list-group-item list-group-item-action" href="#">Trash</a>
<a class="list-group-item list-group-item-action disabled" href="#">Disabled Spam</a>
</div>
Buttons
With <button>
s, you can also make use of the disabled attribute instead of the .disabled
class. Sadly, <a>
s don’t support the disabled attribute.
<div class="list-group">
<button class="list-group-item list-group-item-action" type="button">
<i class="fa-solid fa-inbox fa-lg me-3"></i> Inbox
</button>
<button class="list-group-item list-group-item-action active" type="button">
<i class="fa-solid fa-envelope-open fa-lg me-3"></i> Draft
</button>
<button class="list-group-item list-group-item-action" type="button">Trash</button>
<button class="list-group-item list-group-item-action" type="button" disabled>Disabled Spam</button>
</div>
Flush
Add .list-group-flush
to add a border to render list group items edge-to-edge in a parent container (e.g., cards).
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group list-group-flush border">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Numbered
Add the .list-group-numbered
modifier class (and optionally use an <ol>
element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>
s default browser styling) for better placement inside list group items and to allow for better customization.
Numbers are generated by counter-reset
on the <ol>
, and then styled and placed with a ::before
pseudo-element on the <li>
with counter-increment and content.
- Single-line item
- Single-line item
- Single-line item
<ol class="list-group list-group-numbered">
<li class="list-group-item ">Single-line item</li>
<li class="list-group-item">Single-line item</li>
<li class="list-group-item">Single-line item</li>
</ol>
These work great with custom content as well.
- 14Subheading
Content for list item
- 14Subheading
Content for list item
- 14Subheading
Content for list item
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div>Subheading</div>
<p class="mb-0 fs-sm text-muted">Content for list item</p>
</div>
<span class="badge text-bg-primary">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div>Subheading</div>
<p class="mb-0 fs-sm text-muted">Content for list item</p>
</div>
<span class="badge text-bg-primary">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div>Subheading</div>
<p class="mb-0 fs-sm text-muted">Content for list item</p>
</div>
<span class="badge text-bg-primary">14</span>
</li>
</ol>
Horizontal
Add .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|xxl}
to make a list group horizontal starting at that breakpoint’s min-width
. Currently horizontal list groups cannot be combined with flush list groups.
.flex-fill
to each list group item.- First item
- Second item
- Third item
- First item
- Second item
- Third item
- First item
- Second item
- Third item
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Contextual classes
Use contextual classes to style list items with a stateful background and color. Or you can use our background color utilities to change .Check out background color
- A simple default list group item
- 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 gap-2">
<li class="list-group-item">A simple default list group item</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>
With badges
Add badge to any list group item to show unread counts, activity, and more with the help of some utilities.
- A list item 14
- A second list item 2
- A third list item 1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
Custom content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
- Active
John Doe
- Removed
Alex Ray
- Awaiting
Kate Hunington
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img class="avatar avatar-lg" src="/images/avatar/1.jpg" alt="" />
<div class="ms-3">
<p class="fw-bold mb-0">John Doe</p>
<p class="text-muted mb-0 fs-sm">[email protected]</p>
</div>
</div>
<span class="badge text-bg-success">Active</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img class="avatar avatar-lg" src="/images/avatar/2.jpg" alt="" />
<div class="ms-3">
<p class="fw-bold mb-0">Alex Ray</p>
<p class="text-muted mb-0 fs-sm">[email protected]</p>
</div>
</div>
<span class="badge text-bg-danger">Removed</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img class="avatar avatar-lg" src="/images/avatar/3.jpg" alt="" />
<div class="ms-3">
<p class="fw-bold mb-0">Kate Hunington</p>
<p class="text-muted mb-0 fs-sm">[email protected]</p>
</div>
</div>
<span class="badge text-bg-warning">Awaiting</span>
</li>
</ul>
Checkboxes and radios
Place checkboxes and radios within list group items and customize as needed. You can use them without <label>
s, but please remember to include an aria-label
attribute and value for accessibility.
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="checkbox" value="" checked id="firstCheckbox" />
<label class="form-check-label" for="firstCheckbox">List item 1</label>
</div>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox" />
<label class="form-check-label d-block" for="secondCheckbox">List item 2</label>
</div>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox" />
<label class="form-check-label d-block" for="thirdCheckbox">List item 3</label>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio">
<label class="form-check-label" for="firstRadio">List item 1</label>
</div>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
<label class="form-check-label" for="secondRadio">List item 2</label>
</div>
</li>
<li class="list-group-item list-group-item-action">
<div class="d-flex flex-row-reverse justify-content-between">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
<label class="form-check-label" for="thirdRadio">List item 3</label>
</div>
</li>
</ul>