jQuery UI and Bootstrap theme collission

Question

I have both, jQuery UI theme and a Bootstrap 2.1 css linked to my page. In cases I use Bootstrap-styled buttons, no text is displayed on them. It turned out that it was these lines in jQuery UI's theme that are causing the problem:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }

When removed in a debug tool, 1em no longer casts the button text to be so small that it is invisible. I have made sure the Bootstrap.css in likned later in the stylesheets list so it has more value, but the jQuery UI's defeiniciton is more specific. How can I preven jQuery UI css data to influence my bootstrap buttons?

Answer 1

Buttons, in particular, are a problem. jQuery UI's button implementation conflicts with Bootstrap's. If you want to use them in their standard form, you can add the following lines to your page, prior to the widget initializations, to eliminate the conflict:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn

I've only tested this in the simple cases, but I presume it works in general. The approach is described here with appropriate reference links:

http://www.dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/