Bootstrap 5 List group Links and buttons

Last Updated : 26 Jul, 2024

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/[email protected]/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:

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/[email protected]/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>