Data Attributes System

Learn how Bootstrap uses data-* attributes to control JavaScript components

1 Basic Toggle Attribute

The data-bs-toggle and data-bs-target attributes create interactivity without custom JavaScript.

HTML:

<button 
  data-bs-toggle="collapse"
  data-bs-target="#demo1">
  Toggle
</button>

It worked! This content was revealed using only data attributes. No custom JavaScript needed.

💡 Key Concept: Bootstrap automatically initializes components when it detects data-bs-* attributes.

Use classes instead of IDs to target multiple elements simultaneously.

HTML:

<button 
  data-bs-toggle="collapse"
  data-bs-target=".multi-target">
  Toggle Multiple
</button>

Panel 1

Panel 2

Additional data attributes control component behavior. Use data-bs-{option-name} format.

Collapse Options:

data-bs-parent="#accordion"
data-bs-toggle="true"

The data-bs-parent attribute ensures only one item is open at a time.

This closes automatically when you open another.

The data-bs-dismiss attribute lets users close components like alerts and modals.

Dismissible Alert! Click the close button on the right.

Try again! This is another alert you can close.

Alert HTML:

<div class="alert alert-warning alert-dismissible">
  Alert content
  <button data-bs-dismiss="alert"></button>
</div>

Name: Maria Garcia

Email: maria@example.com

Member since: 2024

Email Notifications

Dark Mode

data-bs-toggle: Defines the component type (collapse, modal, dropdown, etc.)
data-bs-target: Specifies which element to control (use # for IDs, . for classes)
data-bs-dismiss: Allows closing components like alerts and modals
data-bs-parent: Creates groups where only one item can be active
No JavaScript required: All this interactivity works without custom code!