Added Bootstrap specific classes,

and fixed a few bugs here and there...

IPython/html/static/widgets/js/widget.js

@@ -503,15 +503,54 b' define(["widgets/js/manager",'
             }
         },
 
-        update_classes: function (old_classes, new_classes) {
-            // Update the DOM classes applied to the topmost element.
+        update_classes: function (old_classes, new_classes, $el) {
+            // Update the DOM classes applied to an element, default to this.$el.
+            if ($el===undefined) {
+                $el = this.$el;
+            }
             this.do_diff(old_classes, new_classes, function(removed) {
-                this.$el.removeClass(removed);
+                $el.removeClass(removed);
             }, function(added) {
-                this.$el.addClass(added);
+                $el.addClass(added);
             });
         },
 
+        update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
+            // Update the DOM classes applied to the widget based on a single
+            // trait's value.
+            //
+            // Given a trait value classes map, this function automatically
+            // handles applying the appropriate classes to the widget element
+            // and removing classes that are no longer valid.
+            //
+            // Parameters
+            // ----------
+            // class_map: dictionary
+            //  Dictionary of trait values to class lists.
+            //  Example:
+            //      {
+            //          success: ['alert', 'alert-success'],
+            //          info: ['alert', 'alert-info'],
+            //          warning: ['alert', 'alert-warning'],
+            //          danger: ['alert', 'alert-danger']
+            //      };
+            // trait_name: string
+            //  Name of the trait to check the value of.
+            // previous_trait_value: optional string, default ''
+            //  Last trait value
+            // $el: optional jQuery element handle, defaults to this.$el
+            //  Element that the classes are applied to.
+            var key = previous_trait_value;
+            if (key === undefined) {
+                key = this.model.previous(trait_name);
+            }
+            var old_classes = class_map[key] ? class_map[key] : [];
+            key = this.model.get(trait_name);
+            var new_classes = class_map[key] ? class_map[key] : [];
+
+            this.update_classes(old_classes, new_classes, $el || this.$el);
+        },
+        
         _get_selector_element: function (selector) {
             // Get the elements via the css selector.
             var elements;

IPython/html/static/widgets/js/widget_bool.js

@@ -77,9 +77,25 b' define(['
                     that.handle_click();
                 }));
 
+            this.model.on('change:button_style', function(model, value) {
+                this.update_button_style();
+            }, this);
+            this.update_button_style('');
+
             this.update(); // Set defaults.
         },
         
+        update_button_style: function(previous_trait_value) {
+            var class_map = {
+                primary: ['btn-primary'],
+                success: ['btn-success'],
+                info: ['btn-info'],
+                warning: ['btn-warning'],
+                danger: ['btn-danger']
+            };
+            this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
+        },
+        
         update : function(options){
             // Update the contents of this view
             //

IPython/html/static/widgets/js/widget_box.js

@@ -20,6 +20,9 b' define(['
             this.model.on('change:overflow_y', function(model, value) {
                 this.update_overflow_y();
             }, this);
+            this.model.on('change:box_style', function(model, value) {
+                this.update_box_style();
+            }, this);
         },
 
         update_attr: function(name, value) {
@@ -34,6 +37,7 b' define(['
             this.update_children([], this.model.get('children'));
             this.update_overflow_x();
             this.update_overflow_y();
+            this.update_box_style('');
         },
 
         update_overflow_x: function() {
@@ -46,6 +50,16 b' define(['
             this.$box.css('overflow-y', this.model.get('overflow_y'));
         },
         
+        update_box_style: function(previous_trait_value) {
+            var class_map = {
+                success: ['alert', 'alert-success'],
+                info: ['alert', 'alert-info'],
+                warning: ['alert', 'alert-warning'],
+                danger: ['alert', 'alert-danger']
+            };
+            this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box);
+        },
+        
         update_children: function(old_list, new_list) {
             // Called when the children list changes.
             this.do_diff(old_list, new_list, 

IPython/html/static/widgets/js/widget_button.js

@@ -13,6 +13,11 b' define(['
             this.setElement($("<button />")
                 .addClass('btn btn-default'));
 
+            this.model.on('change:button_style', function(model, value) {
+                this.update_button_style();
+            }, this);
+            this.update_button_style('');
+
             this.update(); // Set defaults.
         },
         
@@ -37,6 +42,17 b' define(['
             return ButtonView.__super__.update.apply(this);
         },
 
