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.

9 thoughts on “Resolve jQueryUI and Twitter Bootstrap Button Conflict

  1. Aleksei

    Thank you! I was about desperate and wasted, spent half of my day trying to figure out what was the problem causing so much pain.

    Reply
  2. Joao

    Hi,
    I am having the same issue ( I think).
    All works fine without the bootstrap, but when I activave a joomla template that uses the bootstap some buttons don´t work with the mouse click ( and they import the template css into it).

    Where should I look and add your code?

    Joao

    Reply
  3. Michael Chaney

    I arrived at this conflict after solving a Bootstrap issue where initializing a specific bootstrap js component (tooltip) wouldn’t work until I re-arrange the order of my javascript loading…(jquery, jquery UI, bootstrap.js). Bootstrap tooltips worked, but jquery ui button styles got hosed. Highly annoying, but good look on the fix.

    Reply

Leave a Reply to admin Cancel reply

Your email address will not be published. Required fields are marked *

*