List Group

List Group

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. Add .active to a .list-group-item to indicate the current active selection.

  • Homepage
  • Settings
  • Starred
  • Favorites
  • Edit Item
<ul class="list-group">
    <li class="list-group-item active" aria-current="true">
        <i class="bi-house mr-5"></i>
        <span>Homepage</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item">
        <i class="bi-gear mr-5"></i>
        <span>Settings</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item">
        <i class="bi-star mr-5"></i>
        <span>Starred</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item">
        <i class="bi-heart mr-5"></i>
        <span>Favorites</span>
    </li><!-- / list-group-item -->
    
    <li class="list-group-item">
        <i class="bi-pencil-square mr-5"></i>
        <span>Edit Item</span>
    </li><!-- / list-group-item -->
</ul><!-- / list-group -->

Links and Buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

<div class="list-group">
    <a href="#x" class="list-group-item list-group-item-action active" aria-current="true">
        <i class="bi-house mr-5"></i>
        <span>Homepage</span>
    </a><!-- / list-group-item -->

    <a href="#x" class="list-group-item list-group-item-action">
        <i class="bi-gear mr-5"></i>
        <span>Settings</span>
    </a><!-- / list-group-item -->

    <a href="#x" class="list-group-item list-group-item-action">
        <i class="bi-star mr-5"></i>
        <span>Starred</span>
    </a><!-- / list-group-item -->

    <a href="#x" class="list-group-item list-group-item-action">
        <i class="bi-heart mr-5"></i>
        <span>Favorites</span>
    </a><!-- / list-group-item -->

    <a href="#x" class="list-group-item list-group-item-action">
        <i class="bi-pencil-square mr-5"></i>
        <span>Edit Item</span>
    </a><!-- / list-group-item -->
</div><!-- / list-group -->

List Group with Badges

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

  • Emails 23
  • Messages 12
  • Updates 16
  • Notifications 47
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span><i class="bi-envelope-open mr-5"></i> Emails</span>
        <span class="badge badge-danger-light rounded-xs">23</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span><i class="bi-chat-left mr-5"></i> Messages</span>
        <span class="badge badge-success-light rounded-xs">12</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span><i class="bi-arrow-repeat mr-5"></i> Updates</span>
        <span class="badge badge-warning-light rounded-xs">16</span>
    </li><!-- / list-group-item -->

    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span><i class="bi-bell mr-5"></i> Notifications</span>
        <span class="badge badge-primary-light rounded-xs">47</span>
    </li><!-- / list-group-item -->
</ul><!-- / list-group -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav