jQuery UI Bootstrap

jQuery UI Bootstrap

A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).

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)

This theme's support for more third-party widgets may improve over-time, based on requests and the popularity of the widgets.

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
Select custom jQuery UI components (eg exclude 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

  1. Download the archive
  2. Unzip archive
  3. Locate the folder custom-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