Cage match: Sitecore 8.1 versus Bootstrap 3

Our company’s website is currently running on Sitecore 8.1 Update-1, and we use a combination of industry-standard tooling, like JQuery, Boostrap, Grunt, Sass, and the like. Sitecore, for the most part, plays nice with these tools. But there are occasions where they simply collide. One such place is in the Experience Editor navigation bar.

Take, for instance, what we see in a fresh install of 8.1 Update-1, and then with Bootstrap 3.2.0 included on the page:

Clean 8.1 Update-1 Install


After deploying our code, including Bootstrap 3.2.0

This is unacceptable for our Content Editors. It’s simply unusable – the link hit area is all messed up, besides being visually confusing. Thanks to a collaboration with @guitarrich, we have a repository for the CSS that fixes this issue for various combinations of Sitecore and Bootstrap versions. If you have this or a similar issue, take a look at the github repo, and see if there is a fix for your situation:

This is a brand new github repo as of this post, so there are only 2 scenarios thus far, but feel free to issue a pull request with your fix for other combinations. From the comments on the Slack channel, I know there are people using the Foundation framework as well who see similar issues, so hopefully this is helpful to the community, since Sitecore won’t support bugs related to third-party tools.