jQuery UI Bootstrap

jQuery UI Bootstrap

A Bootstrap-themed kickstart for jQuery UI widgets (v0.5).

1. Download

Welcome! This is a live preview of the new jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's 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. It's still a work-in-progress, but I hope you find it useful. Issues and pull requests are always welcome - @addyosmani

Download stable (v0.23) Download Latest (dev)

2. Documentation

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

Button

Button default



Anchor 

  1.  
  2. // Button
  3.  
  4. $('button').button();
  5.  
  6. // Anchors, Submit
  7.  
  8. $('.button').button();
  9.  

Button set



  1.  
  2. // Buttonset
  3.  
  4. $('#radioset').buttonset();
  5.  
  6. $("#format").buttonset();
  7.  

Simple toolbar

  1.  
  2. //Toolbar
  3.  
  4. $("#play, #shuffle").button();
  5.  
  6. $("#repeat").buttonset();
  7.  

Accordion

  1.  
  2. // Accordion
  3.  
  4. $("#menu-collapse").accordion({
  5.  
  6.     header: "h3"
  7.  
  8. });
  9.  

Dialog

Open Dialog   Open Modal Dialog 

  1.  
  2. // Dialog Link
  3.  
  4. $('#dialog_link').click(function () {
  5.  
  6.     $('#dialog_simple').dialog('open');
  7.  
  8.     return false;
  9.  
  10. });
  11.  
  12.  
  13.  
  14. // Modal Link
  15.  
  16. $('#modal_link').click(function () {
  17.  
  18.     $('#dialog-message').dialog('open');
  19.  
  20.     return false;
  21.  
  22. });
  23.  
  24.  
  25.  
  26. // Dialog Simple
  27.  
  28. $('#dialog_simple').dialog({
  29.  
  30.     autoOpen: false,
  31.  
  32.     width: 600,
  33.  
  34.     buttons: {
  35.  
  36.         "Ok": function () {
  37.  
  38.             $(this).dialog("close");
  39.  
  40.         },
  41.  
  42.         "Cancel": function () {
  43.  
  44.             $(this).dialog("close");
  45.  
  46.         }
  47.  
  48.     }
  49.  
  50. });
  51.  
  52.  
  53.  
  54. // Dialog message
  55.  
  56. $("#dialog-message").dialog({
  57.  
  58.     autoOpen: false,
  59.  
  60.     modal: true,
  61.  
  62.     buttons: {
  63.  
  64.         Ok: function () {
  65.  
  66.             $(this).dialog("close");
  67.  
  68.         }
  69.  
  70.     }
  71.  
  72. });
  73.  

Tabs

Simple tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1.  
  2. // Simple tabs
  3.  
  4. $('#tabs').tabs();
  5.  

Simple tabs adding and removing.

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

  1.  
  2. // Simple tabs adding and removing
  3.  
  4. $('#tabs2').tabs();
  5.  
  6.  
  7.  
  8. // Dynamic tabs
  9.  
  10. var tabTitle = $( "#tab_title" ),
  11.  
  12.     tabContent = $( "#tab_content" ),
  13.  
  14.     tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
  15.  
  16.     tabCounter = 2;
  17.  
  18.  
  19.  
  20. var tabs = $( "#tabs2" ).tabs();
  21.  
  22.  
  23.  
  24. // modal dialog init: custom buttons and a "close" callback reseting the form inside
  25.  
  26. var dialog = $( "#dialog2" ).dialog({
  27.  
  28.     autoOpen: false,
  29.  
  30.     modal: true,
  31.  
  32.     buttons: {
  33.  
  34.         Add: function() {
  35.  
  36.             addTab();
  37.  
  38.             $( this ).dialog( "close" );
  39.  
  40.         },
  41.  
  42.         Cancel: function() {
  43.  
  44.             $( this ).dialog( "close" );
  45.  
  46.         }
  47.  
  48.     },
  49.  
  50.     close: function() {
  51.  
  52.         form[ 0 ].reset();
  53.  
  54.     }
  55.  
  56. });
  57.  
  58.  
  59.  
  60. // addTab form: calls addTab function on submit and closes the dialog
  61.  
  62. var form = dialog.find( "form" ).submit(function( event ) {
  63.  
  64.     addTab();
  65.  
  66.     dialog.dialog( "close" );
  67.  
  68.     event.preventDefault();
  69.  
  70. });
  71.  
  72.  
  73.  
  74. // actual addTab function: adds new tab using the input from the form above
  75.  
  76. function addTab() {
  77.  
  78.     var label = tabTitle.val() || "Tab " + tabCounter,
  79.  
  80.         id = "tabs-" + tabCounter,
  81.  
  82.         li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
  83.  
  84.         tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
  85.  
  86.  
  87.  
  88.     tabs.find( ".ui-tabs-nav" ).append( li );
  89.  
  90.     tabs.append( "<div id='" + id + "></div><p>" + tabContentHtml + "</p></div>" );
  91.  
  92.     tabs.tabs( "refresh" );
  93.  
  94.     tabCounter++;
  95.  
  96. }
  97.  
  98.  
  99.  
  100. // addTab button: just opens the dialog
  101.  
  102. $( "#add_tab" )
  103.  
  104.     .button()
  105.  
  106.     .click(function() {
  107.  
  108.         dialog.dialog( "open" );
  109.  
  110.     });
  111.  
  112.  
  113.  
  114. // close icon: removing the tab on click
  115.  
  116. $( "#tabs2" ).on( "click",'span.ui-icon-close', function() {
  117.  
  118.  
  119.  
  120.     var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  121.  
  122.     $( "#" + panelId ).remove();
  123.  
  124.     tabs.tabs( "refresh" );
  125.  
  126. });
  127.  

Combination examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget diam nec urna hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquam ligula non nulla cursus volutpat. Aliquam malesuada felis nec turpis auctor interdum. Cras et lobortis dolor. Nam sodales, dolor eu cursus faucibus, justo leo vestibulum turpis, id malesuada erat ipsum et leo. Integer id aliquam augue. Proin quis risus magna.

Change 
  1.  
  2. //Combination examples (tabs) and open dialog
  3.  
  4. $('#sampleButton').on('click', function(event){
  5.  
  6.     event.preventDefault();
  7.  
  8.     $('#dialog_simple').dialog({
  9.  
  10.         autoOpen: true,
  11.  
  12.         modal: true,
  13.  
  14.         width: 600,
  15.  
  16.         buttons: {
  17.  
  18.             "Save": function () {
  19.  
  20.                 $(this).dialog("close");
  21.  
  22.             },
  23.  
  24.             "Cancel": function () {
  25.  
  26.                 $(this).dialog("close");
  27.  
  28.             }
  29.  
  30.         }
  31.  
  32.     });
  33.  
  34. });
  35.  

Overlay and Shadow Classes

Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.

Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.

Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.

Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Highlight / Error

Highlight

Hey! Sample ui-state-highlight style.

Error

Alert: Sample ui-state-error style.

Default

Hello: Sample ui-state-default style.

Datepicker

PrevNext
August 2025
SuMoTuWeThFrSa
     12
3456789
10111213141516
17181920212223
24252627282930
31      
  1.  
  2. // Datepicker
  3.  
  4. $('#datepicker').datepicker({
  5.  
  6.     inline: true
  7.  
  8. });
  9.  

Slider

Horizontal Slider

  1.  
  2. // Horizontal slider
  3.  
  4. $('#h-slider').slider({
  5.  
  6.     range: true,
  7.  
  8.     values: [17, 67]
  9.  
  10. });
  11.  

Vertical Slider

Master volume 

  1.  
  2. // Vertical slider
  3.  
  4. $("#v-slider").slider({
  5.  
  6.     orientation: "vertical",
  7.  
  8.     range: "min",
  9.  
  10.     min: 0,
  11.  
  12.     max: 100,
  13.  
  14.     value: 60,
  15.  
  16.     slide: function (event, ui) {
  17.  
  18.         $("#amount").val(ui.value);
  19.  
  20.     }
  21.  
  22. });
  23.  
  24. $("#amount").val($("#v-slider").slider("value"));
  25.  

Autocomplete

  1.  
  2. // Autocomplete
  3.  
  4. var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
  5.  
  6.  
  7.  
  8. $("#tags").autocomplete({
  9.  
  10.     source: availableTags
  11.  
  12. });
  13.  

Menu

  1.  
  2. //####### Menu
  3.  
  4. $("#menu").menu();
  5.  

Spinner

Spinner

  1.  
  2. //####### Spinner
  3.  
  4.  
  5.  
  6. var spinner = $( "#spinner" ).spinner();
  7.  
  8.  
  9.  
  10. $( "#disable" ).click(function() {
  11.  
  12.     if ( spinner.spinner( "option", "disabled" ) ) {
  13.  
  14.         spinner.spinner( "enable" );
  15.  
  16.     } else {
  17.  
  18.         spinner.spinner( "disable" );
  19.  
  20.     }
  21.  
  22. });
  23.  
  24. $( "#destroy" ).click(function() {
  25.  
  26.     if ( spinner.data( "ui-spinner" ) ) {
  27.  
  28.         spinner.spinner( "destroy" );
  29.  
  30.     } else {
  31.  
  32.         spinner.spinner();
  33.  
  34.     }
  35.  
  36. });
  37.  
  38. $( "#getvalue" ).click(function() {
  39.  
  40.     alert( spinner.spinner( "value" ) );
  41.  
  42. });
  43.  
  44. $( "#setvalue" ).click(function() {
  45.  
  46.     spinner.spinner( "value", 5 );
  47.  
  48. });
  49.  
  50.  
  51.  

Icons

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.

But as it's not a native tooltip, it can be styled. Any themes built with ThemeRoller will also style tooltips accordingly.

Tooltips are also useful for form elements, to show some additional information in the context of each field.

Hover the field to see the tooltip.

  1.  
  2. //####### Tooltip
  3.  
  4. $( "#tooltip" ).tooltip();
  5.