Bootstrap 5 is a new updated version of Bootstrap, which is one of the popular frameworks for building a responsive, mobile-first website. It is completely free to download and use. List groups are a flexible and powerful component for displaying a series of content. That can be used to modify and extend them to support just about any content within. There are some classes to make a list group .list-group class is used with <ul> element and .list-group-item is used with <li> element. But, In this article, we create a list-group by using some JavaScript functions and methods.
Bootstrap 5 List Groups Via JavaScript by using some classes and Methods
-
forEach
:forEach
is an array method in JavaScript that executes a provided function once for each element in an array. -
document.createElement
: This method is used in the Document Object Model (DOM) that creates a new HTML element. -
setAttribute
: This is a method in the DOM that can set the value of an attribute on the specified element. -
textContent
: It is a property used for representing the text content of an element and its descendants. -
classList.add
: This method in DOM is used to add one or more CSS classes to the class attribute of an element. -
appendChild
:appendChild
method is used to add a node as the last child of a specified parent node.
Example 1:
<!doctype html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< h2 class = "text-success text-center m-3" >
GeeksforGeeks
</ h2 >
< div class = "list-group m-5 mt-0 text-center" id = "myTab" role = "tablist" >
</ div >
< script >
let listItems = [
"Data Structure", "Java",
"CSS", "Python", "Database"
];
let listContainer = document.getElementById("myTab");
listItems.forEach(function (itemText) {
let listItem = document.createElement("a");
listItem.className =
"list-group-item list-group-item-action";
listItem.setAttribute("data-bs-toggle", "list");
listItem.setAttribute("role", "tab");
listItem.textContent = itemText;
listContainer.appendChild(listItem);
});
</ script >
<!-- Bootstrap Bundle with Popper -->
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, the current item is highlighted with an active list-item.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< h2 class = "text-success text-center m-3" >
GeeksforGeeks
</ h2 >
< div class = "list-group m-5 mt-0 text-center" id = "myTab" role = "tablist" >
</ div >
< script >
let listItems = [
"Data Structure", "Java",
"CSS", "Python", "Database"
];
let listContainer = document.getElementById("myTab");
listItems.forEach(function (itemText, index) {
let listItem = document.createElement("a");
listItem.className =
"list-group-item list-group-item-action";
listItem.setAttribute("data-bs-toggle", "list");
listItem.setAttribute("role", "tab");
listItem.textContent = itemText;
// Add 'active' class to the first item
if (index === 0) {
listItem.classList.add("active");
}
listContainer.appendChild(listItem);
});
</ script >
<!-- Bootstrap Bundle with Popper -->
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output:
Example 3: In this example, the badge property is used in javascript which can add badges inside the list of groups
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1" />
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" />
</ head >
< body >
< h2 class = "text-success text-center m-3" >
GeeksforGeeks
</ h2 >
< div class = "list-group m-5 mt-0 text-center" id = "myTab" role = "tablist" >
</ div >
< script >
var listItems = [
{ text: "Data Structure", badge: "New" },
{ text: "Java", badge: "Hot" },
{ text: "CSS", badge: "Updated" },
{ text: "Python", badge: "Popular" },
{ text: "Database", badge: "Featured" },
];
var listContainer = document.getElementById("myTab");
listItems.forEach(function (item) {
var listItem = document.createElement("a");
listItem.className =
"list-group-item list-group-item-action
d-flex justify-content-between
align-items-center";
listItem.setAttribute("data-bs-toggle", "list");
listItem.setAttribute("role", "tab");
listItem.textContent = item.text;
var badge = document.createElement("span");
badge.className = "badge bg-primary";
badge.textContent = item.badge;
listItem.appendChild(badge);
listContainer.appendChild(listItem);
});
</ script >
<!-- Bootstrap Bundle with Popper -->
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output:
Example 4: In this example, Contextual property is used that enables the visual representation or styling of corresponding each item of the list.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1" />
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" />
</ head >
< body >
< h2 class = "text-success text-center m-3" >
GeeksforGeeks
</ h2 >
< div class = "list-group m-5 mt-0 text-center" id = "myTab" role = "tablist" >
</ div >
< script >
var listItems = [
{ text: "Data Structure", context: "primary" },
{ text: "Java", context: "success" },
{ text: "CSS", context: "warning" },
{ text: "Python", context: "info" },
{ text: "Database", context: "danger" },
];
var listContainer = document.getElementById("myTab");
listItems.forEach(function (item) {
var listItem = document.createElement("a");
listItem.className =
"list-group-item list-group-item-action
d-flex justify-content-between
align-items-center";
listItem.setAttribute("data-bs-toggle", "list");
listItem.setAttribute("role", "tab");
listItem.textContent = item.text;
var contextClass = "text-" + item.context;
listItem.classList.add(contextClass);
listContainer.appendChild(listItem);
});
</ script >
<!-- Bootstrap Bundle with Popper -->
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/