List Groups

List groups are a flexible component for displaying a series of content.

Basic List Group

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

Active Items

  • An active item
  • A second item
  • A third item
<li class="list-group-item active">An active item</li>

Flush

  • An item
  • A second item
  • A third item
<ul class="list-group list-group-flush">...</ul>

With Badges

  • A list item 14
  • A second list item 2
  • A third list item 1 
<li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
</li>

Contextual Classes

  • A simple default list item
  • A simple primary list item
  • A simple secondary list item
  • A simple success list item
  • A simple danger list item
  • A simple warning list item
  • A simple info list item
  • A simple light list item
  • A simple dark list item
<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-success">Success</li>