List Groups

List Groups

List groups are flexible components for displaying lists of content. Use the .list-group class on a <ul> and .list-group-item on each item.

Basic list group

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

Active and disabled items

• .active highlights an item.
• .disabled makes an item unclickable.

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item disabled">Disabled item</li>
</ul>

Contextual classes

Use .list-group-item-{color} to color items:

• .list-group-item-success green
• .list-group-item-danger red
• .list-group-item-warning yellow
• .list-group-item-info light blue

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
</ul>

Numbered list groups

Add .list-group-numbered to show automatic numbers:

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First</li>
  <li class="list-group-item">Second</li>
</ol>

Horizontal list groups

Use .list-group-horizontal (or with a breakpoint like .list-group-horizontal-md) to lay items in a row.

Actionable list groups

Wrap the list in a <div class="list-group"> and use <a> elements with .list-group-item list-group-item-action to make clickable items.

TL;DR

• .list-group + .list-group-item build the list.
• .active highlights, .disabled grays out.
• .list-group-item-{color} colors items.
• .list-group-numbered adds numbers.
• .list-group-horizontal lays items in a row.