Sunday, April 3, 2022

Navbar not working with Bootstrap 5.1.3 and Jquery 3.6.1

Resolution

If using newer version of 5.1.3 from older Bootstrap, make sure the parameters are correct. There is a change from data-toggle to data-bs-toggle and data-target to data-bs-target. Jquery version should not matter. It does make a difference in the older version.

Root Cause Analysis (RCA)

I do not use javascript much so I jumped from page to page. It is quite frustrating troubleshooting javascript with VS Community 2022 in a Blazor Project. Each item was somewhat new so it was difficult to figure which one was causing the issue.

The source of my problem was that the first navbar used an older version of bootstrap. After finding the new code sample, I did not copy directly and attempted to modify the missing parts. This did not work, then I had to look up what version of bootstrap came with VS 2022. Eventually, my problem was picked from each step.

Reference

https://getbootstrap.com/docs/5.1/components/navbar/

No comments:

Post a Comment