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 list-group-icon"></i> Dashboard</li>
                        <li class="list-group-item"><i class="fas fa-user-circle list-group-icon"></i> Profile</li>
                        <li class="list-group-item"><i class="fas fa-tasks list-group-icon"></i> Tasks</li>
                        <li class="list-group-item"><i class="fas fa-layer-group list-group-icon"></i> Projects</li>
                        <li class="list-group-item"><i class="fas fa-users list-group-icon"></i> Members</li>
                      </ul>

Links and buttons 

                    
                      <div class="list-group">
                        <a class="list-group-item list-group-item-action active" href="#"><i class="fas fa-home list-group-icon"></i> Dashboard</a>
                        <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-user-circle list-group-icon"></i> Profile</a>
                        <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-tasks list-group-icon"></i> Tasks</a>
                        <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-layer-group list-group-icon"></i> Projects</a>
                        <a class="list-group-item list-group-item-action" href="#"><i class="fas fa-users list-group-icon"></i> Members</a>
                      </div>

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>

Also, you can use .list-group-no-gutters to remove paddings from either horizontal sides. New

  • Dashboard
  • Profile
  • Tasks
  • Projects
  • Members
                    
                      <ul class="list-group list-group-flush list-group-no-gutters">
                        <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>

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>

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>