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.

Bootstrap List group documentation

Basic example

  • Dashboard
  • Profile
  • Tasks
  • Projects
  • Members
<ul class="list-group">
  <li class="list-group-item active"><i class="fas fa-home fa-sm min-w-4rem mr-1"></i> Dashboard</li>
  <li class="list-group-item"><i class="fas fa-user-circle fa-sm min-w-4rem mr-1"></i> Profile</li>
  <li class="list-group-item"><i class="fas fa-tasks fa-sm min-w-4rem mr-1"></i> Tasks</li>
  <li class="list-group-item"><i class="fas fa-layer-group fa-sm min-w-4rem mr-1"></i> Projects</li>
  <li class="list-group-item"><i class="fas fa-users fa-sm min-w-4rem mr-1"></i> Members</li>
</ul>
Copy

Links and buttons 

<div class="list-group">
  <a class="list-group-item list-group-item-action active" href="#"><i class="fas fa-home fa-sm min-w-4rem mr-1"></i> Dashboard</a>
  <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-user-circle fa-sm min-w-4rem mr-1"></i> Profile</a>
  <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-tasks fa-sm min-w-4rem mr-1"></i> Tasks</a>
  <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-layer-group fa-sm min-w-4rem mr-1"></i> Projects</a>
  <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-users fa-sm min-w-4rem mr-1"></i> Members</a>
</div>
Copy

Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Dashboard
  • Profile
  • Tasks
  • Projects
  • Members
<ul class="list-group list-group-flush">
  <li class="list-group-item">Profile</li>
  <li class="list-group-item">Settings</li>
  <li class="list-group-item">Tasks</li>
  <li class="list-group-item">Updates</li>
  <li class="list-group-item">Events</li>
</ul>
Copy

Horizontal

  • Profile
  • Settings
  • Tasks
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Profile</li>
  <li class="list-group-item">Settings</li>
  <li class="list-group-item">Tasks</li>
</ul>
Copy

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

  • Profile 14
  • Settings 2
  • Tasks 1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Profile
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Settings
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tasks
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>
Copy