Bootstrap 5: Change from data- to data-bs- Attributes
In Bootstrap 5, there’s a change in how data attributes are named.
In Bootstrap 4 and earlier, to activate a modal, you’d use:
<button -toggle="modal" -target="#myModal">Open Modal</button>
But in Bootstrap 5, it’s been updated to:
<button -bs-toggle="modal" -bs-target="#myModal">Open Modal</button>
Why the Shift?
The core reason behind this change is clarity and prevention of potential conflicts:
- 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.
- 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.
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.