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.

List group on Bootstrap

Basic Example

<ul class="list-group">
  <li class="list-group-item">News Feed</li>
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
  • News Feed
  • Messages
  • Events
  • Groups
  • Pages

Active Item

<div class="list-group"><a class="list-group-item list-group-item-action active" href="#">News Feed</a>
  <a class="list-group-item list-group-item-action" href="#">Messages</a>
  <a class="list-group-item list-group-item-action" href="#">Events</a>
  <a class="list-group-item list-group-item-action" href="#">Groups</a>
  <a class="list-group-item list-group-item-action disabled" href="#">Pages</a>
</div>

List group flush

<ul class="list-group list-group-flush">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>
  • Messages
  • Events
  • Groups
  • Pages

List group with badge

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-soft-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-soft-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-soft-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-soft-primary rounded-pill">9</span></li>
</ul>
  • Messages14
  • Events2
  • Groups1
  • Pages9

List group background

<ul class="list-group">
  <li class="list-group-item py-3">Example with background</li>
  <li class="list-group-item list-group-item-primary py-3">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary py-3">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success py-3">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger py-3">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning py-3">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info py-3">A simple info list group item</li>
  <li class="list-group-item list-group-item-light py-3">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark py-3">A simple dark list group item</li>
</ul>
  • Example with background
  • A simple primary list group item
  • A simple secondary 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
  • A simple light list group item
  • A simple dark list group item

List group with Link