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.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >
Bootstrap 5 List group constructor() Method
</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous" />
< script src =
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:
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.
<!doctype html> < html lang = "en" >
< head >
< title >
Bootstrap 5 List group constructor() Method
</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin = "anonymous" >
< script src =
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:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#constructor