Bootstrap 5 List group Active items

Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Active feature is used to indicate the currently active selection.

List group Active items classes:

• .active: This class is used to indicate the currently active selection.
• .list-group-item: This class is used to indicate and add the items to the list.
• .list-group: This class is used to create the Bootstrap list.

Syntax:

<ul class="list-group">
 <li class="list-group-item active">...</li>
 <li class="list-group-item">...</li> 
 ...
</ul>

 

Example 1: The following code demonstrates the List group Active items using the List Active Item properties.

Output: 

👁 Image

Example 2: The following code demonstrates the List group Active items on multiple items.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#active-items