Bootstrap 5 List group Using data Attributes

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.

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.

Output:

👁 Bootstrap 5 List group Using data attributes

Reference: https://getbootstrap.com/docs/5.2/components/list-group/#using-data-attributes