Bootstrap 5 List group JavaScript behavior

Last Updated : 26 Jul, 2024

Bootstrap5 list group JavaScript behavior is used to generate tabbable panes of local material by expanding our list group.

Bootstrap 5 List group JavaScript behavior:

Using data attributes: We can enable the List group by using data attributes without using any javascript code. We need to pass data-bs-toggle = “list” on the element and .list-group-item on the list of elements.
Via JavaScript: We can also activate the bootstrap lit group via javascript.
Fade effect: We can add a .fade class to each .tab-pane to have the tabs panel fade in. For the original content to be displayed, the first tab pane also has to have a .show.
Methods: Methods are used to undertake different specific actions on the list group, We have some methods like constructor, show, dispose of, getInstance, and getOrCreateInstance.
Events: Events are used to perform some of the basic functionalities. Some of the events are automatically triggered when we call the corresponding method.

Example 1: In these, we will demonstrate the bootstrap 5 list group.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
</head>

<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <div class="list-group">
        <button type="button" 
                class="list-group-item list-group-item-action active">
            Item 1
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action">
            Item 2
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action">
            A third button item
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action" 
                disabled>
            A disabled item
        </button>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will demonstrate bootstrap 5 list group fade effects.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <div class="row">
        <div class="col-2">
            <div class="list-group">
                <a class="list-group-item " 
                   data-bs-toggle="list" href="#java">
                    JAVA
                </a>
                <a class="list-group-item" 
                   data-bs-toggle="list" href="#python">
                    PYTHON
                </a>
                <a class="list-group-item" 
                   data-bs-toggle="list" href="#c">
                    C++
                </a>
            </div>
        </div>
        <div class="col text-white">
            <div class="">
                <div class=" fade bg-info rounded " id="java">
                    <h3 class="text-dark">JAVA</h3>
                    <p>Java is a high-level, class-based, object-oriented</p>
                    <p>programming language that is designed to have as few</p>
                    <p> implementation dependencies as possible.</p>
                </div>
                <div class="fade bg-secondary rounded" id="python">
                    <h3 class="text-dark">PYTHON</h3>
                    <p>Python is a high-level, general-purpose programming </p>
                    <p> language. Its design philosophy emphasizes code </p>
                    <p> readability with the use of significant indentation.</p>
                </div>
                <div class="fade bg-primary rounded" id="c">
                    <h3 class="text-dark">C++</h3>
                    <p>C++ is a cross-platform language that can be used </p>
                    <p>to create high-performance applications. C++ was</p>
                    <p>developed by Bjarne Stroustrup, as an extension to the C</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior

Bootstrap 5 List group Using data Attributes

sukanya825

Improve

Article Tags :

Bootstrap 5 List group JavaScript behavior

Similar Reads

Thank You!

What kind of Experience do you want to share?