Skip to main content

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 example

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

Active items / actions

The current link item A second link item A disabled link item

Flush

Add .list-group-flush to remove some borders and rounded corners.

  • An item
  • A second item
  • A third item

Numbered

Add .list-group-numbered to display numbered list items.

  1. Cras justo odio
  2. Dapibus ac facilisis in
  3. Morbi leo risus

Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints, or with a breakpoint suffix like .list-group-horizontal-sm.

  • An item
  • A second item
  • A third item

Contextual classes

  • A simple primary 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

    • Custom content

    List group item heading
    3 days ago

    Some placeholder content in a paragraph.

    And some small print.

    Light variant

    Use .list-group-light for a borderless item list with rounded hover states (handy in sidebars).

    Dashboard Orders Customers