Bootstrap 5: Change from data- to data-bs- Attributes

In Bootstrap 5, there’s a change in how data attributes are named.

Example:

In Bootstrap 4 and earlier, to activate a modal, you’d use:

<button data-toggle="modal" data-target="#myModal">Open Modal</button>

But in Bootstrap 5, it’s been updated to:

<button data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>

Why the Shift?

The core reason behind this change is clarity and prevention of potential conflicts:

1. Namespace Clarity: The data-bs- prefix clearly indicates that the attribute is Bootstrap-specific. This helps developers instantly recognize and differentiate Bootstrap attributes from custom ones or those from other libraries.
2. Avoid Conflicts: As projects grow and more libraries or custom scripts are added, there’s an increased risk of different scripts using the same data- attributes. By prefixing Bootstrap attributes with bs-, the chance of these collisions is reduced.

Personal Note:

When updating to Bootstrap 5, I had an issue with a modal not working due to still using the old data- attribute. It’s a small change you need to be aware of when migrating or starting new projects with Bootstrap 5.