Menu

⌘K
View as markdownAsk ChatGPTAsk Claude

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>

Item layout

An item can hold more than one line of text. Put a list-group-item-content element in the item and it becomes a row of slots:

  • list-group-item-media - an icon, an avatar or an input before the content,
  • list-group-item-content - the main part, with list-group-item-title and list-group-item-description,
  • list-group-item-meta - a time, a count or a badge after the content,
  • list-group-item-actions - buttons and other controls at the end.

Only the content slot is required. The title and the description are cut with an ellipsis when they do not fit.

Paweł Kuna
UI Designer
2 h
Alice Marlin
Frontend developer
3 d
<div class="list-group">
  <div class="list-group-item">
    <div class="list-group-item-media">
      <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
    </div>
    <div class="list-group-item-content">
      <div class="list-group-item-title">Paweł Kuna</div>
      <div class="list-group-item-description">UI Designer</div>
    </div>
    <div class="list-group-item-meta">2 h</div>
    <div class="list-group-item-actions">
      <button type="button" class="btn btn-sm">Follow</button>
    </div>
  </div>
  <div class="list-group-item">
    <div class="list-group-item-media">
      <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span>
    </div>
    <div class="list-group-item-content">
      <div class="list-group-item-title">Alice Marlin</div>
      <div class="list-group-item-description">Frontend developer</div>
    </div>
    <div class="list-group-item-meta">3 d</div>
    <div class="list-group-item-actions">
      <button type="button" class="btn btn-sm">Follow</button>
    </div>
  </div>
</div>

The item itself can be a link or a label. Use a label with a checkbox, a radio or a switch inside, so a click on the whole row changes the input.

<div class="list-group">
  <label class="list-group-item">
    <span class="list-group-item-media">
      <!-- Download SVG icon from http://tabler.io/icons/icon/mail -->
      <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="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
        <path d="M3 7l9 6l9 -6" />
      </svg>
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Email</span>
      <span class="list-group-item-description">A summary every morning</span>
    </span>
    <span class="list-group-item-actions">
      <span class="form-check form-switch m-0">
        <input type="checkbox" role="switch" class="form-check-input" checked />
      </span>
    </span>
  </label>
  <label class="list-group-item">
    <span class="list-group-item-media">
      <!-- Download SVG icon from http://tabler.io/icons/icon/device-mobile -->
      <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="M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14" />
        <path d="M11 4h2" />
        <path d="M12 17v.01" />
      </svg>
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Push</span>
      <span class="list-group-item-description">Mentions and direct messages</span>
    </span>
    <span class="list-group-item-actions">
      <span class="form-check form-switch m-0">
        <input type="checkbox" role="switch" class="form-check-input" />
      </span>
    </span>
  </label>
</div>

Longer text

The slots are centered and the description stays on one line. For longer text add the align-items-start utility to the item and text-wrap to the description.

Paweł Kuna
The new list layout works well on the dashboard. Can we use the same slots for the search results?
2 h
<div class="list-group">
  <div class="list-group-item align-items-start">
    <div class="list-group-item-media">
      <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span>
    </div>
    <div class="list-group-item-content">
      <div class="list-group-item-title">Paweł Kuna</div>
      <div class="list-group-item-description text-wrap">The new list layout works well on the dashboard. Can we use the same slots for the search results?</div>
    </div>
    <div class="list-group-item-meta">2 h</div>
  </div>
</div>

Sizes

Add list-group-sm for compact items or list-group-lg for items with more room. The classes change the vertical padding of the items and the gap between the slots.

Small item
Small item
Default item
Default item
Large item
Large item
<div class="list-group list-group-sm mb-3">
  <div class="list-group-item">Small item</div>
  <div class="list-group-item">Small item</div>
</div>
<div class="list-group mb-3">
  <div class="list-group-item">Default item</div>
  <div class="list-group-item">Default item</div>
</div>
<div class="list-group list-group-lg">
  <div class="list-group-item">Large item</div>
  <div class="list-group-item">Large item</div>
</div>

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>

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.

ProfileBillingNotifications
<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>

Selectable items

Add list-group-selectable to the container and list-group-selectable-check to the checkbox or radio in each item. A checked input gives its item the same look as active, with no JavaScript. Use a label as the item, so a click on the whole row changes the input.

<div class="list-group list-group-selectable">
  <label class="list-group-item">
    <span class="list-group-item-media">
      <input type="checkbox" class="form-check-input list-group-selectable-check m-0" checked />
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Paweł Kuna</span>
      <span class="list-group-item-description">UI Designer</span>
    </span>
  </label>
  <label class="list-group-item">
    <span class="list-group-item-media">
      <input type="checkbox" class="form-check-input list-group-selectable-check m-0" />
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Alice Marlin</span>
      <span class="list-group-item-description">Frontend developer</span>
    </span>
  </label>
</div>

Nested items

Put the child items in a list-group-nested element right after their parent item. The nested items are indented and have no borders between them. Make the element a collapse and the parent item its toggle to open and close the group. Add list-group-item-toggle to the chevron, and it turns over while the group is open.

Settings
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action" data-bs-toggle="collapse" data-bs-target="#list-nested-projects" aria-expanded="true" aria-controls="list-nested-projects">
    <span class="list-group-item-media">
      <!-- Download SVG icon from http://tabler.io/icons/icon/folder -->
      <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="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
      </svg>
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Projects</span>
    </span>
    <span class="list-group-item-meta">
      <!-- Download SVG icon from http://tabler.io/icons/icon/chevron-down -->
      <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 list-group-item-toggle">
        <path d="M6 9l6 6l6 -6" />
      </svg>
    </span>
  </button>
  <div class="list-group-nested collapse show" id="list-nested-projects">
    <a href="#" class="list-group-item list-group-item-action">Website redesign</a>
    <a href="#" class="list-group-item list-group-item-action">Mobile app</a>
  </div>
  <a href="#" class="list-group-item list-group-item-action">
    <span class="list-group-item-media">
      <!-- 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 text-muted">
        <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>
    </span>
    <span class="list-group-item-content">
      <span class="list-group-item-title">Settings</span>
    </span>
  </a>
</div>

The indent is the --tblr-list-group-nested-indent variable. Its default matches an icon in the media slot.

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="list-group-item-content">
      <div class="list-group-item-title">Change deprecated html tags</div>
    </div>
    <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 class="list-group-item">
    <div class="list-group-item-content">
      <div class="list-group-item-title">Fix spacing in the navbar</div>
    </div>
    <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>

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.

  1. Create an account
  2. Confirm your email
  3. 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="list-group-item-media">
        <span class="status-dot status-dot-animated bg-red"></span>
      </div>
      <div class="list-group-item-content">
        <a href="#" class="list-group-item-title">Build failed</a>
        <div class="list-group-item-description">The last deploy did not finish</div>
      </div>
      <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 class="list-group-item">
      <div class="list-group-item-media">
        <span class="status-dot"></span>
      </div>
      <div class="list-group-item-content">
        <a href="#" class="list-group-item-title">New comment</a>
        <div class="list-group-item-description">Alice replied in the design thread</div>
      </div>
      <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>

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 componentContainer element
list-group-item partOne entry
list-group-header partSection label between entries
list-group-item-media partSlot for an icon, an avatar or an input on the leading edge of an entry
list-group-item-content partMain slot of an entry; its presence turns the entry into a row of slots
list-group-item-title partFirst line of the content, cut with an ellipsis
list-group-item-description partSecond line of the content, in the secondary color
list-group-item-meta partSlot for a time, a count or a badge after the content
list-group-item-actions partSlot for controls on the trailing edge of an entry
list-group-selectable-check partCheckbox or radio that marks its entry when checked
list-group-nested partBlock of indented entries under a parent entry, usually a collapse
list-group-item-toggle partChevron of a parent entry, turned over while its nested entries are open
list-group-flush styleRemoves the outer border, to sit flush in a card
list-group-transparent styleRemoves the background and the borders
list-group-numbered styleNumbers the entries
list-separated styleSpaces the entries apart instead of joining them with borders
list-group-hoverable behaviorHighlights the entry under the cursor
list-group-item-action behaviorMarks an entry as a link or a button
list-group-selectable behaviorGives an entry with a checked input the active look
list-group-horizontal directionLays the entries out in a row; -{breakpoint} only above that width
list-group-item-{color} colorTints one entry, for example list-group-item-success
list-group-sm sizeCompact entries
list-group-lg sizeRoomy entries

CSS

Variables

The component uses local CSS variables on .list-group for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/bootstrap/_list-group.scss.

--list-group-color: #{$list-group-color};
--list-group-bg: #{$list-group-bg};
--list-group-border-color: #{$list-group-border-color};
--list-group-border-width: #{$list-group-border-width};
--list-group-border-radius: #{$list-group-border-radius};
--list-group-item-padding-x: #{$list-group-item-padding-x};
--list-group-item-padding-y: #{$list-group-item-padding-y};
--list-group-action-color: #{$list-group-action-color};
--list-group-action-hover-color: #{$list-group-action-hover-color};
--list-group-action-hover-bg: #{$list-group-hover-bg};
--list-group-action-active-color: #{$list-group-action-active-color};
--list-group-action-active-bg: #{$list-group-action-active-bg};
--list-group-disabled-color: #{$list-group-disabled-color};
--list-group-disabled-bg: #{$list-group-disabled-bg};
--list-group-active-color: #{$list-group-active-color};
--list-group-active-bg: #{$list-group-active-bg};
--list-group-active-border-color: #{$list-group-active-border-color};

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.

Tabler All Package — one purchase, every premium product.