Bootstrap 5 List group Via JavaScript

Last Updated : 22 Sep, 2023

Bootstrap 5 is a new updated version of Bootstrap, which is one of the popular frameworks for building a responsive, mobile-first website. It is completely free to download and use. List groups are a flexible and powerful component for displaying a series of content. That can be used to modify and extend them to support just about any content within. There are some classes to make a list group .list-group class is used with <ul> element and .list-group-item is used with <li> element. But, In this article, we create a list-group by using some JavaScript functions and methods.

Bootstrap 5 List Groups Via JavaScript by using some classes and Methods

forEach: forEach is an array method in JavaScript that executes a provided function once for each element in an array.
document.createElement: This method is used in the Document Object Model (DOM) that creates a new HTML element.
setAttribute: This is a method in the DOM that can set the value of an attribute on the specified element.
textContent: It is a property used for representing the text content of an element and its descendants.
classList.add: This method in DOM is used to add one or more CSS classes to the class attribute of an element.
appendChild: appendChild method is used to add a node as the last child of a specified parent node.

Example 1:

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <!-- Required meta tags -->
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <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> 
    <h2 class="text-success text-center m-3"> 
        GeeksforGeeks 
    </h2> 
    <div class="list-group m-5 mt-0 text-center" 
        id="myTab" role="tablist"> 
    </div> 
  
    <script> 
        let listItems = [ 
            "Data Structure", "Java",  
            "CSS", "Python", "Database" 
        ]; 
  
        let listContainer = document.getElementById("myTab"); 
  
        listItems.forEach(function (itemText) { 
            let listItem = document.createElement("a"); 
            listItem.className =  
                "list-group-item list-group-item-action"; 
            listItem.setAttribute("data-bs-toggle", "list"); 
            listItem.setAttribute("role", "tab"); 
            listItem.textContent = itemText; 
            listContainer.appendChild(listItem); 
        }); 
    </script> 
  
    <!-- Bootstrap Bundle with Popper -->
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, the current item is highlighted with an active list-item.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Required meta tags -->
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <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> 
    <h2 class="text-success text-center m-3"> 
        GeeksforGeeks 
    </h2> 
    <div class="list-group m-5 mt-0 text-center" 
        id="myTab" role="tablist"> 
    </div> 
  
    <script> 
        let listItems = [ 
            "Data Structure", "Java",  
            "CSS", "Python", "Database" 
        ]; 
  
        let listContainer = document.getElementById("myTab"); 
  
        listItems.forEach(function (itemText, index) { 
            let listItem = document.createElement("a"); 
            listItem.className =  
                "list-group-item list-group-item-action"; 
            listItem.setAttribute("data-bs-toggle", "list"); 
            listItem.setAttribute("role", "tab"); 
            listItem.textContent = itemText; 
  
            // Add 'active' class to the first item 
            if (index === 0) { 
                listItem.classList.add("active"); 
            } 
  
            listContainer.appendChild(listItem); 
        }); 
    </script> 
  
    <!-- Bootstrap Bundle with Popper -->
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</body> 
  
</html>

Output:

Example 3: In this example, the badge property is used in javascript which can add badges inside the list of groups

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Required meta tags -->
    <meta charset="utf-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <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> 
    <h2 class="text-success text-center m-3"> 
        GeeksforGeeks 
    </h2> 
    <div class="list-group m-5 mt-0 text-center" 
        id="myTab" role="tablist"> 
    </div> 
  
    <script> 
        var listItems = [ 
            { text: "Data Structure", badge: "New" }, 
            { text: "Java", badge: "Hot" }, 
            { text: "CSS", badge: "Updated" }, 
            { text: "Python", badge: "Popular" }, 
            { text: "Database", badge: "Featured" }, 
        ]; 
  
        var listContainer = document.getElementById("myTab"); 
  
        listItems.forEach(function (item) { 
            var listItem = document.createElement("a"); 
            listItem.className = 
                "list-group-item list-group-item-action  
                d-flex justify-content-between  
                align-items-center"; 
            listItem.setAttribute("data-bs-toggle", "list"); 
            listItem.setAttribute("role", "tab"); 
            listItem.textContent = item.text; 
  
            var badge = document.createElement("span"); 
            badge.className = "badge bg-primary"; 
            badge.textContent = item.badge; 
  
            listItem.appendChild(badge); 
            listContainer.appendChild(listItem); 
        }); 
    </script> 
  
    <!-- Bootstrap Bundle with Popper -->
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</body> 
  
</html>

Output:

Example 4: In this example, Contextual property is used that enables the visual representation or styling of corresponding each item of the list.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Required meta tags -->
    <meta charset="utf-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <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> 
    <h2 class="text-success text-center m-3"> 
        GeeksforGeeks 
    </h2> 
    <div class="list-group m-5 mt-0 text-center" 
        id="myTab" role="tablist"> 
    </div> 
  
    <script> 
        var listItems = [ 
            { text: "Data Structure", context: "primary" }, 
            { text: "Java", context: "success" }, 
            { text: "CSS", context: "warning" }, 
            { text: "Python", context: "info" }, 
            { text: "Database", context: "danger" }, 
        ]; 
  
        var listContainer = document.getElementById("myTab"); 
  
        listItems.forEach(function (item) { 
            var listItem = document.createElement("a"); 
            listItem.className = 
                "list-group-item list-group-item-action  
                d-flex justify-content-between  
                align-items-center"; 
            listItem.setAttribute("data-bs-toggle", "list"); 
            listItem.setAttribute("role", "tab"); 
            listItem.textContent = item.text; 
  
            var contextClass = "text-" + item.context; 
            listItem.classList.add(contextClass); 
  
            listContainer.appendChild(listItem); 
        }); 
    </script> 
  
    <!-- Bootstrap Bundle with Popper -->
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
</body> 
  
</html>