Bootstrap 5 List Groups

Basic list group

The most basic list group is an unordered list containing list items:

To create a basic list group, use the class .list-group of <ul> Element and class for .list-group-item of <li> Element:

Examples

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try It Yourself

Active state

Please use .active To highlight the current item, use the class:

Examples

<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Try It Yourself

List group with linked items

To create a list group with linked items, use <div> instead of <ul>, using <a> instead of <li>. Optionally, if you want a gray background color on hover, add .list-group-item-action Type:

Examples

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First Item</a>
  <a href="#" class="list-group-item list-group-item-action">Second Item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Try It Yourself

Disabled items

.disabled The class adds a lighter text color to disabled items. When used on links, the hover effect is removed:

Examples

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Try It Yourself

remove borders

using .list-group-flush class removes borders and rounded corners:

Examples

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Try It Yourself

numbered list group

using .list-group-numbered class creates list items with numbers in front:

Examples

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

Try It Yourself

Horizontal list group

If you want the list items to be displayed horizontally instead of vertically (side by side instead of stacked), please add .list-group-horizontal class is added to .list-group:

Examples

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Try It Yourself

Contextual classes

Contextual classes can be used to add color to list items:

The class used to color the list items is:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Examples

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Try It Yourself

Link items with contextual classes

Examples

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

Try It Yourself

Badged List Group

To .badge Combine with class and utility/helper class to add badges in the list group:

Examples

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Advertisement Emails
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Trash
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Try It Yourself