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:

<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-toggle=<span class="hljs-string">"modal"</span> <span class="hljs-meta">data</span>-target=<span class="hljs-string">"#myModal"</span>>Open Modal</<span class="hljs-keyword">button></span>

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

<<span class="hljs-keyword">button </span><span class="hljs-meta">data</span>-<span class="hljs-keyword">bs-toggle="modal" </span><span class="hljs-meta">data</span>-<span class="hljs-keyword">bs-target="#myModal">Open </span>Modal</<span class="hljs-keyword">button></span>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *