I've been wanting to migrate from Bootstrap 4 to Bootstrap 5. One reason for making the jump is that BS5 drops its dependency on JQuery - often the center of security issues.
I thought little of upgrading aside from swapping out CDN JS/CSS files. Upon upgrading, though, my site broke. Dropdowns stopped working, the layout got wonky.
I reverted the commit and checked Bootstrap's excellent doc on migrating to BS5. BS5 introduced many breaking changes.
Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use
data-bs-toggle
instead ofdata-toggle
.
After refactoring, everything works again 🤞