Open In App

Bootstrap 5 List group JavaScript behavior

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <!-- Bootstrap JavaScript -->
    <script src=
      </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=
    <!-- Bootstrap JavaScript -->
    <script src=
</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



Last Updated : 25 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads