Open In App

Bootstrap 5 List group JavaScript behavior

Last Updated : 25 Jan, 2023
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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads