Bootstrap 5 List group Links and buttons

Last Updated : 10 Nov, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>List Active Item</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h2>Bootstrap 5 List Group Links</h2> 
    <div class="list-group"> 
        <a href="https://www.geeksforgeeks.org/" 
        class="list-group-item  
        list-group-item-action active"> 
            Active Link</a> 
        <a href="https://www.geeksforgeeks.org/" 
        class="list-group-item  
        list-group-item-action"> 
            GeeksforGeeks</a> 
        <a href="https://www.geeksforgeeks.org/" 
        class="list-group-item  
        list-group-item-action disabled"> 
            Hello</a> 
    </div> 
</body> 
  
</html>

Output:

List group links

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>List Active Item</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h2>Bootstrap 5 List group buttons</h2> 
    <div class="list-group"> 
        <button type="button" 
        class="list-group-item  
        list-group-item-action active">Active button</button> 
        <button type="button" 
        class="list-group-item  
        list-group-item-action">GeeksforGeeks</button> 
        <button type="button" 
        class="list-group-item  
        list-group-item-action" disabled> 
        Disabled Button</button> 
    </div> 
</body> 
  
</html>