Bootstrap 5 List group Links and buttons

Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is currently actionable which means it can be a link or button. The Link or button can be made active or disabled.

List Group Links and Buttons Classes:

• list-group: This class is used to create the Bootstrap list.
• list-group-item: This class is used to indicate and add the items to the list.
• list-group-item-action: This class is used to specify the item is set to in an action.
• active: This class is used to make items of the list appear active.
• disabled: This class is used to make items of the list appear disabled.

Syntax:

// Anchor tag to specify link items
<div class="list-group">
 <a href="..." class="list-group-item 
 list-group-item-action active">...</a>
 ...
</div>

// Button tag to specify button items
<div class="list-group">
 <button type="button" class="list-group-item l
 ist-group-item-action active">...</button>
 ...
</div>

Note: Instead of using the".disabled" class with <button>, you may use the disabled attribute, the disabled attribute is not supported by <a>.

Example 1: The following code demonstrates the List Group Link items using the List Group Links and Buttons Item properties.

Output:

Example 2: The following code demonstrates the List Group Button items using the List Group Links and Buttons Item properties.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#links-and-buttons