Bootstrap 5 List group Methods

Last Updated : 05 Aug, 2024

Bootstrap 5 List Group methods that are used to control the visibility of the List Group component. For example, these methods can be used to show a list of group components or dispose of them.

Bootstrap 5 List Group Methods:

constructor: It is used to activate a tab element as a Bootstrap 5 List Group element after which we can utilize different methods given by Bootstrap 5 such as show(), dispose(), etc.
show: It is used to activate and select a tab and show the content relevant to it.
dispose: It is used to destroy the element as a Bootstrap 5 list group element.
getInstance: It is a static method that is used to get the list group element associated with the DOM.
getOrCreateInstance: It is a static method that is used to get the list group element associated with the DOM or create a new one if it is not present.

Syntax:

listGroupElement.list_group_method()

Example 1: In this example, we will show different List group tabs using the "show()" method given by the Bootstrap 5 List Group object.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap 5 List Group Methods</h3>
    <div class="row">
        <div class="col-4">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item active
                          list-group-item-action"
                   id="list-home-list"
                   data-bs-toggle="list" 
                   href="#list-home"
                   role="tab" 
                   aria-controls="list-home">
                    Home
                </a>
                <a class="list-group-item list-group-item-action" 
                   id="list-profile-list" 
                   data-bs-toggle="list"
                   href="#list-profile" 
                   role="tab" 
                   aria-controls="list-profile">
                    About
                </a>
                <a class="list-group-item list-group-item-action" 
                   id="list-messages-list" 
                   data-bs-toggle="list" 
                   href="#list-messages" 
                   role="tab" 
                   aria-controls="list-messages">
                    Contact
                </a>
                <a