Skip to main content

List Groups in Bootstrap 5

Bootstrap List Groups​

Bootstrap List Groups are a flexible and powerful component for displaying a series of content. They allow you to create lists of content that can include text, images, links, and other HTML elements.

List groups can be used to display a variety of information, such as product listings, user profiles, and more.

As an example:

Editor

Loading...
tip

By default, list group items are displayed as block-level elements with some padding and a gray background color

Active State​

The active state in a list group can be applied by adding the active class to the list item that needs to be highlighted.

As an example:

<ul class="list-group">
     <li class="list-group-item">Item 1</li>
     <li class="list-group-item active">Item 2 (active)</li>
     <li class="list-group-item">Item 3</li>
</ul>

In the above example:

  • The second list item with the text "Item 2" will be highlighted as active.

Disabled Item​

you can add the disabled class to the list item.

As an example:

<ul class="list-group">
     <li class="list-group-item">Item 1</li>
     <li class="list-group-item disabled">Item 2 (disabled)</li>
     <li class="list-group-item">Item 3</li>
</ul>

In the above example:

  • The second list item is disabled by adding the disabled class.
  • This will apply a grayed-out style to the item and prevent any click events from firing.

Numbered List Groups​

List Groups can also be displayed with a numbered style. To create a numbered list group, you can add the .list-group-numbered class to the .list-group container.

As an example:

Editor

Loading...

You can also customize the starting number of the list by adding the start attribute to the .list-group-numbered container.

As an example:

<ul class="list-group list-group-numbered" start="4">
     <li class="list-group-item ">Item 4</li>
     <li class="list-group-item ">Item 5</li>
     <li class="list-group-item ">Item 6</li>
</ul>
  • This will display the list group with the starting number 4.

Horizontal List Groups​

list groups can also be displayed horizontally using the .list-group-horizontal class.

As an example:

Editor

Loading...

Contextual Classes​

Bootstrap also provides contextual classes for list groups.

Here they are:

  • .list-group-item-action: Adds hover and focus states to a list group item.
  • .list-group-item-danger: Adds a red background color to a list group item to indicate a dangerous or negative action.
  • .list-group-item-success: Adds a green background color to a list group item to indicate a successful or positive action.
  • .list-group-item-warning: Adds a yellow background color to a list group item to indicate a warning or caution.
  • .list-group-item-info: Adds a light blue background color to a list group item to indicate information or a neutral action.
  • .list-group-item-primary: Adds a blue background color to a list group item to indicate a primary action or main content.

As an example:

<div class="list-group">
     <a
          href="#"
          class="list-group-item list-group-item-action list-group-item-success"
          >Success</a
     >
     <a
          href="#"
          class="list-group-item list-group-item-action list-group-item-warning"
          >Warning</a
     >
     <a
          href="#"
          class="list-group-item list-group-item-action list-group-item-danger"
          >Danger</a
     >
     <a
          href="#"
          class="list-group-item list-group-item-action list-group-item-primary"
          >Primary</a
     >
     <a
          href="#"
          class="list-group-item list-group-item-action list-group-item-info"
          >Info</a
     >
</div>

List Group with Badges​

Bootstrap provides a way to add badges to list group items using the .badge class.

As an example:

Editor

Loading...

In this example:

  • The .d-flex, .justify-content-between, and .align-items-center classes are used to horizontally center the badge within the list group item.
  • The .badge class is used to add a badge with a blue background color and rounded corners.
  • The .rounded-pill class is used to make the corners of the badge more rounded.