Bootstrap 5 List group JavaScript behavior
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
Please Login to comment...