Bootstrap 5 List Groups


List groups in Bootstrap allow you to display a series of content, such as text or images, as a list.

Basic List Groups

  • The <ul> element with the class .list-group is used to create the list group.
  • Each list item (<li>) within the list group has the class .list-group-item .
Example 
<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 & Disabled Item

  • Also,you can make an item active in a list group by adding the .active class to the corresponding <li> element. This visually highlights the active item.
  • In Bootstrap 5, you can disable an item in a list group by adding the .disabled class to the corresponding <li> element. This makes the item appear visually muted, and it cannot be interacted with.
Example 
<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>
  <li class="list-group-item disabled">Disabled item</li>
</ul>
Try it Yourself

Flush

  • The .list-group-flush class is added to the <ul> element, creating a flush or borderless appearance for the list group items.
Example 
<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>
  <li class="list-group-item">Fifth item</li>
</ul>
Try it Yourself

Numbered List Groups

  • To create list items with numbers in front of them, add .numbered-list-group to the <ul> element.
Example 
<ul 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>
</ul>
Try it Yourself

List Group with Badges

  • Using .badge class you can add badges to list group items to display additional information or counts associated with each item.
  • The .d-flex class is used to make the list items display as flex containers.
  • The .justify-content-between class is used to align the badge to the right.
  • The .align-items-center class is used to vertically center the content and the badge.
Example 
<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">20</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Draft
    <span class="badge bg-primary rounded-pill">05</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Trash
    <span class="badge bg-primary rounded-pill">35</span>
  </li>
</ul>
Try it Yourself

Contextual classes

  • Contextual classes such as .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 and .list-group-item-light are used to apply different background colors to the list items.
Example 
<ul class="list-group">
  <li class="list-group-item">Default Item</li>
  <li class="list-group-item list-group-item-primary">Primary Item</li>
  <li class="list-group-item list-group-item-secondary">Secondary Item</li>
  <li class="list-group-item list-group-item-success">Success Item</li>
  <li class="list-group-item list-group-item-danger">Danger Item</li>
  <li class="list-group-item list-group-item-warning">Warning Item</li>
  <li class="list-group-item list-group-item-info">Info Item</li>
  <li class="list-group-item list-group-item-light">Light Item</li>
  <li class="list-group-item list-group-item-dark">Dark Item</li>
</ul>
Try it Yourself

Horizontal List Groups

You can create horizontal list groups by using the .list-group-horizontal class. This class is used to display list group items in a horizontal row rather than a vertical column.

  • The .list-group class is applied to the <ul> element to create a list group.
  • The .list-group-horizontal class is used to make the list group items display horizontally.
Example 
<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