Make jQuery UI and Bootstrap 2 work together in MVC template
In the VS2013 preview MVC5 template, we included Bootstrap and jQuery UI together in the same project. However, some themes of jQuery UI (1.8.24 in the project template) is conflicting with Bootstrap (version 2.3.1 in the project template), especially for button. We have seen at least one such question in our forum.
Let’s create a test project first to see the effect.
1. File->New Project, choose Templates->Web->ASP.NET Web Application, select MVC, click Create Project
2. Right click project and choose “Manage NuGet Packages”, go to “Updates” tab, and update “jQuery UI (Combined Library)” to the latest version (1.10.3 at the time of writing)
3. Change the App_Start/BundleConig.cs file to include the jQuery UI js file.
4. Change the Views/Shared/_Layout.cshtml file to include the style and script bundles. Note we are letting jQuery UI script to overwrite bootstrap. (Will show difference later)
5. Add the following test code to the end of Views/Home/Index.cshtml file
6. Run it, you can see the fonts are very different between the “BootStrap and JqueryUI” elements and “BootStrap only” element.
Run it, you can see “anchor JQueryUI only” does not get changed to button.
“jQuery UI Bootstrap” can be used to make step 6 results a little bit better.
8. Revert step 7, Go to http://addyosmani.github.io/jquery-ui-bootstrap/ and download the latest archive, unzip the archive, locate “css/custom-theme” folder. Drag and drop images folder and latest jquery-ui-*.custom.css and jquery.ui.*.ie.css files to the project Content folder in solution explorer.
9. Add the following bundle in App_Start/BundleConig.cs
10. Change the CSS include in Views/Shared/_Layout.cshtml:
11. Run it.
12. Do the same as step 7, we will get the exact same output as step 7, which is:
From the above experiment, you can decide which combination of jQueryUI, BootStrap you’d like to use in your web project.
I also tried Bootstrap 3 RC1 with jQuery UI 1.10.3 in a sample website and the result is the same: