Open In App

Bootstrap 5 List group constructor() Method

Last Updated : 01 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Constructor() method is a method that is used to activate the List Group element as a Tab element, along with activating the container for the content. The tab should have either a “​data-bs-target” attribute or the “href“ attribute which points to the target container in the DOM.

Syntax: To call the constructor method, we simply need to create a new bootstrap.Tab object, using the selector of the list group element as the parameter.

const myTab = new bootstrap.Tab​(selector);

Parameter: The method accepts either the HTML element or its selector as the argument/parameter.

Return Value: The method activates the bootstrap List Group element and returns the instance of the selected tab which can be used to either show, dispose, bind events etc.

Example 1: ​In this example, we have created a simple bootstrap list group, and called the constructor of the tab element “python”. And then set it as the default element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
          Bootstrap 5 List group constructor() Method
      </title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
          crossorigin="anonymous" />
      <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous">
      </script>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap 5 List group constructor() Method</h3>
    <h5 class="mt-4">
          Latest GeeksforGeeks Articles: 
      </h5>
    <div class="row mt-3">
        <div class="col-2">
            <div class="list-group" 
                 id="list-tab" 
                 role="tablist">
                <a class="list-group-item list-group-item-action active" 
                   id="list-news"
                   data-bs-toggle="list"
                   href="#news"  
                   role="tab" 
                   aria-controls="news">
                      Tech News
                  </a>
                <a class="list-group-item list-group-item-action"
                   id="list-python" 
                   data-bs-toggle="list" 
                   href="#python"
                   role="tab" 
                   aria-controls="pyton">
                      Python
                  </a>
                <a class="list-group-item list-group-item-action" 
                   id="list-reactjs" 
                   data-bs-toggle="list"
                   href="#project" 
                   role="tab" 
                   aria-controls="project">
                      Project
                  </a>
                <a class="list-group-item list-group-item-action" 
                   id="list-reactjs" 
                   data-bs-toggle="list"
                   href="#reactjs" 
                   role="tab" 
                   aria-controls="reactjs">
                  ReactJs
              </a>
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content" 
                 id="nav-tabContent">
                <div class="tab-pane fade show active" 
                     id="news"
                     role="tabpanel" 
                     aria-labelledby="list-news">
                    <ul>
                        <li>
                            <a href="#">
                              10 Exciting Project Ideas Using Large
                              Language Models (LLMs)
                            </a>
                          </li>
                        <li>
                              <a href="#">
                                   Top 5 Universities to Upskill 
                                your Leadership Roles
                              </a>
                          </li>
                        <li>
                              <a href="#">
                                  IU International University of 
                                Applied Sciences
                              </a>
                          </li>
                    </ul>
                </div>
                <div class="tab-pane fade"
                     id="python" 
                     role="tabpanel" 
                     aria-labelledby="list-python">
                    <ul>
                        <li>
                              <a href="#">Tkinter Cheat Sheet</a>
                          </li>
                        <li>
                              <a href="#">
                              How to pass list as a command-line 
                              argument with argparse?
                              </a>
                          </li>
                        <li>
                              <a href="#">What is TABU search?</a>
                          </li>
                    </ul>
                </div>
                <div class="tab-pane fade" 
                     id="project" 
                     role="tabpanel"
                     aria-labelledby="list-project">
                    <ul>
                        <li>
                              <a href="#">
                              Emoji Picker App using React</a>
                          </li>
                        <li>
                              <a href="#">
                              Word Guess Game using React</a>
                          </li>
                        <li>
                              <a href="#">
                              BMI Calculator using React</a>
                          </li>
                    </ul>
                </div>
                <div class="tab-pane fade" 
                     id="reactjs" 
                     role="tabpanel" 
                     aria-labelledby="list-reactjs">
                    <ul>
                        <li>
                              <a href="#">
                              React MUI Content Security Policy
                              </a>
                          </li>
                        <li>
                              <a href="#">
                              Movie Search Engine Using React And API
                              </a>
                          </li>
                        <li>
                              <a href="#">
                              ReactJs Server Components
                              </a>
                          </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const defaultTab = new bootstrap.Tab(
            document.querySelector("#list-python")
        );
        defaultTab.show();
    </script>
</body>
  
</html>
 






                        










Output:


gfg-bootstrapListGroup-Articles
Example 1: Bootstrap 5 List group constructor() Method


Example 2: In this example, we have created a progress form, where the user can click the next button to move to the next form section and the previous button to move to the previous section and finally order the product.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html> 


<html lang="en"> 


  


<head> 


    <title> 


          Bootstrap 5 List group constructor() Method 


      </title> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 


          rel="stylesheet"


        integrity= 


"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 


          crossorigin="anonymous"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"


        integrity= 


"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"


        crossorigin="anonymous"> 


      </script> 


</head> 


  


<body> 


    <h1 class="text-success">GeeksforGeeks</h1> 


    <p>Bootstrap 5 List group constructor() Method</p> 


    <div class="row"> 


        <div class="col-2"> 


            <div class="list-group" 


                 id="list-tab" 


                 role="tablist"> 


                <a class="list-group-item  


                          list-group-item-action  


                          list-group-item-warning active" 


                   id="list-user"


                   data-bs-toggle="list" 


                   href="#user" 


                   role="tab" 


                   aria-controls="user">User Info 


                  </a> 


                <a class="list-group-item l 


                          ist-group-item-action  


                          list-group-item-danger"  


                   id="list-shipping"


                   data-bs-toggle="list"


                   href="#shipping" 


                   role="tab"


                   aria-controls="shipping">Shipping Details 


                  </a> 


                <a class="list-group-item 


                          list-group-item-action  


                          list-group-item-success"  


                   id="list-payment"


                   data-bs-toggle="list"


                   href="#payment" 


                   role="tab" 


                   aria-controls="payment">Payment Method 


                  </a> 


                <a class="list-group-item  


                          list-group-item-action  


                          list-group-item-info"  


                   id="list-order"


                   data-bs-toggle="list" 


                   href="#order"


                   role="tab" 


                   aria-controls="order">Place Order 


                  </a> 


            </div> 


        </div> 


        <div class="col-8"> 


            <div class="tab-content" 


                 id="nav-tabContent"> 


                <div class="tab-pane fade show active" 


                     id="user"


                     role="tabpanel"


                     aria-labelledby="list-user"> 


                    <div> 


                          <input type="text" 


                               placeholder="Email"> 


                      </div> 


                    <div> 


                          <input type="text" 


                               placeholder="Name"> 


                      </div> 


                    <div> 


                          <input type="text" 


                               placeholder="Phone Number"> 


                      </div> 


                </div> 


                <div class="tab-pane fade"


                     id="shipping" 


                     role="tabpanel" 


                     aria-labelledby="list-shipping"> 


                    <div> 


                          <input type="text" 


                               placeholder="City"> 


                      </div> 


                    <div> 


                          <input type="text" 


                               placeholder="State"> 


                      </div> 


                    <div> 


                          <input type="text" 


                               placeholder="Pincode"> 


                      </div> 


                    <div> 


                          <input type="text" 


                               placeholder="Address"> 


                      </div> 


                </div> 


                <div class="tab-pane fade"


                     id="payment" 


                     role="tabpanel" 


                     aria-labelledby="list-payment"> 


                    <div> 


                          <input type="text"


                               placeholder="Card Number"> 


                      </div> 


                    <div> 


                          <input type="text"


                               placeholder="Expiry Date"> 


                      </div> 


                </div> 


                <div class="tab-pane fade" 


                     id="order" 


                     role="tabpanel"


                     aria-labelledby="list-order"> 


                    <button class="btn btn-success"> 


                          Order 


                      </button> 


                </div> 


            </div> 


        </div> 


    </div> 


  


    <button id="prev" 


            type="button" 


            class="btn btn-dark mt-4"> 


          Previous 


      </button> 


    <button id="next"


            type="button"


            class="btn btn-dark mt-4"> 


          Next 


      </button> 


  


  


    <script> 


        let tabs = []; 


        let i = 0; 


        document.querySelectorAll("a").forEach(elem => { 


            tabs.push(new bootstrap.Tab(elem)) 


        }) 


        document.querySelector("#next").addEventListener("click", (e) => { 


            if (i == 3) return; 


            i += 1; 


            tabs[i].show() 


        }) 


        document.querySelector("#prev").addEventListener("click", (e) => { 


            if (i == 0) return; 


            i -= 1; 


            tabs[i].show() 


        }) 


    </script> 


</body> 


  


</html>



















                        







                        










Output:


gfg-bootstrapListGroup-form
Example 2: Bootstrap 5 List group constructor() Method


Reference: https://getbootstrap.com/docs/5.0/components/list-group/#constructor


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 List group getInstance() Method
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 List group show() Method
            

        
    
        
            

                Bootstrap 5 List group getInstance() Method
            

        
    
        
            

                Bootstrap 5 List group dispose() Method
            

        
    
        
            

                Bootstrap 5 List group getOrCreateInstance() Method
            

        
    
        
            

                List group in bootstrap with examples
            

        
    
        
            

                How to add active class on click event in custom list group in Bootstrap 4 ?
            

        
    
        
            

                Bootstrap 5 List group Fade effect
            

        
    
        
            

                How to add badge to list group in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 List group Numbered
            

        
    
        
            

                Bootstrap 5 List group Flush
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        mycodenotein                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox