Bootstrap5 List Group

Bootstrap 5 List Group is a component used to display a series of items or content, often used for navigation, tags, menus, or other similar list forms.

The list group component provides a flexible way to display ordered or unordered content, and you can customize the style, interaction, and layout of each item.

Basic Structure

Bootstrap 5 list group consists of the following parts:

• .list-group: A container used to wrap the entire list.
• .list-group-item: Each list item, usually containing text, links, or other content.
• .list-group-item-action: Makes list items clickable, often used to create interactive lists.
• .list-group-item-primaryetc.: Used to add different background colors or other styles to list items.

Most basic list groups are unordered.

To create a list group, you can add<ul>on the element.list-groupclass, on the<li>element add.list-group-itemclass:

---

Active list item

By adding.activeclass to set the active list item:

---

Disabled list item

.disabledclass is used to set disabled list items:

---

Link list items

To create a linked list item, you can replace<ul>with<div> ， <a>replace<li>. If you want to show a gray background on mouse hover, add.list-group-item-actionclass:

---

Remove list border

Use.list-group-flushclass to remove the border and border radius of the list:

---

Horizontal list group

We can add.list-group-horizontalclass to.list-groupafter the class to create a horizontal list group:

---

Multiple color list items

The color of list items can be set using the following classes: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-darkandlist-group-item-light:

Linked multiple color list items

---

List group case

Other extensions