Over a million developers have joined DZone.

jQuery Bootstrap 0.2 Brings 'Beauty' to Widgets

DZone's Guide to

jQuery Bootstrap 0.2 Brings 'Beauty' to Widgets

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Addy Osmani has been a big fan of the Twitter Bootstrap since its release in 2011, and ended up using it as a base for a number of projects.

Today, he is happy to announce the release of jQuery UI Bootstrap 0.2, something he developed while working on a recent project for AOL. While trying to develop new user-interfaces, Osmani wondered if there was a way he could harness the power of the Twitter Bootstrap to create jQuery widgets.

For Osmani, there were two things missing from Twitter's Bootstrap:

  • 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.
-- Addy Osmani

This Bootstrap targets jQuery 1.8.16 and is compatible with all modern browsers and even offers a 'lo-res' version for users stuck with older browsers.  It provides several fixes including:

  • Compatibility updates for IE8 and IE9
  • Input files no longer break Twitter Bootstrap grids
  • Inputs of type text/password get uniformly styled
  • Fixes to the modal dialog close buttons
  • Tabs now appear visually closer to those in Bootstrap

Osmani's Bootstrap also brings a wealth of new features like:

A Bootstrap-style Wijmo Menu


Supporting the Filament Group File Input plugin

Osmani also released a LESS version of the patched Bootstrap CSS files used in the theme that users have been patiently awaiting.

So what's next for this jQuery Bootstrap?  Osmani is currently working to support more third-party plugins such as Tagit, jqGrid, Plupload, as well as improved support for widgets customized using the jQuery UI.

A live preview of the jQuery UI Bootstrap is online and is available for download.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}