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

Asked 28/1, 2012 at 20:11 Answered 14/3, 2017 at 0:30

108

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?

Equitable answered 28/1, 2012 at 20:11 Comment(3)

jQuery UI is 6.6k (minified and gzipped) so unless your bandwidth is measured in kb, this won't be a problem. – Dietz 6/12, 2012 at 21:18

Things have changed since I posted this question. Now, there are a lot of Bootstrap plugins which are good enough to replace the existing jQuery UI plugins. Now, I use Bootstrap with plugins made for bootstrap. – Equitable 16/1, 2013 at 9:5

Why not using twitter's typeahead (twitter.github.io/typeahead.js/examples) for auto suggest? – Crandale 28/6, 2013 at 14:15

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.

Classis answered 28/1, 2012 at 20:14 Comment(0)

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.

Lontson answered 29/3, 2012 at 17:5 Comment(7)

Are you really sure about that ? Still i see a problem with jquery datepicker – Smashing 12/5, 2012 at 15:59

I would suggest you take the bootstrap v2 and jquery ui and create an empty test page to verify that it's not your code. I haven't had a problem since the new version – Lontson 12/5, 2012 at 19:47

Please check this jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year . As you can see with this settings datepicker contains dropdownbox element so bootstrap already override all input elements. But there is no any problem if you dont use datepicker with these settings. – Smashing 12/5, 2012 at 21:25

Any widget contains input element will conflict with twitter bootstrap css styles. – Smashing 12/5, 2012 at 21:29

well it's been working for me while I haven't used that specific example. I was also going by what Twitter said them self. I image could could change jquery ui's or the bootstrap css to be more specific. – Lontson 13/5, 2012 at 12:20

Negatory. Bootstrap's button functions don't work with jQuery UI as they both define a button() method. – Dietz 6/12, 2012 at 21:8

@Dietz as my edit suggests, it's a vast improvement over v1 and I recognize that there at still some issues. They've also fixed most of the style conflicts – Lontson 6/12, 2012 at 21:28

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.

Rika answered 8/12, 2013 at 22:36 Comment(2)

I don't see a no-theme theme here: jqueryui.com/themeroller. Did I miss it or is it no longer there? – Brott 16/12, 2014 at 23:7

jqueryui.com/download is the link you should use. Scroll to the bottom and select "No Theme" in the list. – Rika 17/12, 2014 at 16:8

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.

Melena answered 2/9, 2013 at 4:32 Comment(0)

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.

Adenine answered 20/8, 2012 at 21:11 Comment(0)

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

Tweeter answered 31/10, 2013 at 21:24 Comment(0)

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:

<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">

<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>

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)

Concrescence answered 14/3, 2017 at 0:30 Comment(0)

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

Flourish answered 28/1, 2012 at 20:16 Comment(0)

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.

Calenture answered 28/1, 2012 at 20:18 Comment(2)

All the JS is properly namespaced, but it's CSS collisions that you need to worry about: if you include a JUI widget in a Bootstrap tab, what takes precedence? – Peipeiffer 11/9, 2012 at 3:54

It's not just jQuery's CSS that looks bad in Bootstrap. Bootstrap makes sweeping CSS changes, often with !important, that I find myself constantly having to override and fix, sometimes with hacky code. I hate Bootstrap and discourage its use, at least until it stops mucking with elements that don't use Bootstrap's classes. (This isn't the original designer's fault—I doubt Twitter's original devs expected what they were working on to become a popular library.) – Sandusky 21/11, 2015 at 4:3

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.

Worrell answered 20/2, 2014 at 21:9 Comment(0)

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)

Surtout answered 28/1, 2012 at 20:11 Comment(1)

combination of jquery ui bootstrap also disable tooltip and datepicker. – Damales 6/12, 2014 at 12:34

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.

Finbur answered 13/1, 2013 at 9:20 Comment(0)

-3

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"

Handbreadth answered 31/10, 2013 at 15:30 Comment(1)

this question was about bootstrap and jquery-ui, not jquery mobile – Nita 8/1, 2016 at 17:20

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags