List group

List groups are flexible list components which can be used to display a series of items, actions or content.

Basic example #

You can create basic list groups using unordered lists (.list-group) along with list items (.list-group-item). Note that by default, list groups and non-active items have their background colors set to transparent or semi-transparent (just like tables). You can change this using a background color utility on the .list-group.

On list group items, add the .active class to style them as active, along with the aria-current="true" attribute for assistive technologies. To style items as disabled, add the .disabled class, along with the aria-disabled="true" attribute for assistive technologies.

List group item 1
List group item 2
List group item 3
List group item 4
List group item 5

HTML

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">List group item 1</li>
  <li class="list-group-item">List group item 2</li>
  <li class="list-group-item">List group item 3</li>
  <li class="list-group-item">List group item 4</li>
  <li class="list-group-item disabled" aria-disabled="true">List group item 5</li>
</ul>

Information

Please note, list group components are block-level and will take up the full width of their parent containers. In the example above (and all others on this page), the accordion components have been placed inside a container with the class .specific-w-300.

Links and buttons #

Use <a> or <button> elements 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> or <div>) don't provide a click or tap affordance. Please note, for disabled links, omit the href attribute as the disabled attribute is not supported on links.

List group link 1 List group link 2 List group link 3 List group link 4 List group link 5

HTML

<!-- List group with links -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">List group link 1</a>
  <a href="#" class="list-group-item list-group-item-action">List group link 2</a>
  <a href="#" class="list-group-item list-group-item-action">List group link 3</a>
  <a href="#" class="list-group-item list-group-item-action">List group link 4</a>
  <a class="list-group-item list-group-item-action disabled">List group link 5</a>
</div>

With <button> elements, be sure to not use the standard .btn classes here. Also for disabled buttons, add the disabled attribute along with the .disabled class.

HTML

<!-- List group with buttons -->
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">List group button 1</button>
  <button type="button" class="list-group-item list-group-item-action">List group button 2</button>
  <button type="button" class="list-group-item list-group-item-action">List group button 3</button>
  <button type="button" class="list-group-item list-group-item-action">List group button 4</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>List group button 5</button>
</div>

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).

List group item 1
List group item 2
List group item 3

HTML

<!-- Edge-to-edge list group inside card -->
<div class="card specific-w-300 mw-100 mx-auto">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List group item 1</li>
    <li class="list-group-item">List group item 2</li>
    <li class="list-group-item">List group item 3</li>
  </ul>
</div>

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> element'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.

List group item
List group item
List group item

HTML

<!-- Numbered list group -->
<ol class="list-group list-group-numbered">
  <li class="list-group-item">List group item</li>
  <li class="list-group-item">List group item</li>
  <li class="list-group-item">List group item</li>
</ol>

Horizontal #

Create horizontal list groups by adding one of the following classes (along with .list-group):

.list-group-horizontal
.list-group-horizontal-{breakpoint}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

Use flexbox utilities to manage the width of the items. By default, items will only take up their necessary width. However, you can add .flex-grow-1 to an item to stretch it across the remaining space. Also if you want equal-width list group items, add .flex-fill to each item.

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

First
Second
Third

HTML

<!-- Horizontal list group -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item flex-grow-1">Item 3</li>
</ul>

<!-- Horizontal only on large screens and up -->
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item flex-grow-1">Item 3</li>
</ul>

<!-- Horizontal list group with equal-width items -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item flex-fill">First</li>
  <li class="list-group-item flex-fill">Second</li>
  <li class="list-group-item flex-fill">Third</li>
</ul>

Custom content and badges #

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. You can also add badges to any list group item to show unread counts, activity, and more.

$49.99

HTML

<!-- List group with custom content and badges -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">
    <div class="me-auto">
      <div class="fw-bold">Product 1</div>
      <span class="text-body-secondary">Short description</span>
    </div>
    <span class="badge text-bg-primary rounded-pill">$19.99</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">
    <div class="me-auto">
      <div class="fw-bold">Product 2</div>
      <span class="text-body-secondary">Short description</span>
    </div>
    <span class="badge text-bg-primary rounded-pill">$24.99</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">
    <div class="me-auto">
      <div class="fw-bold">Product 3</div>
      <span class="text-body-secondary">Short description</span>
    </div>
    <span class="badge text-bg-primary rounded-pill">$49.99</span>
  </a>
</div>

Variants #

Create list items with a stateful background and color using .list-group-{variant}, where the {variant} can be primary, secondary, success, danger, warning, info, light, or dark.

Default list group item
Primary list group item
Secondary list group item
Success list group item
Danger list group item
Warning list group item
Info list group item
Light list group item
Dark list group item

HTML

