Bootstrap 5 List group Using data Attributes
Last Updated :
15 Dec, 2022
Bootstrap 5 List group Using data attributes allows you to add your own information to tags. The data-* attributes can be used to define our own custom data attributes. It is used to store custom data in private on the page or application. In the List group, using data attributes is the sub-topic of JavaScript behavior, so by using data attributes in the list group you can activate a list group navigation without writing any JavaScript by simply specifying data-bs-toggle=” list” or on an element. Use these data attributes on .list-group-item.
Bootstrap 5 List group Using data attributes Class: There is no pre-defined class for this data-bs-toggle attribute plays the main role.
Bootstrap 5 List group Using data attributes:
- data-bs-toggle: This attribute is used to make the list group active, the value of this attribute is list.
Syntax:
<div class="list-group">
<a class="list-group-item" data-bs-toggle="list" href="#">...</a>
...
</div>
Below examples illustrate the Bootstrap 5 List group Using data attributes:
Example 1: The following example demonstrates the use of a List group Using data attributes in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<h2 class="text-success">GeeksforGeeks</h2>
<h3><b>Learning list group data attributes</b></h3>
<div role="tabpanel">
<div class="list-group" id="myList" role="tablist">
<a class=
"list-group-item list-group-item-action active text-danger"
data-bs-toggle="list" href="#html" role="tab">
<b>HTML</b>
</a>
<a class=
"list-group-item list-group-item-action bg-orange text-primary"
data-bs-toggle="list" href="#javascript" role="tab">
<b>JAVASCRIPT</b>
</a>
<a class=
"list-group-item list-group-item-action bg-warning text-success"
data-bs-toggle="list" href="#CSS" role="tab">
<b>CSS</b>
</a>
<a class=
"list-group-item list-group-item-action bg-dark text-danger"
data-bs-toggle="list" href="#Python" role="tab">
<b>PYTHON</b>
</a>
</div>
</div>
</center>
</body>
</html>
|
Output:
Bootstrap 5 List group Using data attributes
Example 2: The following examples demonstrate the use of a List group Using data attributes in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="mx-4">
<h2 class="text-success">GeeksforGeeks</h2>
<h3>Learning List group using data attributes</h3>
<div class="tab-content">
<ul>
<li>
<div class="menu-panel text-warning" id="python">
<b>Python</b>
</div>
</li>
<li>
<div class="menu-panel text-primary" id="java">
<b>JAVA</b>
</div>
</li>
<li>
<div class="menu-panel text-secondary" id="javascript">
<b>Javascript</b>
</div>
</li>
<li>
<div class="menu-panel text-info" id="PHP" >
<b>PHP</b>
</div>
</li>
</ul>
</div>
</body>
</html>
|
Output:
Bootstrap 5 List group Using data attributes
Reference: https://getbootstrap.com/docs/5.2/components/list-group/#using-data-attributes
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...