Tag Archives: jquery bootstrap javascript

Resolve jQueryUI and Twitter Bootstrap Button Conflict

I’ve gone through many design iterations with my side project, LoanGrid.netjQueryUI has been my widget library of choice, but I’ve recently begun experiments integrating Twitter Bootstrap with my designs. I was humming right along until I started using the jQuery Spinner element. Suddenly my styles weren’t showing up on the spinner arrow buttons.

A little research turned up a known issue when using jQueryUI and Twitter Bootstrap together. There’s a conflict between jQueryUI and Twitter Bootstrap buttons because they both define $.fn.button().  And as we can see from the jQuery Spinner API docs, our spinner depends on the button element.

A workaround is here:

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

Thanks to user fat for posting the workaround code!

I haven’t run into any other conflicts, but I’m only using a small sliver of the widget features.  However, there appear to be more conflicts between the libraries, which is the impetus for Addy Osmani’s (admittedly slow-moving) jQuery UI Bootstrap project.