1 Download
Welcome! This is a live preview of jQuery UI Bootstrap - a project we started to bring the beauty of Twitter Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.
Download stable (v0.5) Download Latest (dev)
2 Start with jQuery UI Bootstrap
Compatibility jQuery UI and Twitter Bootstrap
In their original forms, jQuery UI and Bootstrap can't coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.
Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.
Components
jQuery UI | Twitter Bootstrap |
---|---|
UI Button(button()) | Button(button()) |
UI Tooltip(tooltip()) | Tooltip + popover(tooltip()) |
Once the components are identified, we choose what we want to use. The demonstration with jQuery UI Bootstrap uses all the components of jQuery UI.
jQuery UI components
Widget | jQuery UI | Twitter Bootstrap |
---|---|---|
Button | ||
Tooltip |
Twitter Bootstrap components
With this scheme we fully use the potential of jQuery UI but it could very well exclude jQuery UI tooltip to use tooltip + Bootstrap popover.
Widget | jQuery UI | Twitter Bootstrap |
---|---|---|
Button | ||
Tooltip + popover |
Selecting which jQuery UI and Bootstrap components and styles we wish to use, we can benefit from the advantages of both projects. jQuery UI Bootstrap also provides Bootstrap theming for a number of third-party jQuery UI widgets such as the Wijmo menu widget and others.
Note: if you want to use Font awesome with Twitter Bootstrap, you must exclude the CSS component icons.
The Awesome Font documentation indicates this information perfectly.
3 Installation
- Download the archive
- Unzip archive
- Locate the folder custom-theme inside the css folder inside the newly uncompressed file
- Move that folder inside the
css
directory of the website for which you want to use jquery-ui-bootstrap - Include the appropriate .css files in the layout of your website