jQuery UI + Bootstrap

The jQuery UI Bootstrap adapter is a very small js file ( 473 bytes gzipped ) which changes the jQuery UI Classes presets to use the Twitter Bootstrap theme

Requires jQuery UI 1.12+

Buttons

The button widget

Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-button": "btn btn-default",
"ui-button-icon": "glyphicon"

Button colors

Button Sizes

Buttons With Icons

Selectmenu

The selectmenu widget

Duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-selectmenu-button": "btn btn-default dropdown-toggle",
"ui-selectmenu-open": "open"

In addition the following option defaults are also changed

"icons": {
	"button": "caret"
}
"width": "auto"

Selectmenu Colors

Selectmenu Icons

Split Button

The splitbutton

Combines a regular button and a dropdown into a single button. the split button is not a widget in jQuery UI on its own but instead is just a combination of a button widget and a selectmenu widget in a container.

API Documentation

The Bootstrap adapter makes no changes specificly for the split button this is encluded as an example.


Split Buttons

Tabs

The tabs widget

A single content area with multiple panels, each associated with a header in a list.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-tabs-nav": "nav nav-tabs",
"ui-tabs-panel": "tab-pane",
"ui-tabs-active": "active"

Default Tabs

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Collapsible tabs

Click this tab again to close the content pane.

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Click this tab again to close the content pane.

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Click this tab again to close the content pane.

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Vertical tabs

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Accordion

The accordion widget

Displays collapsible content panels for presenting information in a limited amount of space.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-accordion": "panel panel-default",
"ui-accordion-content": "panel-collapse collapse",
"ui-accordion-content-active": "in",
"ui-accordion-header": "panel-heading"

Notice: The accordion widget due to substantial differences in markup requires some extra javascript to function please view source on examples


Default Accordion

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 3

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Accordion With Custom Icons

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 3

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Tooltip

The tooltip widget

Customizable, themeable tooltips, replacing native tooltips

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-tooltip": "tooltip top fade in",
"ui-tooltip-content": "tooltip-inner"

Default Tooltip

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

Custom Tooltip Content

St. Stephen's Cathedral

Vienna, Austria

St. Stephen's Cathedral

Tower Bridge

London, England

Tower Bridge

All images are part of Wikimedia Commons and are licensed under CC BY-SA 3.0 by the copyright holder.

Dialog

The dialog widget

Open content in an interactive overlay.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-dialog": "modal-content",
"ui-dialog-titlebar": "modal-header",
"ui-dialog-title": "modal-title",
"ui-dialog-titlebar-close": "close",
"ui-dialog-content": "modal-body",
"ui-dialog-buttonpane": "modal-footer"

Default Dialog

I'm a dialog!

Animated Dialog

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Progressbar

The progressbar widget

Display status of a determinate or indeterminate process.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-progressbar": "progress",
"ui-progressbar-value": "progress-bar"

Default Progressbar

Custom label and callback

Loading...

Menu

The Menu widget

Themeable menu with mouse and keyboard interactions for navigation.

API Documentation

The Bootstrap adapter makes the fllowing change to the classes option defaults:

"ui-menu": "list-group",
"ui-menu-icons": "",
"ui-menu-icon": "glyphicon glyphicon-chevron-right",
"ui-menu-item": "list-group-item",
"ui-menu-divider": "",
"ui-menu-item-wrapper": ""

Default Menu

Menu with icons