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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</body>

</html>