List group

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

Default, active and disabled item

  • An item
  • Active item
  • A third item
  • Disabled item
  • And a fifth one

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.

The active link item A second link item A third link item A fourth link item A disabled link item

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.

Flush

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Numbered

  1. A list item
  2. A list item
  3. A list item

With badges

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14

Checkboxes and radios
On this page