Welcome! This is a live preview of jQuery UI Bootstrap - a project we started to bring the beauty of TwitterBootstrap 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)

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

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

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.

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.

1. Download the archive
2. Unzip archive
3. Locate the foldercustom-theme inside the css folder inside the newly uncompressed file
4. Move that folder inside the

   css

   directory of the website for which you want to use jquery-ui-bootstrap
5. Include the appropriate .css files in the layout of your website