Can I use Twitter Bootstrap and jQuery UI at the same time

Question

I am using Twitter Bootstrap and I want to use an  auto-suggest  which is not available in Bootstrap  whereas jQuery UI has its own methods for auto-suggest   Can I use both  Will it overload the bandwidth

User · Answer

I have site developed using jquery ui  I just tried to plug in bootstrap for future development and styling but it breaks virtually everything   So No they are not compatible

User · Answer

In my limited experience I am coming across issues as well  It appears that JQuery elements  such as buttons  can be styled using bootstrap CSS  However  I am experiencing issues having created a JQuery UI tab and wanting to lock a bootstrap only input  using the input-append class  to the bottom of each tab  only the first sits correctly  So  JQuery tabs   Bootstrap buttons   probably not

User · Answer

For future reference  since this is google s top answer ATM   to prevent jQuery UI from overriding bootstrap s or your custom style  you need to create a custom download and select the no-theme theme  That will only include jQuery UI s resets  and not overload bootstrap s style for various elements   While we re at it  some jQuery UI components  such as datepicker  have a native bootstrap implementation  The native bootstrap implementations will use the bootstrap css classes  attributes and layouts  so should have a better integration with the rest of the framework

User · Answer

just to update this  bootstrap v2 no longer conflicts with jquery ui  https   github com twbs bootstrap issues 171  Edit  as  Freshblood there are a few things that still conflict  However  as originally posted Twitter suggests that they are working on this and it largely works  specially compared to v1

User · Answer

Yes you can use both  js bootstrap from twitter is a collection of jquery plugins  There shohuldn t be any conflict with jQuery UI    Regarding bandwidth overload  it really depends on how you handle the requests to load all of your js files  if you really dont want to make multiple requests to the server to request for each file  just append them together and minimize  Or you probably can get rid of some js bootstrap plugins you dont need  it is very modular

User · Answer

Although this question specifically mentions jQuery-UI autosuggest feature  the question title is more general  does bootstrap 3 work with jQuery UI  I was having trouble with the jQUI datepicker  pop-up calendar  feature  I solved the datepicker problem and hope the solution will help with other jQUI BS issues   I had a difficult time today getting the latest jQueryUI  ver 1 12 1  datepicker to work with bootstrap 3 3 7  What was happening is that the calendar would display but it would not close   Turned out to be a version problem with jQUI and BS  I was using the latest version of Bootstrap  and found that I had to downgrade to these versions of jQUI and jQuery   jQueryUI - 1 9 2  tested - works  jQuery - 1 9 1 or 2 1 4  tested - both work  Other vers may work  but these work   Bootstrap 3 3 7  tested - works   Because I wanted to use a custom theme  I also built a custom download of jQUI  removed a few things like all the interactions  dialog  progressbar and a few effects I don t use  -- and made sure to select  Cupertino  at the bottom as my theme   I installed them thus    lt head gt     etc     lt link rel  stylesheet  href  css font-awesome min css  gt   lt link rel  stylesheet  href  css cupertino jquery-ui-1 9 2 custom min css  gt   lt link rel  stylesheet  href  css bootstrap-3 3 7 min css  gt    lt  --  lt script src  js jquery-1 9 1 min js  gt  lt  script gt  -- gt   lt script src  js jquery-2 1 4 min js  gt  lt  script gt   lt script src  js jquery-ui-1 9 2 custom min js  gt  lt  script gt   lt script src  js bootstrap-3 3 7 min js  gt  lt  script gt     etc     lt  head gt    For those interested  the CSS folder looks like this    css    - bootstrap-3 3 7 min css   - font-awesome min css   - style css   -  cupertino        - jquery-ui-1 9 2 custom min css        images            - ui-bg diagonals-thick 90 eeeeee 40x40 png           - ui-bg glass 100 e4f1fb 1x400 png           - ui-bg glass 50 3baae3 1x400 png           - ui-bg glass 80 d7ebf9 1x400 png           - ui-bg highlight-hard 100 f2f5f7 1x100 png           - etc  8 more files that were in the downloaded jQUI zip file

User · Answer

Kendo UI has a nice bootstrap theme here and a set of web UI comparable to jquery-UI  They also have an open source version that works nicely with the theme

User · Answer

Bootstrap still doesnt work with Jquery UI  for example the modal Bootstrap has nice style but as a framework with Twitter behind isnt that good

User · Answer

Check out jquery-ui-bootstrap   From the README      Twitter s Bootstrap was one of my favorite projects to come out of   2011  but having used it regularly it left me wanting two things       The ability to work side-by-side with jQuery UI  something which   caused a number of widgets to break visually  The ability to theme   jQuery UI widgets using Bootstrap styles  Whilst I love jQuery UI  I    like others  find some of the current themes to look a little dated    My hope is that this theme provides a decent alternative for others   that feel the same  To clarify  this project doesn t aim or intend to   replace Twitter Bootstrap  It merely provides a jQuery UI-compatible   theme inspired by Bootstrap s design  It also provides a version of   Bootstrap CSS with a few  minor  sections commented out which enable   the theme to work along-side it

User · Answer

The data-role  none  is the key to make them work together  You can apply to the elements you want bootstrap to touch but jquery mobile to ignore  like this  input type  text  class  form-control  placeholder  Search  data-role  none

User · Answer

If don t store it locally and use the link that they provide you might have an improved performance The client might have the scripts already cached in some cases  As for the case of jQueryUI i would recommend not loading it until necessary   They are both minimized  but you can fire up the console and look at the network tab and see how long it takes for it to load  once it is initially downloaded it will be cached so you shouldn t worry afterwards My conclusion would be yes use them both but use a CDN

User · Answer

Because this is the top result on google on jquery ui and bootstrap js I decided to add this as community wiki   I am using    Bootstrap v3 2 0 jquery-2 1 0 jquery-ui-1 10 3   and somehow when I include bootstrap js it disables the dropdown of the jquery ui autocomplete   my three workarounds    exclude bootstrap js or more to typeahead lib move from bootstrap js to bootstrap min js  strange  but worked for me

User · Answer

If you re running into javascript namespace collisions  you can use Bootstrap s noConflict   function make it cede functionality to jQuery UI

[jquery-ui] Can I use Twitter Bootstrap and jQuery UI at the same time?

Examples related to jquery-ui

Examples related to twitter-bootstrap