List group – Basic list groups

From Bootstrap - Demo Wiki
Component
Name List group
Description Basic list groups
Provider Skin
Reference getbootstrap.com - list group
Styling For all possible color styles and corresponding examples, see colors.

Basic

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

Active item

Code
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
Result
  • An item
  • An active item
  • A third item
  • A fourth item
  • And a fifth one

Disabled item

Code
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
Result
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one