+        update_button_style: function(previous_trait_value) {
+            var class_map = {
+                primary: ['btn-primary'],
+                success: ['btn-success'],
+                info: ['btn-info'],
+                warning: ['btn-warning'],
+                danger: ['btn-danger']
+            };
+            this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
+        },
+
         events: {
             // Dictionary of events and their handlers.
             'click': '_handle_click',

IPython/html/static/widgets/js/widget_int.js

@@ -346,7 +346,10 b' define(['
 
         update_attr: function(name, value) {
             // Set a css attr of the widget view.
-            if (name.substring(0, 6) == 'border' || name == 'width' || name == 'height' || name == 'background') {
+            if (name.substring(0, 6) == 'border' || name == 'width' || 
+                name == 'height' || name == 'background' || name == 'margin' || 
+                name == 'padding') {
+                
                 this.$progress.css(name, value);
             } else if (name == 'color') {                
                 this.$bar.css('background', value);

IPython/html/static/widgets/js/widget_selection.js

@@ -37,6 +37,11 b' define(['
                 .addClass('dropdown-menu')
                 .appendTo(this.$buttongroup);
             
+            this.model.on('change:button_style', function(model, value) {
+                this.update_button_style();
+            }, this);
+            this.update_button_style('');
+            
             // Set defaults.
             this.update();
         },
@@ -96,6 +101,18 b' define(['
             return DropdownView.__super__.update.apply(this);
         },
 
+        update_button_style: function(previous_trait_value) {
+            var class_map = {
+                primary: ['btn-primary'],
+                success: ['btn-success'],
+                info: ['btn-info'],
+                warning: ['btn-warning'],
+                danger: ['btn-danger']
+            };
+            this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel);
+            this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton);
+        },
+
         update_attr: function(name, value) {
             // Set a css attr of the widget view.
             if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') {
@@ -103,9 +120,13 b' define(['
                 this.$dropbutton.css(name, value);
                 this.$droplist.css(name, value);
             } else if (name == 'width') {
-                var width = value - this.$dropbutton.width();
-                this.$droplist.css(name, width);
-                this.$droplabel.css(name, width);
+                this.$droplist.css(name, value);
+                this.$droplabel.css(name, value);
+            } else if (name == 'padding') {
+                this.$droplist.css(name, value);
+                this.$buttongroup.css(name, value);
+            } else if (name == 'margin') {
+                this.$buttongroup.css(name, value);
             } else if (name == 'height') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
@@ -239,6 +260,11 b' define(['
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);
+
+            this.model.on('change:button_style', function(model, value) {
+                this.update_button_style();
+            }, this);
+            this.update_button_style('');
             this.update();
         },
         
@@ -269,7 +295,7 b' define(['
                             .appendTo(that.$buttongroup)
                             .attr('data-value', item)
                             .on('click', $.proxy(that.handle_click, that));
-                        that._update_button_style($item_element);
+                        that.update_style_traits($item_element);
                     }
                     if (that.model.get('value_name') == item) {
                         $item_element.addClass('active');
@@ -310,23 +336,36 b' define(['
         update_attr: function(name, value) {
             // Set a css attr of the widget view.
             this._css_state[name] = value;
-            this._update_button_style();
+            this.update_style_traits();
         },
 
-        _update_button_style: function(button) {
+        update_style_traits: function(button) {
             for (var name in this._css_state) {
-                if (this._css_state.hasOwnProperty(name) && name != 'width') {
+                if (this._css_state.hasOwnProperty(name)) {
+                    if (name == 'margin') {
+                        this.$buttongroup.css(name, this._css_state[name]);
+                    } else if (name != 'width') {
                     if (button) {
                         button.css(name, this._css_state[name]);
                     } else {
-                        this.$buttongroup.find('button').each(function(i, obj) {
-                            $(obj).css(name, this._css_state[name]);
-                        });
+                            this.$buttongroup.find('button').css(name, this._css_state[name]);
+                        }
                     }   
                 }
             }
         },
 
+        update_button_style: function(previous_trait_value) {
+            var class_map = {
+                primary: ['btn-primary'],
+                success: ['btn-success'],
+                info: ['btn-info'],
+                warning: ['btn-warning'],
+                danger: ['btn-danger']
+            };
+            this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button'));
+        },
+
         handle_click: function (e) {
             // Handle when a value is clicked.
             

IPython/html/widgets/widget_bool.py

@@ -37,6 +37,11 b' class ToggleButton(_Bool):'
     
     _view_name = Unicode('ToggleButtonView', sync=True)
 
+    button_style = CaselessStrEnum(
+        values=['primary', 'success', 'info', 'warning', 'danger', ''], 
+        default_value='', allow_none=True, sync=True, help="""Use a
+        predefined styling for the button.""")
+
 
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')

IPython/html/widgets/widget_box.py

@@ -29,6 +29,11 b' class Box(DOMWidget):'
         default_value='', allow_none=False, sync=True, help="""Specifies what
         happens to content that is too large for the rendered region.""")
 
+    box_style = CaselessStrEnum(
+        values=['success', 'info', 'warning', 'danger', ''], 
+        default_value='', allow_none=True, sync=True, help="""Use a
+        predefined styling for the box.""")
+
     def __init__(self, children = (), **kwargs):
         kwargs['children'] = children
         super(Box, self).__init__(**kwargs)

IPython/html/widgets/widget_button.py

@@ -32,6 +32,11 b' class Button(DOMWidget):'
     description = Unicode('', help="Description of the button (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
     
+    button_style = CaselessStrEnum(
+        values=['primary', 'success', 'info', 'warning', 'danger', ''], 
+        default_value='', allow_none=True, sync=True, help="""Use a
+        predefined styling for the button.""")
+    
     def __init__(self, **kwargs):
         """Constructor"""
         super(Button, self).__init__(**kwargs)

IPython/html/widgets/widget_selection.py

@@ -115,6 +115,11 b' class ToggleButtons(_Selection):'
     button can be toggled at any point in time.""" 
     _view_name = Unicode('ToggleButtonsView', sync=True)
 
+    button_style = CaselessStrEnum(
+        values=['primary', 'success', 'info', 'warning', 'danger', ''], 
+        default_value='', allow_none=True, sync=True, help="""Use a
+        predefined styling for the buttons.""")
+
 
 class Dropdown(_Selection):
     """Allows you to select a single item from a dropdown."""