Open In App

Bootstrap 5 List group Active items

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Active items</title>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <ul class="list-group">
            <li class="list-group-item active">
                Hello
            </li>
            <li class="list-group-item">
                Welcome Geek
            </li>
            <li class="list-group-item">
                GeeksforGeeks
            </li>
        </ul>
    </div>
</body>
  
</html>


Output: 

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 List group Active items</title>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <ul class="list-group">        
            <li class="list-group-item active"> C++</li>
            <li class="list-group-item">Python</li>
            <li class="list-group-item active"> C</li>
            <li class="list-group-item">Java</li>
            <li class="list-group-item active"> Ruby</li>
            <li class="list-group-item">JavaScript</li>
            <li class="list-group-item">PHP</li>
        </ul>
    </div>
</body>
  
</html>


Output:

 

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



Last Updated : 23 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads