Initializing interactive components

In this section, we will see how we can initialize interactive components in two different ways. First, we will see how we can do it with data attributes in the HTML, which is the default way, which you might have already been using. Then, we will see how we can do it with JavaScript instead. We can initialize most of the interactive components that come with Bootstrap 5 using data attributes and without adding any extra JavaScript code ourselves, while some of them we must initialize with our own JavaScript.

Initializing interactive components using data attributes

We can initialize most of the interactive components that come with Bootstrap 5 using data attributes and without adding any extra JavaScript code ourselves. For most components, we use the data-bs-toggle data attribute, with the value being the name of the component, like so:

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="button...