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