List group

A list group shows a series of related items in one block. Use it for simple lists, navigation, settings, and lists of records inside a card.

Overview

Use the list-group class on the container and list-group-item on each row. Items share one border and stack on top of each other.

First item

Second item

Third item

<div class="list-group">
  <div class="list-group-item">First item</div>
  <div class="list-group-item">Second item</div>
  <div class="list-group-item">Third item</div>
</div>

The container can be any element. Use ul with li items for a real list, or nav with a items for navigation.

First item
Second item
Third item

<ul class="list-group">
  <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>

Variants

Flush

Add list-group-flush to remove the outer border and the rounded corners. Use it when the list sits inside another element, for example a card.

First item

Second item

Third item

<div class="card">
  <div class="list-group list-group-flush">
    <div class="list-group-item">First item</div>
    <div class="list-group-item">Second item</div>
    <div class="list-group-item">Third item</div>
  </div>
</div>

Links and buttons

Add list-group-item-action to items that the user can click. It adds a hover and focus state. Use it on a or button elements only.

Profile Billing Notifications

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Profile</a>
  <a href="#" class="list-group-item list-group-item-action">Billing</a>
  <a href="#" class="list-group-item list-group-item-action">Notifications</a>
</div>

Active and disabled

Mark the current item with active. Tabler shows it with a thicker border on the start side. Use disabled for an item the user cannot pick.

Active item Normal item Disabled item

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> Active item </a>
  <a href="#" class="list-group-item list-group-item-action">Normal item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true" tabindex="-1"> Disabled item </a>
</div>

Section header

Use list-group-header to split a long list into groups. The header is a small uppercase label with its own background.

Today

Report generated

New comment

Yesterday

Invoice paid

<div class="list-group list-group-flush">
  <div class="list-group-header">Today</div>
  <div class="list-group-item">Report generated</div>
  <div class="list-group-item">New comment</div>
  <div class="list-group-header">Yesterday</div>
  <div class="list-group-item">Invoice paid</div>
</div>

Hoverable items with actions

Add list-group-hoverable to the container to highlight the row under the pointer. Inside an item, put extra controls in a list-group-item-actions element. They stay hidden and appear on hover. Add the show class to keep an action always visible.

Change deprecated html tags

Fix spacing in the navbar

<div class="list-group list-group-hoverable">
  <div class="list-group-item">
    <div class="row align-items-center">
      <div class="col text-truncate">Change deprecated html tags</div>
      <div class="col-auto">
        <a href="#" class="list-group-item-actions" aria-label="Add to favorites">
          <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-muted">
            <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="list-group-item">
    <div class="row align-items-center">
      <div class="col text-truncate">Fix spacing in the navbar</div>
      <div class="col-auto">
        <a href="#" class="list-group-item-actions show" aria-label="Remove from favorites">
          <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-yellow">
            <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Transparent

Add list-group-transparent to drop the background and the borders. Icons inside the items turn gray. This variant works well as a side menu.

Account Settings Notifications

<div class="list-group list-group-transparent">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <!-- Download SVG icon from http://tabler.io/icons/icon/user -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon me-2">
      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
    </svg> Account
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
    <!-- Download SVG icon from http://tabler.io/icons/icon/settings -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon me-2">
      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
    </svg> Settings
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <!-- Download SVG icon from http://tabler.io/icons/icon/bell -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon me-2">
      <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
      <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
    </svg> Notifications
  </a>
</div>

Numbered

Use an ol element with list-group-numbered to number the items. The numbers come from CSS, so you do not write them in the markup.

Create an account
Confirm your email
Invite your team

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Create an account</li>
  <li class="list-group-item">Confirm your email</li>
  <li class="list-group-item">Invite your team</li>
</ol>

Horizontal

Add list-group-horizontal to place the items in a row. Use a breakpoint, for example list-group-horizontal-md, to switch from a column to a row on wider screens.

First

Second

Third

<div class="list-group list-group-horizontal">
  <div class="list-group-item">First</div>
  <div class="list-group-item">Second</div>
  <div class="list-group-item">Third</div>
</div>

Contextual colors

Use list-group-item-* with a theme color to give one item a background. See the full list of available colors for more details.

Primary item

Success item

Warning item

Danger item

<div class="list-group">
  <div class="list-group-item list-group-item-primary">Primary item</div>
  <div class="list-group-item list-group-item-success">Success item</div>
  <div class="list-group-item list-group-item-warning">Warning item</div>
  <div class="list-group-item list-group-item-danger">Danger item</div>
</div>

Examples

List group in a card

Add card-list-group to the list inside a card. The items then use the card padding, and the borders on the sides are removed. A border is added between the card body and the list.

Team

Paweł Kuna

UI Designer

Alice Marlin

Frontend developer

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Team</h3>
  </div>
  <div class="list-group card-list-group">
    <div class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
        </div>
        <div class="col text-truncate">
          <div>Paweł Kuna</div>
          <div class="text-secondary text-truncate">UI Designer</div>
        </div>
      </div>
    </div>
    <div class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
        </div>
        <div class="col text-truncate">
          <div>Alice Marlin</div>
          <div class="text-secondary text-truncate">Frontend developer</div>
        </div>
      </div>
    </div>
  </div>
</div>

Notifications list

This pattern joins several variants: a flush list inside a card, hoverable rows, and an action that shows on hover.

Notifications

Build failed

The last deploy did not finish

New comment

Alice replied in the design thread

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Notifications</h3>
  </div>
  <div class="list-group list-group-flush list-group-hoverable">
    <div class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <span class="status-dot status-dot-animated bg-red d-block"></span>
        </div>
        <div class="col text-truncate">
          <a href="#" class="text-body d-block">Build failed</a>
          <div class="d-block text-secondary text-truncate mt-n1">The last deploy did not finish</div>
        </div>
        <div class="col-auto">
          <a href="#" class="list-group-item-actions" aria-label="Add to favorites">
            <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-muted">
              <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <span class="status-dot d-block"></span>
        </div>
        <div class="col text-truncate">
          <a href="#" class="text-body d-block">New comment</a>
          <div class="d-block text-secondary text-truncate mt-n1">Alice replied in the design thread</div>
        </div>
        <div class="col-auto">
          <a href="#" class="list-group-item-actions show" aria-label="Remove from favorites">
            <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon text-yellow">
              <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Inline list

list-inline is a separate, simpler pattern for a row of items - for example a footer or a page header with a few links. It is not a list-group: items have no border or background, only spacing between them.

Use list-inline on a ul and list-inline-item on each li.

Documentation
License
Source code

<ul class="list-inline mb-0">
  <li class="list-inline-item">Documentation</li>
  <li class="list-inline-item">License</li>
  <li class="list-inline-item">Source code</li>
</ul>

Add list-inline-dots to separate items with a centered dot instead of relying on spacing alone. Tabler uses this pattern in its own footer.

Documentation
License
Source code

<ul class="list-inline list-inline-dots mb-0">
  <li class="list-inline-item">Documentation</li>
  <li class="list-inline-item">License</li>
  <li class="list-inline-item">Source code</li>
</ul>

Separated list

list-separated stacks its children with a gap between them instead of a border. Use it when each item is a block of its own - a card, a media object, a row of details - rather than a row in a bordered list.

Egan Poetz
Product Manager
Paweł Kuna
UI Designer

<ul class="list-separated">
  <li class="d-flex align-items-center">
    <span class="avatar me-3" style="background-image: url(/static/avatars/029m.jpg)"></span>
    <div>
      <div class="fw-medium">Egan Poetz</div>
      <div class="text-secondary">Product Manager</div>
    </div>
  </li>
  <li class="d-flex align-items-center">
    <span class="avatar me-3" style="background-image: url(/static/avatars/035f.jpg)"></span>
    <div>
      <div class="fw-medium">Paweł Kuna</div>
      <div class="text-secondary">UI Designer</div>
    </div>
  </li>
</ul>

Accessibility

Pick the right element. Use ul or ol with li for a list of items, nav with a for navigation, and button for actions on the page.
Mark the current item with aria-current="true" next to the active class. The color alone is not enough.
A disabled class does not block clicks on a link. Remove the href, add aria-disabled="true", and set tabindex="-1".
Actions in list-group-item-actions appear on hover only. They stay in the tab order, but they are invisible while focused, so do not put the only way to do something there. Add the show class when an action must always be visible.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`list-group`	component	Container element
`list-group-item`	part	One entry
`list-group-header`	part	Section label between entries
`list-group-item-actions`	part	Slot for controls on the trailing edge of an entry
`list-group-flush`	style	Removes the outer border, to sit flush in a card
`list-group-transparent`	style	Removes the background and the borders
`list-group-numbered`	style	Numbers the entries
`list-separated`	style	Spaces the entries apart instead of joining them with borders
`list-group-hoverable`	behavior	Highlights the entry under the cursor
`list-group-item-action`	behavior	Marks an entry as a link or a button
`list-group-horizontal`	direction	Lays the entries out in a row; -{breakpoint} only above that width
`list-group-item-{color}`	color	Tints one entry, for example list-group-item-success

Menu