<!-- List group with item variants -->
<ul class="list-group">
  <li class="list-group-item">Default list group item</li>
  <li class="list-group-item list-group-item-primary">Primary list group item</li>
  <li class="list-group-item list-group-item-secondary">Secondary list group item</li>
  <li class="list-group-item list-group-item-success">Success list group item</li>
  <li class="list-group-item list-group-item-danger">Danger list group item</li>
  <li class="list-group-item list-group-item-warning">Warning list group item</li>
  <li class="list-group-item list-group-item-info">Info list group item</li>
  <li class="list-group-item list-group-item-light">Light list group item</li>
  <li class="list-group-item list-group-item-dark">Dark list group item</li>
</ul>

Variants For links and buttons #

Contextual classes also work with .list-group-item-action for <a> and <button> elements. 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.

Default list group link Primary list group link Secondary list group link Success list group link Danger list group link Warning list group link Info list group link Light list group link Dark list group link

HTML

<!-- List group with action variants -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Default list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light list group link</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark list group link</a>
</div>

Accessibility

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Checkbox and radio #

Place checkboxes and radio buttons within list group items and customize as needed. You can use them without <label> elements, but please remember to include an aria-label attribute and value for accessibility.

Please note, you can use .stretched-link on the <label> elements to make the whole list group item clickable. This is generally recommended (when applicable) because it makes it a lot easier for users to toggle the check elements.

My languages are...

Python
JavaScript
Swift

My specialization is...

Back-end
Front-end
Full-stack

HTML

<!-- List group with checkboxes -->
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="python" id="example-checkbox-1">
    <label class="form-check-label stretched-link" for="example-checkbox-1">Python</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="javascript" id="example-checkbox-2">
    <label class="form-check-label stretched-link" for="example-checkbox-2">JavaScript</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="swift" id="example-checkbox-3">
    <label class="form-check-label stretched-link" for="example-checkbox-3">Swift</label>
  </li>
</ul>

<!-- List group with radio buttons -->
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="radio-group-1" value="backend" id="example-radio-1">
    <label class="form-check-label stretched-link" for="example-radio-1">Back-end</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="radio-group-1" value="frontend" id="example-radio-2">
    <label class="form-check-label stretched-link" for="example-radio-2">Front-end</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="radio-group-1" value="fullstack" id="example-radio-3">
    <label class="form-check-label stretched-link" for="example-radio-3">Full-stack</label>
  </li>
</ul>

Usage as tabs #

Use the tab JavaScript plugin to extend list groups to create tabbable panes of local content.

Profile Billing Messages Stats Premium

Profile

Billing

Messages

Stats

Premium

HTML

<!-- List group as tabs -->
<div class="row">
  <div class="col-sm-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action d-flex align-items-center active" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">
        <i class="fa-light fa-user" style="width: 30px;"></i>
        Profile
      </a>
      <a class="list-group-item list-group-item-action d-flex align-items-center" id="list-billing-list" data-bs-toggle="list" href="#list-billing" role="tab" aria-controls="list-billing">
        <i class="fa-light fa-credit-card" style="width: 30px;"></i>
        Billing
      </a>
      <a class="list-group-item list-group-item-action d-flex align-items-center" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">
        <i class="fa-light fa-envelope" style="width: 30px;"></i>
        Messages
      </a>
      <a class="list-group-item list-group-item-action d-flex align-items-center" id="list-stats-list" data-bs-toggle="list" href="#list-stats" role="tab" aria-controls="list-stats">
        <i class="fa-light fa-line-chart" style="width: 30px;"></i>
        Stats
      </a>
      <a class="list-group-item list-group-item-action d-flex align-items-center" id="list-premium-list" data-bs-toggle="list" href="#list-premium" role="tab" aria-controls="list-premium">
        <i class="fa-light fa-star" style="width: 30px;"></i>
        Premium
      </a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="tab-content" id="nav-tab-content">
      <div class="tab-pane fade show active" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-billing" role="tabpanel" aria-labelledby="list-billing-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-stats" role="tabpanel" aria-labelledby="list-stats-list">...</div>
      <div class="tab-pane fade" id="list-premium" role="tabpanel" aria-labelledby="list-premium-list">...</div>
    </div>
  </div>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).

JavaScript usage #

`halfmoon.js`

Halfmoon is a drop-in replacement for Bootstrap. We implement no JavaScript on our own, therefore, there is no halfmoon.js. Instead we rely entirely on bootstrap.bundle.js (which can be downloaded from Bootstrap's website). Read the JavaScript section on our download page to learn more. It also contains a starter template to help you get started quickly.

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about methods, events, and more in the official Bootstrap documentation.

List group - Bootstrap
Continue reading on the offical documentation website

Up next

Modal

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

List group

Basic example #

Information

Links and buttons #

Flush #

Numbered #

Horizontal #

Custom content and badges #

Variants #

Variants For links and buttons #

Accessibility

Checkbox and radio #

Usage as tabs #

JavaScript usage #

halfmoon.js

Help us grow

Subscribe for updates

`halfmoon.js`