From 0f3ee3e1aff6901befabf38dd84cfa1f3d2ab344 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 1 Nov 2015 12:39:20 -0500
Subject: [PATCH 01/10] [removed] bootstrap mixin

---
 .babelrc                            |   3 +-
 .eslintrc                           |  13 +-
 docs/generate-metadata.js           |  61 +++++++-
 docs/src/ComponentsPage.js          |  19 +--
 docs/src/PropTable.js               |   2 +-
 docs/src/defaultPropDescriptions.js |   7 +
 package.json                        |   4 +-
 src/Alert.js                        |  17 +--
 src/Badge.js                        |   7 +-
 src/BootstrapMixin.js               |  55 --------
 src/Button.js                       |  23 +--
 src/ButtonGroup.js                  |  20 +--
 src/ButtonToolbar.js                |  12 +-
 src/Carousel.js                     |  25 ++--
 src/CarouselItem.js                 |   6 +-
 src/CollapsibleNav.js               |   2 -
 src/Dropdown.js                     |  14 +-
 src/DropdownButton.js               |  11 +-
 src/DropdownMenu.js                 |   9 +-
 src/Label.js                        |  19 +--
 src/ListGroupItem.js                |  70 +++++-----
 src/MenuItem.js                     |   9 +-
 src/Modal.js                        |   6 +-
 src/ModalBody.js                    |   7 +-
 src/ModalDialog.js                  |  18 +--
 src/ModalFooter.js                  |   7 +-
 src/ModalHeader.js                  |  10 +-
 src/ModalTitle.js                   |  10 +-
 src/Nav.js                          | 141 +++++++++----------
 src/NavItem.js                      |   5 +-
 src/Navbar.js                       |  42 +++---
 src/Pagination.js                   |   7 +-
 src/PaginationButton.js             |   5 +-
 src/Panel.js                        |  29 ++--
 src/PanelGroup.js                   |  14 +-
 src/Popover.js                      |  16 ++-
 src/ProgressBar.js                  | 121 ++++++++--------
 src/SplitButton.js                  |   6 +-
 src/SubNav.js                       |   3 +-
 src/Tab.js                          |   7 +-
 src/Tabs.js                         |   6 +-
 src/Thumbnail.js                    |  13 +-
 src/Tooltip.js                      | 146 +++++++++----------
 src/Well.js                         |  19 +--
 src/index.js                        |   5 +-
 src/styleMaps.js                    |  67 ++++-----
 src/utils/bootstrapUtils.js         | 152 ++++++++++++++++++++
 test/BootstrapMixinSpec.js          | 124 -----------------
 test/ButtonGroupSpec.js             |   2 +-
 test/ModalSpec.js                   |   9 +-
 test/ProgressBarSpec.js             |  34 ++---
 test/helpers.js                     |   2 +-
 test/utils/bootstrapUtilsSpec.js    | 209 ++++++++++++++++++++++++++++
 53 files changed, 955 insertions(+), 695 deletions(-)
 create mode 100644 docs/src/defaultPropDescriptions.js
 delete mode 100644 src/BootstrapMixin.js
 create mode 100644 src/utils/bootstrapUtils.js
 delete mode 100644 test/BootstrapMixinSpec.js
 create mode 100644 test/utils/bootstrapUtilsSpec.js

diff --git a/.babelrc b/.babelrc
index 4d5093a16f..f17b0189e9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,6 @@
 {
   "stage": 1,
   "optional": ["runtime"],
-  "loose": ["all"]
+  "loose": ["all"],
+  "plugins": ["object-assign"]
 }
diff --git a/.eslintrc b/.eslintrc
index 203ab3dd84..13cea79b2e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,6 +17,7 @@
     "comma-dangle": 0,
     "eqeqeq": [2, "allow-null"],
     "id-length": 0,
+    "no-eq-null": 0,
     "one-var": [2, { "initialized": "never" }],
     "prefer-const": 0,
     "no-param-reassign": 0,
@@ -24,7 +25,15 @@
     "babel/object-shorthand": 2,
     "react/jsx-boolean-value": 2,
     "react/jsx-no-duplicate-props": 2,
-    "react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
-    "react/sort-comp": 0
+    "react/sort-comp": 0,
+    "react/prop-types": [2, { "ignore": [
+        "children",
+        "className",
+        "style",
+        "bsStyle",
+        "bsClass",
+        "bsSize"
+        ]
+    }],
   }
 }
diff --git a/docs/generate-metadata.js b/docs/generate-metadata.js
index 4341b94d58..96c9a3723e 100644
--- a/docs/generate-metadata.js
+++ b/docs/generate-metadata.js
@@ -3,6 +3,7 @@ import glob from 'glob';
 import fsp from 'fs-promise';
 import promisify from '../tools/promisify';
 import marked from 'marked';
+import defaultDescriptions from './src/defaultPropDescriptions';
 
 marked.setOptions({
   xhtml: true
@@ -18,6 +19,7 @@ let cleanDoclets = desc => {
 
 let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
 
+let quote = str => str && `'${str}'`;
 
 let isLiteral = str => (/^('|")/).test(str.trim());
 
@@ -26,10 +28,11 @@ let isLiteral = str => (/^('|")/).test(str.trim());
  *
  * @param  {ComponentMetadata|PropMetadata} obj
  */
-function parseDoclets(obj) {
-  obj.doclets = metadata.parseDoclets(obj.desc || '') || {};
-  obj.desc = cleanDoclets(obj.desc || '');
-  obj.descHtml = marked(obj.desc || '');
+function parseDoclets(obj, propName) {
+  let desc = obj.desc || defaultDescriptions[propName] || '';
+  obj.doclets = metadata.parseDoclets(desc) || {};
+  obj.desc = cleanDoclets(desc);
+  obj.descHtml = marked(desc);
 }
 
 /**
@@ -61,7 +64,7 @@ function applyPropDoclets(props, propName) {
 
   // Use @required to mark a prop as required
   // useful for custom propTypes where there isn't a `.isRequired` addon
-  if ( doclets.required) {
+  if (doclets.required) {
     prop.required = true;
   }
 
@@ -71,12 +74,45 @@ function applyPropDoclets(props, propName) {
   }
 }
 
+function addBootstrapPropTypes(Component, componentData) {
+  let propTypes = Component.propTypes || {};
+  let defaultProps = Component.defaultProps || {};
+
+  function bsPropInfo(propName) {
+    let props = componentData.props;
+    let prop = propTypes[propName];
+
+    if (prop && !props[propName]) {
+      let values = prop._values || [];
+
+      props[propName] = {
+        desc: '',
+        defaultValue: quote(defaultProps[propName]),
+        type: {
+          name: 'enum',
+          value: values.map( v => `"${v}"`),
+        }
+      };
+    }
+  }
+
+  bsPropInfo('bsStyle');
+  bsPropInfo('bsSize');
+
+  if (propTypes.bsClass) {
+    componentData.props.bsClass = {
+      desc: '',
+      defaultValue: quote(defaultProps.bsClass),
+      type: { name: 'string' }
+    };
+  }
+}
 
 export default function generate(destination, options = { mixins: true, inferComponent: true }) {
   return globp(__dirname + '/../src/**/*.js') // eslint-disable-line no-path-concat
     .then( files => {
       let results = files.map(
-        filename => fsp.readFile(filename).then(content => metadata(content, options)) );
+        filename => fsp.readFile(filename).then(content => metadata(content, options)));
 
       return Promise.all(results)
         .then( data => {
@@ -84,14 +120,25 @@ export default function generate(destination, options = { mixins: true, inferCom
 
           data.forEach(components => {
             Object.keys(components).forEach(key => {
+              let Component;
+
+              try {
+                // require the actual component to inspect props we can only get a runtime
+                Component = require('../src/' + key);
+              } catch (e) {} //eslint-disable-line
+
               const component = components[key];
 
+              if (Component) {
+                addBootstrapPropTypes(Component, component);
+              }
+
               parseDoclets(component);
 
               Object.keys(component.props).forEach( propName => {
                 const prop = component.props[propName];
 
-                parseDoclets(prop);
+                parseDoclets(prop, propName);
                 applyPropDoclets(component.props, propName);
               });
             });
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 79dbbf1a79..bab62c6ead 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -225,16 +225,17 @@ const ComponentsPage = React.createClass({
                   <h1 className="page-header"><Anchor id="menu-item">Menu Item</Anchor> <small> MenuItem</small></h1>
                   <p>This is a component used in other components (see <a href="buttons">Buttons</a>, <a href="#navbars">Navbars</a>).</p>
                   <p>It supports the basic anchor properties <code>href</code>, <code>target</code>, <code>title</code>.</p>
-                  <p>It also supports different properties of the normal Bootstrap MenuItem.
-                    <ul>
-                      <li><code>header</code>: To add a header label to sections</li>
-                      <li><code>divider</code>: Adds an horizontal divider between sections</li>
-                      <li><code>disabled</code>: shows the item as disabled, and prevents the onclick</li>
-                      <li><code>eventKey</code>: passed to the callback</li>
-                      <li><code>onSelect</code>: a callback that is called when the user clicks the item.</li>
-                    </ul>
-                  <p>The callback is called with the following arguments: <code>eventKey</code>, <code>href</code> and <code>target</code></p>
+                  <p>
+                    It also supports different properties of the normal Bootstrap MenuItem.
                   </p>
+                  <ul>
+                    <li><code>header</code>: To add a header label to sections</li>
+                    <li><code>divider</code>: Adds an horizontal divider between sections</li>
+                    <li><code>disabled</code>: shows the item as disabled, and prevents the onclick</li>
+                    <li><code>eventKey</code>: passed to the callback</li>
+                    <li><code>onSelect</code>: a callback that is called when the user clicks the item.</li>
+                  </ul>
+                  <p>The callback is called with the following arguments: <code>eventKey</code>, <code>href</code> and <code>target</code></p>
                   <ReactPlayground codeText={Samples.MenuItem} />
 
                   <h3><Anchor id="menu-item-props">Props</Anchor></h3>
diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
index 0ab6b57743..fb82a6bf56 100644
--- a/docs/src/PropTable.js
+++ b/docs/src/PropTable.js
@@ -45,7 +45,7 @@ const PropTable = React.createClass({
   render() {
     let propsData = this.propsData;
 
-    if ( !Object.keys(propsData).length) {
+    if (!Object.keys(propsData).length) {
       return <span/>;
     }
 
diff --git a/docs/src/defaultPropDescriptions.js b/docs/src/defaultPropDescriptions.js
new file mode 100644
index 0000000000..92f647f3d6
--- /dev/null
+++ b/docs/src/defaultPropDescriptions.js
@@ -0,0 +1,7 @@
+
+export default {
+  bsClass: 'Base css class name and prefix for the Component. Generally one should only change `bsClass` ' +
+    'if they are providing new, non bootstrap, css styles for a component.',
+  bsStyle: 'Component visual or contextual style variants.',
+  bsSize: 'Component size variations.'
+};
diff --git a/package.json b/package.json
index 7b57c2b503..1a611d92cb 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "babel-core": "^5.8.25",
     "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
+    "babel-plugin-object-assign": "^1.2.1",
     "bootstrap": "^3.3.5",
     "brfs": "^1.4.1",
     "chai": "^3.3.0",
@@ -116,11 +117,12 @@
     "babel-runtime": "^5.8.25",
     "classnames": "^2.1.5",
     "dom-helpers": "^2.4.0",
+    "invariant": "^2.1.2",
     "keycode": "^2.1.0",
     "lodash-compat": "^3.10.1",
     "react-overlays": "^0.5.0",
-    "uncontrollable": "^3.1.3",
     "react-prop-types": "^0.3.0",
+    "uncontrollable": "^3.1.3",
     "warning": "^2.1.0"
   },
   "release-script": {
diff --git a/src/Alert.js b/src/Alert.js
index f3d35a6a5d..9a58cc313a 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import { State } from './styleMaps';
 
-const Alert = React.createClass({
-  mixins: [BootstrapMixin],
+let Alert = React.createClass({
 
   propTypes: {
     onDismiss: React.PropTypes.func,
@@ -13,8 +13,6 @@ const Alert = React.createClass({
 
   getDefaultProps() {
     return {
-      bsClass: 'alert',
-      bsStyle: 'info',
       closeLabel: 'Close Alert'
     };
   },
@@ -43,10 +41,10 @@ const Alert = React.createClass({
   },
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
     let isDismissable = !!this.props.onDismiss;
 
-    classes['alert-dismissable'] = isDismissable;
+    classes[bootstrapUtils.prefix(this.props, 'dismissable')] = isDismissable;
 
     return (
       <div {...this.props} role="alert" className={classNames(this.props.className, classes)}>
@@ -68,4 +66,7 @@ const Alert = React.createClass({
   }
 });
 
-export default Alert;
+
+export default bsStyles(State.values(), State.INFO,
+  bsClass('alert', Alert)
+);
diff --git a/src/Badge.js b/src/Badge.js
index 618ffa4361..ade955a255 100644
--- a/src/Badge.js
+++ b/src/Badge.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import classNames from 'classnames';
-
+import tbsUtils from './utils/bootstrapUtils';
 
 const Badge = React.createClass({
   propTypes: {
@@ -10,7 +10,8 @@ const Badge = React.createClass({
 
   getDefaultProps() {
     return {
-      pullRight: false
+      pullRight: false,
+      bsClass: 'badge'
     };
   },
 
@@ -24,7 +25,7 @@ const Badge = React.createClass({
   render() {
     let classes = {
       'pull-right': this.props.pullRight,
-      'badge': this.hasContent()
+      [tbsUtils.prefix(this.props)]: this.hasContent()
     };
     return (
       <span
diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
deleted file mode 100644
index acb81afc3e..0000000000
--- a/src/BootstrapMixin.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import styleMaps from './styleMaps';
-import keyOf from 'react-prop-types/lib/keyOf';
-
-const BootstrapMixin = {
-  propTypes: {
-    /**
-     * bootstrap className
-     * @private
-     */
-    bsClass: keyOf(styleMaps.CLASSES),
-    /**
-     * Style variants
-     * @type {("default"|"primary"|"success"|"info"|"warning"|"danger"|"link")}
-     */
-    bsStyle: React.PropTypes.oneOf(styleMaps.STYLES),
-    /**
-     * Size variants
-     * @type {("xsmall"|"small"|"medium"|"large"|"xs"|"sm"|"md"|"lg")}
-     */
-    bsSize: keyOf(styleMaps.SIZES)
-  },
-
-  getBsClassSet() {
-    let classes = {};
-
-    let bsClass = this.props.bsClass && styleMaps.CLASSES[this.props.bsClass];
-    if (bsClass) {
-      classes[bsClass] = true;
-
-      let prefix = bsClass + '-';
-
-      let bsSize = this.props.bsSize && styleMaps.SIZES[this.props.bsSize];
-      if (bsSize) {
-        classes[prefix + bsSize] = true;
-      }
-
-      if (this.props.bsStyle) {
-        if (styleMaps.STYLES.indexOf(this.props.bsStyle) >= 0) {
-          classes[prefix + this.props.bsStyle] = true;
-        } else {
-          classes[this.props.bsStyle] = true;
-        }
-      }
-    }
-
-    return classes;
-  },
-
-  prefixClass(subClass) {
-    return styleMaps.CLASSES[this.props.bsClass] + '-' + subClass;
-  }
-};
-
-export default BootstrapMixin;
diff --git a/src/Button.js b/src/Button.js
index 940cf9d57c..9181253cfb 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
 import elementType from 'react-prop-types/lib/elementType';
 
 const types = ['button', 'reset', 'submit'];
 
-const Button = React.createClass({
-  mixins: [BootstrapMixin],
+import bootstrapUtils, { bsStyles, bsSizes, bsClass } from './utils/bootstrapUtils';
+import { Sizes, State, DEFAULT, PRIMARY, LINK } from './styleMaps';
+
+const ButtonStyles = State.values().concat(DEFAULT, PRIMARY, LINK);
+
+let Button = React.createClass({
 
   propTypes: {
     active: React.PropTypes.bool,
@@ -32,8 +35,6 @@ const Button = React.createClass({
     return {
       active: false,
       block: false,
-      bsClass: 'button',
-      bsStyle: 'default',
       disabled: false,
       navItem: false,
       navDropdown: false
@@ -41,12 +42,14 @@ const Button = React.createClass({
   },
 
   render() {
-    let classes = this.props.navDropdown ? {} : this.getBsClassSet();
+    let classes = this.props.navDropdown ? {} : bootstrapUtils.getClassSet(this.props);
     let renderFuncName;
 
+    let blockClass = bootstrapUtils.prefix(this.props, 'block');
+
     classes = {
       active: this.props.active,
-      'btn-block': this.props.block,
+      [blockClass]: this.props.block,
       ...classes
     };
 
@@ -104,4 +107,8 @@ const Button = React.createClass({
 
 Button.types = types;
 
-export default Button;
+export default bsStyles(ButtonStyles, DEFAULT,
+  bsSizes([Sizes.LARGE, Sizes.SMALL, Sizes.XSMALL],
+    bsClass('btn', Button)
+  )
+);
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
index 533150d060..d727b54ea0 100644
--- a/src/ButtonGroup.js
+++ b/src/ButtonGroup.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsClass } from './utils/bootstrapUtils';
 import all from 'react-prop-types/lib/all';
+import Button from './Button';
 
 const ButtonGroup = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     vertical: React.PropTypes.bool,
@@ -26,18 +26,20 @@ const ButtonGroup = React.createClass({
   getDefaultProps() {
     return {
       block: false,
-      bsClass: 'button-group',
       justified: false,
       vertical: false
     };
   },
 
   render() {
-    let classes = this.getBsClassSet();
-    classes['btn-group'] = !this.props.vertical;
-    classes['btn-group-vertical'] = this.props.vertical;
-    classes['btn-group-justified'] = this.props.justified;
-    classes['btn-block'] = this.props.block;
+    let classes = bootstrapUtils.getClassSet(this.props);
+
+    classes[bootstrapUtils.prefix(this.props)] = !this.props.vertical;
+    classes[bootstrapUtils.prefix(this.props, 'vertical')] = this.props.vertical;
+    classes[bootstrapUtils.prefix(this.props, 'justified')] = this.props.justified;
+
+    // this is annoying, since the class is `btn-block` not `btn-group-block`
+    classes[bootstrapUtils.prefix(Button.defaultProps, 'block')] = this.props.block;
 
     return (
       <div
@@ -49,4 +51,4 @@ const ButtonGroup = React.createClass({
   }
 });
 
-export default ButtonGroup;
+export default bsClass('btn-group', ButtonGroup);
diff --git a/src/ButtonToolbar.js b/src/ButtonToolbar.js
index e4dcb97473..3820766006 100644
--- a/src/ButtonToolbar.js
+++ b/src/ButtonToolbar.js
@@ -1,18 +1,22 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils from './utils/bootstrapUtils';
+import Button from './Button';
 
 const ButtonToolbar = React.createClass({
-  mixins: [BootstrapMixin],
+
+  propTypes: {
+    bsSize: Button.propTypes.bsSize
+  },
 
   getDefaultProps() {
     return {
-      bsClass: 'button-toolbar'
+      bsClass: 'btn-toolbar'
     };
   },
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
 
     return (
       <div
diff --git a/src/Carousel.js b/src/Carousel.js
index 91de363bf7..22566b9417 100644
--- a/src/Carousel.js
+++ b/src/Carousel.js
@@ -1,11 +1,10 @@
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import Glyphicon from './Glyphicon';
+import tbsUtils from './utils/bootstrapUtils';
 
 const Carousel = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     slide: React.PropTypes.bool,
@@ -25,6 +24,7 @@ const Carousel = React.createClass({
 
   getDefaultProps() {
     return {
+      bsClass: 'carousel',
       slide: true,
       interval: 5000,
       pauseOnHover: true,
@@ -141,7 +141,7 @@ const Carousel = React.createClass({
 
   render() {
     let classes = {
-      carousel: true,
+      [tbsUtils.prefix(this.props)]: true,
       slide: this.props.slide
     };
 
@@ -151,8 +151,13 @@ const Carousel = React.createClass({
         className={classNames(this.props.className, classes)}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}>
-        {this.props.indicators ? this.renderIndicators() : null}
-        <div className="carousel-inner" ref="inner">
+        {
+          this.props.indicators ? this.renderIndicators() : null
+        }
+        <div
+          ref="inner"
+          className={tbsUtils.prefix(this.props, 'inner')}
+        >
           {ValidComponentChildren.map(this.props.children, this.renderItem)}
         </div>
         {this.props.controls ? this.renderControls() : null}
@@ -161,16 +166,20 @@ const Carousel = React.createClass({
   },
 
   renderPrev() {
+    let classes = 'left ' + tbsUtils.prefix(this.props, 'control');
+
     return (
-      <a className="left carousel-control" href="#prev" key={0} onClick={this.prev}>
+      <a className={classes} href="#prev" key={0} onClick={this.prev}>
         {this.props.prevIcon}
       </a>
     );
   },
 
   renderNext() {
+    let classes = 'right ' + tbsUtils.prefix(this.props, 'control');
+
     return (
-      <a className="right carousel-control" href="#next" key={1} onClick={this.next}>
+      <a className={classes} href="#next" key={1} onClick={this.next}>
         {this.props.nextIcon}
       </a>
     );
@@ -219,7 +228,7 @@ const Carousel = React.createClass({
       }, this);
 
     return (
-      <ol className="carousel-indicators">
+      <ol className={tbsUtils.prefix(this.props, 'indicators')}>
         {indicators}
       </ol>
     );
diff --git a/src/CarouselItem.js b/src/CarouselItem.js
index 4a3b65fe40..2b5bbbd1fc 100644
--- a/src/CarouselItem.js
+++ b/src/CarouselItem.js
@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import TransitionEvents from './utils/TransitionEvents';
+import tbsUtils from './utils/bootstrapUtils';
 
 const CarouselItem = React.createClass({
   propTypes: {
@@ -23,6 +24,7 @@ const CarouselItem = React.createClass({
 
   getDefaultProps() {
     return {
+      bsStyle: 'carousel',
       active: false,
       animateIn: false,
       animateOut: false
@@ -88,8 +90,10 @@ const CarouselItem = React.createClass({
   },
 
   renderCaption() {
+    let classes = tbsUtils.prefix(this.props, 'caption');
+
     return (
-      <div className="carousel-caption">
+      <div className={classes}>
         {this.props.caption}
       </div>
     );
diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
index 7f704e0d2a..cd71ecf836 100644
--- a/src/CollapsibleNav.js
+++ b/src/CollapsibleNav.js
@@ -1,5 +1,4 @@
 import React, { cloneElement } from 'react';
-import BootstrapMixin from './BootstrapMixin';
 import Collapse from './Collapse';
 import classNames from 'classnames';
 
@@ -7,7 +6,6 @@ import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
 const CollapsibleNav = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     onSelect: React.PropTypes.func,
diff --git a/src/Dropdown.js b/src/Dropdown.js
index cb4ed6cfa9..4e72e8d9a6 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -11,6 +11,7 @@ import elementType from 'react-prop-types/lib/elementType';
 import isRequiredForA11y from 'react-prop-types/lib/isRequiredForA11y';
 import uncontrollable from 'uncontrollable';
 
+import bootstrapUtils from './utils/bootstrapUtils';
 import ButtonGroup from './ButtonGroup';
 import DropdownMenu from './DropdownMenu';
 import DropdownToggle from './DropdownToggle';
@@ -87,12 +88,13 @@ class Dropdown extends React.Component {
     let children = this.extractChildren();
     let Component = this.props.componentClass;
 
-    let props = omit(this.props, ['id', 'role']);
+    let props = omit(this.props, ['id', 'bsClass', 'role']);
+    let className = bootstrapUtils.prefix(this.props);
 
     const rootClasses = {
       open: this.props.open,
       disabled: this.props.disabled,
-      dropdown: !this.props.dropup,
+      [className]: !this.props.dropup,
       dropup: this.props.dropup
     };
 
@@ -204,7 +206,8 @@ class Dropdown extends React.Component {
       ref: 'menu',
       open,
       labelledBy: this.props.id,
-      pullRight: this.props.pullRight
+      pullRight: this.props.pullRight,
+      bsClass: this.props.bsClass
     };
 
     menuProps.onClose = createChainedFunction(
@@ -252,10 +255,13 @@ Dropdown.MENU_ROLE = MENU_ROLE;
 
 Dropdown.defaultProps = {
   componentClass: ButtonGroup,
-  alwaysFocusNextOnOpen: false
+  bsClass: 'dropdown'
 };
 
 Dropdown.propTypes = {
+
+  bsClass: React.PropTypes.string,
+
   /**
    * The menu will open above the dropdown button, instead of below it.
    */
diff --git a/src/DropdownButton.js b/src/DropdownButton.js
index b1298c4952..e0de69b99f 100644
--- a/src/DropdownButton.js
+++ b/src/DropdownButton.js
@@ -1,14 +1,10 @@
 import React from 'react';
-import BootstrapMixin from './BootstrapMixin';
 import Dropdown from './Dropdown';
 import omit from 'lodash-compat/object/omit';
+import Button from './Button';
 
 class DropdownButton extends React.Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     let { title, ...props } = this.props;
 
@@ -28,15 +24,16 @@ class DropdownButton extends React.Component {
 }
 
 DropdownButton.propTypes = {
+  bsStyle: Button.propTypes.bsStyle,
+  bsSize: Button.propTypes.bsSize,
+
   /**
    * When used with the `title` prop, the noCaret option will not render a caret icon, in the toggle element.
    */
   noCaret: React.PropTypes.bool,
-
   title: React.PropTypes.node.isRequired,
 
   ...Dropdown.propTypes,
-  ...BootstrapMixin.propTypes
 };
 
 DropdownButton.defaultProps = {
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index da448faa52..7e7cbaf95c 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,7 +1,9 @@
-import classNames from 'classnames';
 import keycode from 'keycode';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import bootstrapUtils from './utils/bootstrapUtils';
+
 import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -93,8 +95,8 @@ class DropdownMenu extends React.Component {
     });
 
     const classes = {
-      'dropdown-menu': true,
-      'dropdown-menu-right': pullRight
+      [bootstrapUtils.prefix(this.props, 'menu')]: true,
+      [bootstrapUtils.prefix(this.props, 'menu-right')]: pullRight
     };
 
     let list = (
@@ -122,6 +124,7 @@ class DropdownMenu extends React.Component {
 
 DropdownMenu.defaultProps = {
   bsRole: 'menu',
+  bsClass: 'dropdown',
   pullRight: false
 };
 
diff --git a/src/Label.js b/src/Label.js
index 6cbf8839a9..dcf5c4ed3c 100644
--- a/src/Label.js
+++ b/src/Label.js
@@ -1,19 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import { State, DEFAULT, PRIMARY } from './styleMaps';
 
-const Label = React.createClass({
-  mixins: [BootstrapMixin],
-
-  getDefaultProps() {
-    return {
-      bsClass: 'label',
-      bsStyle: 'default'
-    };
-  },
+@bsClass('label')
+@bsStyles(State.values().concat(DEFAULT, PRIMARY), DEFAULT)
+class Label extends React.Component {
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
 
     return (
       <span {...this.props} className={classNames(this.props.className, classes)}>
@@ -21,6 +16,6 @@ const Label = React.createClass({
       </span>
     );
   }
-});
+}
 
 export default Label;
diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
index 221b1de2b6..8403a0b170 100644
--- a/src/ListGroupItem.js
+++ b/src/ListGroupItem.js
@@ -1,30 +1,13 @@
 import React, { cloneElement } from 'react';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import { State } from './styleMaps';
 import classNames from 'classnames';
 
-const ListGroupItem = React.createClass({
-  mixins: [BootstrapMixin],
-
-  propTypes: {
-    bsStyle: React.PropTypes.oneOf(['danger', 'info', 'success', 'warning']),
-    className: React.PropTypes.string,
-    active: React.PropTypes.any,
-    disabled: React.PropTypes.any,
-    header: React.PropTypes.node,
-    listItem: React.PropTypes.bool,
-    onClick: React.PropTypes.func,
-    href: React.PropTypes.string
-  },
-
-  getDefaultProps() {
-    return {
-      bsClass: 'list-group-item',
-      listItem: false
-    };
-  },
+class ListGroupItem extends React.Component {
+
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
 
     classes.active = this.props.active;
     classes.disabled = this.props.disabled;
@@ -36,8 +19,9 @@ const ListGroupItem = React.createClass({
     } else if (this.props.listItem) {
       return this.renderLi(classes);
     }
+
     return this.renderSpan(classes);
-  },
+  }
 
   renderLi(classes) {
     return (
@@ -46,7 +30,7 @@ const ListGroupItem = React.createClass({
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </li>
     );
-  },
+  }
 
   renderAnchor(classes) {
     return (
@@ -57,7 +41,7 @@ const ListGroupItem = React.createClass({
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </a>
     );
-  },
+  }
 
   renderButton(classes) {
     return (
@@ -68,7 +52,7 @@ const ListGroupItem = React.createClass({
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </button>
     );
-  },
+  }
 
   renderSpan(classes) {
     return (
@@ -77,31 +61,53 @@ const ListGroupItem = React.createClass({
         {this.props.header ? this.renderStructuredContent() : this.props.children}
       </span>
     );
-  },
+  }
 
   renderStructuredContent() {
     let header;
+    let headingClass = bootstrapUtils.prefix(this.props, 'heading');
+
     if (React.isValidElement(this.props.header)) {
       header = cloneElement(this.props.header, {
         key: 'header',
-        className: classNames(this.props.header.props.className, 'list-group-item-heading')
+        className: classNames(this.props.header.props.className, headingClass)
       });
     } else {
       header = (
-        <h4 key="header" className="list-group-item-heading">
+        <h4 key="header" className={headingClass}>
           {this.props.header}
         </h4>
       );
     }
 
     let content = (
-      <p key="content" className="list-group-item-text">
+      <p key="content" className={bootstrapUtils.prefix(this.props, 'text')}>
         {this.props.children}
       </p>
     );
 
     return [header, content];
   }
-});
+}
+
+ListGroupItem.propTypes = {
+  className: React.PropTypes.string,
+  active: React.PropTypes.any,
+  disabled: React.PropTypes.any,
+  header: React.PropTypes.node,
+  listItem: React.PropTypes.bool,
+  onClick: React.PropTypes.func,
+  eventKey: React.PropTypes.any,
+  href: React.PropTypes.string,
+  target: React.PropTypes.string
+};
+
+ListGroupItem.defaultTypes = {
+  listItem: false
+};
 
-export default ListGroupItem;
+export default bsStyles(State.values(),
+  bsClass('list-group-item',
+    ListGroupItem
+  )
+);
diff --git a/src/MenuItem.js b/src/MenuItem.js
index 448fb6de6d..084c56f37b 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -1,11 +1,12 @@
 import classnames from 'classnames';
 import React from 'react';
+import bootstrapUtils, { bsClass } from './utils/bootstrapUtils';
 import all from 'react-prop-types/lib/all';
 
 import SafeAnchor from './SafeAnchor';
 import createChainedFunction from './utils/createChainedFunction';
 
-export default class MenuItem extends React.Component {
+class MenuItem extends React.Component {
   constructor(props) {
     super(props);
 
@@ -27,13 +28,15 @@ export default class MenuItem extends React.Component {
   }
 
   render() {
+    let headerClass = bootstrapUtils.prefix(this.props, 'header');
+
     if (this.props.divider) {
       return <li role="separator" className="divider" />;
     }
 
     if (this.props.header) {
       return (
-        <li role="heading" className="dropdown-header">{this.props.children}</li>
+        <li role="heading" className={headerClass}>{this.props.children}</li>
       );
     }
 
@@ -93,3 +96,5 @@ MenuItem.defaultProps = {
   disabled: false,
   header: false
 };
+
+export default bsClass('dropdown', MenuItem);
diff --git a/src/Modal.js b/src/Modal.js
index 8208d5505a..e6a0dd45eb 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import React, {cloneElement} from 'react';
 import ReactDOM from 'react-dom';
 import domUtils from './utils/domUtils';
+import bootstrapUtils from './utils/bootstrapUtils';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import EventListener from './utils/EventListener';
 import createChainedFunction from './utils/createChainedFunction';
@@ -210,8 +211,9 @@ const Modal = React.createClass({
   },
 
   renderBackdrop(modal) {
-    let { animation, bsClass } = this.props;
+    let { animation } = this.props;
     let duration = Modal.BACKDROP_TRANSITION_DURATION;
+    let prefix = bootstrapUtils.prefix(this.props);
 
     // Don't handle clicks for "static" backdrops
     let onClick = this.props.backdrop === true ?
@@ -220,7 +222,7 @@ const Modal = React.createClass({
     let backdrop = (
       <div
         ref="backdrop"
-        className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
+        className={classNames(`${prefix}-backdrop`, { in: this.props.show && !animation })}
         onClick={onClick}/>
     );
 
diff --git a/src/ModalBody.js b/src/ModalBody.js
index 56da974930..33e48c9ab2 100644
--- a/src/ModalBody.js
+++ b/src/ModalBody.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 
 class ModalBody extends React.Component {
   render() {
     return (
       <div
         {...this.props}
-        className={classNames(this.props.className, this.props.modalClassName)}>
+        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'body'))}>
         {this.props.children}
       </div>
     );
@@ -17,11 +18,11 @@ ModalBody.propTypes = {
   /**
    * A css class applied to the Component
    */
-  modalClassName: React.PropTypes.string
+  bsClass: React.PropTypes.string
 };
 
 ModalBody.defaultProps = {
-  modalClassName: 'modal-body'
+  bsClass: 'modal'
 };
 
 
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index 54929a4870..bd2d01ccd3 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -1,10 +1,10 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsSizes } from './utils/bootstrapUtils';
+import { Sizes } from './styleMaps';
 
 const ModalDialog = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     /**
@@ -33,11 +33,11 @@ const ModalDialog = React.createClass({
       display: 'block',
       ...this.props.style
     };
-    let bsClass = this.props.bsClass;
-    let dialogClasses = this.getBsClassSet();
+    let prefix = bootstrapUtils.prefix(this.props);
+    let dialogClasses = bootstrapUtils.getClassSet(this.props);
 
     delete dialogClasses.modal;
-    dialogClasses[`${bsClass}-dialog`] = true;
+    dialogClasses[`${prefix}-dialog`] = true;
 
     return (
       <div
@@ -46,9 +46,9 @@ const ModalDialog = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classNames(this.props.className, bsClass)}>
+        className={classNames(this.props.className, prefix)}>
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className={`${bsClass}-content`} role="document">
+          <div className={`${prefix}-content`} role="document">
             { this.props.children }
           </div>
         </div>
@@ -57,4 +57,6 @@ const ModalDialog = React.createClass({
   }
 });
 
-export default ModalDialog;
+export default bsSizes([Sizes.LARGE, Sizes.SMALL],
+  ModalDialog
+);
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
index feee8d8bf5..235ca6a4a1 100644
--- a/src/ModalFooter.js
+++ b/src/ModalFooter.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 
 class ModalFooter extends React.Component {
   render() {
     return (
       <div
         {...this.props}
-        className={classNames(this.props.className, this.props.modalClassName)}>
+        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'footer'))}>
         {this.props.children}
       </div>
     );
@@ -17,11 +18,11 @@ ModalFooter.propTypes = {
   /**
    * A css class applied to the Component
    */
-  modalClassName: React.PropTypes.string
+  bsClass: React.PropTypes.string
 };
 
 ModalFooter.defaultProps = {
-  modalClassName: 'modal-footer'
+  bsClass: 'modal'
 };
 
 export default ModalFooter;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index de7add8ad2..ee13a2f751 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 
 class ModalHeader extends React.Component {
   render() {
     return (
       <div
         {...this.props}
-        className={classNames(this.props.className, this.props.modalClassName)}>
+        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'header'))}>
         { this.props.closeButton &&
           <button
             type="button"
@@ -33,10 +34,7 @@ ModalHeader.propTypes = {
    */
   'aria-label': React.PropTypes.string,
 
-  /**
-   * A css class applied to the Component
-   */
-  modalClassName: React.PropTypes.string,
+  bsClass: React.PropTypes.string,
 
   /**
    * Specify whether the Component should contain a close button
@@ -52,7 +50,7 @@ ModalHeader.propTypes = {
 
 ModalHeader.defaultProps = {
   'aria-label': 'Close',
-  modalClassName: 'modal-header',
+  bsClass: 'modal',
   closeButton: false
 };
 
diff --git a/src/ModalTitle.js b/src/ModalTitle.js
index 464b6c3fc3..889691c033 100644
--- a/src/ModalTitle.js
+++ b/src/ModalTitle.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 
 class ModalTitle extends React.Component {
   render() {
     return (
       <h4
         {...this.props}
-        className={classNames(this.props.className, this.props.modalClassName)}>
+        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'title'))}>
         { this.props.children }
       </h4>
     );
@@ -14,14 +15,11 @@ class ModalTitle extends React.Component {
 }
 
 ModalTitle.propTypes = {
-  /**
-   * A css class applied to the Component
-   */
-  modalClassName: React.PropTypes.string
+  bsClass: React.PropTypes.string
 };
 
 ModalTitle.defaultProps = {
-  modalClassName: 'modal-title'
+  bsClass: 'modal'
 };
 
 export default ModalTitle;
diff --git a/src/Nav.js b/src/Nav.js
index 776883abfc..2af6305452 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,72 +1,12 @@
-import classNames from 'classnames';
 import React, { cloneElement } from 'react';
+import classNames from 'classnames';
+import Collapse from './Collapse';
 import all from 'react-prop-types/lib/all';
-
+import tbsUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
-import BootstrapMixin from './BootstrapMixin';
-import Collapse from './Collapse';
-
-const Nav = React.createClass({
-  mixins: [BootstrapMixin],
-
-  propTypes: {
-    activeHref: React.PropTypes.string,
-    activeKey: React.PropTypes.any,
-    bsStyle: React.PropTypes.oneOf(['tabs', 'pills']),
-    stacked: React.PropTypes.bool,
-    /**
-     * Make `NavItem`s equal widths on small or larger displays and stacked
-     * otherwise. Not supported for `Nav`s in `Navbar`s.
-     */
-    justified: all(
-      React.PropTypes.bool,
-      ({justified, navbar}) => (
-        justified && navbar ?
-          Error('justified navbar `Nav`s are not supported') : null
-      )
-    ),
-    onSelect: React.PropTypes.func,
-    collapsible: React.PropTypes.bool,
-    /**
-     * CSS classes for the wrapper `nav` element
-     */
-    className: React.PropTypes.string,
-    /**
-     * HTML id for the wrapper `nav` element
-     */
-    id: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
-    ]),
-    /**
-     * CSS classes for the inner `ul` element
-     */
-    ulClassName: React.PropTypes.string,
-    /**
-     * HTML id for the inner `ul` element
-     */
-    ulId: React.PropTypes.string,
-    expanded: React.PropTypes.bool,
-    navbar: React.PropTypes.bool,
-    eventKey: React.PropTypes.any,
-    pullRight: React.PropTypes.bool,
-    right: React.PropTypes.bool
-  },
-
-  getDefaultProps() {
-    return {
-      bsClass: 'nav',
-      collapsible: false,
-      expanded: true,
-      justified: false,
-      navbar: false,
-      pullRight: false,
-      right: false,
-      stacked: false
-    };
-  },
+class Nav extends React.Component {
 
   render() {
     const classes = this.props.collapsible ? 'navbar-collapse' : null;
@@ -82,13 +22,14 @@ const Nav = React.createClass({
         </nav>
       </Collapse>
     );
-  },
+  }
 
   renderUl() {
-    const classes = this.getBsClassSet();
+    const classes = tbsUtils.getClassSet(this.props);
 
-    classes['nav-stacked'] = this.props.stacked;
-    classes['nav-justified'] = this.props.justified;
+    // TODO: need to pass navbar bsClass down...
+    classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
+    classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
     classes['navbar-nav'] = this.props.navbar;
     classes['pull-right'] = this.props.pullRight;
     classes['navbar-right'] = this.props.right;
@@ -100,10 +41,10 @@ const Nav = React.createClass({
         id={this.props.ulId}
         ref="ul"
       >
-        {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
+        {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
-  },
+  }
 
   getChildActiveProp(child) {
     if (child.props.active) {
@@ -121,7 +62,7 @@ const Nav = React.createClass({
     }
 
     return child.props.active;
-  },
+  }
 
   renderNavItem(child, index) {
     return cloneElement(
@@ -137,6 +78,60 @@ const Nav = React.createClass({
       }
     );
   }
-});
+}
+
+Nav.propTypes = {
+  activeHref: React.PropTypes.string,
+  activeKey: React.PropTypes.any,
+
+  stacked: React.PropTypes.bool,
+  justified: all(
+    React.PropTypes.bool,
+    ({justified, navbar}) => (
+      justified && navbar ?
+        Error('justified navbar `Nav`s are not supported') : null
+    )
+  ),
+  onSelect: React.PropTypes.func,
+  collapsible: React.PropTypes.bool,
+  /**
+   * CSS classes for the wrapper `nav` element
+   */
+  className: React.PropTypes.string,
+  /**
+   * HTML id for the wrapper `nav` element
+   */
+  id: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]),
+  /**
+   * CSS classes for the inner `ul` element
+   */
+  ulClassName: React.PropTypes.string,
+  /**
+   * HTML id for the inner `ul` element
+   */
+  ulId: React.PropTypes.string,
+  expanded: React.PropTypes.bool,
+  navbar: React.PropTypes.bool,
+  eventKey: React.PropTypes.any,
+  pullRight: React.PropTypes.bool,
+  right: React.PropTypes.bool
+};
+
+Nav.defaultProps = {
+  collapsible: false,
+  expanded: true,
+  justified: false,
+  navbar: false,
+  pullRight: false,
+  right: false,
+  stacked: false
+};
 
-export default Nav;
+export default bsClass('nav',
+  bsStyles(['tabs', 'pills'],
+    Nav
+  )
+);
diff --git a/src/NavItem.js b/src/NavItem.js
index 6a237c8342..41f99165ab 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -1,12 +1,9 @@
-import classNames from 'classnames';
 import React from 'react';
-
-import BootstrapMixin from './BootstrapMixin';
+import classNames from 'classnames';
 import SafeAnchor from './SafeAnchor';
 import createChainedFunction from './utils/createChainedFunction';
 
 const NavItem = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     linkId: React.PropTypes.string,
diff --git a/src/Navbar.js b/src/Navbar.js
index 43d9951e51..27d3a1d9a9 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,17 +1,17 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
 import deprecated from 'react-prop-types/lib/deprecated';
 import elementType from 'react-prop-types/lib/elementType';
 
-import BootstrapMixin from './BootstrapMixin';
 import Grid from './Grid';
 import NavBrand from './NavBrand';
 
+import tbsUtils, { bsClass, bsStyles } from './utils/bootstrapUtils';
+import { DEFAULT, INVERSE } from './styleMaps';
 import createChainedFunction from './utils/createChainedFunction';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
 const Navbar = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     fixedTop: React.PropTypes.bool,
@@ -37,8 +37,6 @@ const Navbar = React.createClass({
 
   getDefaultProps() {
     return {
-      bsClass: 'navbar',
-      bsStyle: 'default',
       role: 'navigation',
       componentClass: 'nav',
       fixedTop: false,
@@ -99,11 +97,15 @@ const Navbar = React.createClass({
       ...props
     } = this.props;
 
-    const classes = this.getBsClassSet();
-    classes['navbar-fixed-top'] = fixedTop;
-    classes['navbar-fixed-bottom'] = fixedBottom;
-    classes['navbar-static-top'] = staticTop;
-    classes['navbar-inverse'] = inverse;
+    const classes = tbsUtils.getClassSet(this.props);
+
+    classes[tbsUtils.prefix(this.props, 'fixed-top')] = this.props.fixedTop;
+    classes[tbsUtils.prefix(this.props, 'fixed-bottom')] = this.props.fixedBottom;
+    classes[tbsUtils.prefix(this.props, 'static-top')] = this.props.staticTop;
+
+    // handle built-in styles manually to provide the convenience `inverse` prop
+    classes[tbsUtils.prefix(this.props, INVERSE)] = this.props.inverse;
+    classes[tbsUtils.prefix(this.props, DEFAULT)] = !this.props.inverse;
 
     const showHeader =
       (brand || toggleButton || toggleNavKey != null) &&
@@ -128,12 +130,13 @@ const Navbar = React.createClass({
     return this.renderHeader(brand);
   },
 
+
   renderHeader(brand) {
-    const hasToggle =
-      this.props.toggleButton || this.props.toggleNavKey != null;
+    const hasToggle = this.props.toggleButton || this.props.toggleNavKey != null;
+    const headerClass = tbsUtils.prefix(this.props, 'header');
 
     return (
-      <div className="navbar-header">
+      <div className={headerClass}>
         {brand}
         {hasToggle ? this.renderToggleButton() : null}
       </div>
@@ -161,10 +164,11 @@ const Navbar = React.createClass({
 
   renderToggleButton() {
     const {toggleButton} = this.props;
+    const toggleClass = tbsUtils.prefix(this.props, 'toggle');
 
     if (React.isValidElement(toggleButton)) {
       return React.cloneElement(toggleButton, {
-        className: classNames(toggleButton.props.className, 'navbar-toggle'),
+        className: classNames(toggleButton.props.className, toggleClass),
         onClick: createChainedFunction(
           this.handleToggle, toggleButton.props.onClick
         )
@@ -187,7 +191,7 @@ const Navbar = React.createClass({
       <button
         type="button"
         onClick={this.handleToggle}
-        className="navbar-toggle"
+        className={toggleClass}
       >
         {children}
       </button>
@@ -196,4 +200,10 @@ const Navbar = React.createClass({
 
 });
 
-export default Navbar;
+const NAVBAR_STATES = [DEFAULT, INVERSE];
+
+export default bsStyles(NAVBAR_STATES, DEFAULT,
+  bsClass('navbar',
+    Navbar
+  )
+);
diff --git a/src/Pagination.js b/src/Pagination.js
index f2990bf505..9b9b9fd04c 100644
--- a/src/Pagination.js
+++ b/src/Pagination.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsClass } from './utils/bootstrapUtils';
 import PaginationButton from './PaginationButton';
 import elementType from 'react-prop-types/lib/elementType';
 import SafeAnchor from './SafeAnchor';
 
 const Pagination = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     activePage: React.PropTypes.number,
@@ -214,7 +213,7 @@ const Pagination = React.createClass({
     return (
       <ul
         {...this.props}
-        className={classNames(this.props.className, this.getBsClassSet())}>
+        className={classNames(this.props.className, bootstrapUtils.getClassSet(this.props))}>
         {this.renderFirst()}
         {this.renderPrev()}
         {this.renderPageButtons()}
@@ -225,4 +224,4 @@ const Pagination = React.createClass({
   }
 });
 
-export default Pagination;
+export default bsClass('pagination', Pagination);
diff --git a/src/PaginationButton.js b/src/PaginationButton.js
index 83aa81232e..ae52b04243 100644
--- a/src/PaginationButton.js
+++ b/src/PaginationButton.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
 import createSelectedEvent from './utils/createSelectedEvent';
 import elementType from 'react-prop-types/lib/elementType';
 
 const PaginationButton = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     className: React.PropTypes.string,
@@ -43,8 +41,7 @@ const PaginationButton = React.createClass({
   render() {
     let classes = {
       active: this.props.active,
-      disabled: this.props.disabled,
-      ...this.getBsClassSet()
+      disabled: this.props.disabled
     };
 
     let {
diff --git a/src/Panel.js b/src/Panel.js
index adb8e342cf..9ecf5d4893 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -1,11 +1,10 @@
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
-
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import { State, PRIMARY, DEFAULT } from './styleMaps';
 import Collapse from './Collapse';
 
-const Panel = React.createClass({
-  mixins: [BootstrapMixin],
+let Panel = React.createClass({
 
   propTypes: {
     collapsible: React.PropTypes.bool,
@@ -25,8 +24,6 @@ const Panel = React.createClass({
 
   getDefaultProps() {
     return {
-      bsClass: 'panel',
-      bsStyle: 'default',
       defaultExpanded: false
     };
   },
@@ -63,7 +60,7 @@ const Panel = React.createClass({
     let {headerRole, panelRole, ...props} = this.props;
     return (
       <div {...props}
-        className={classNames(this.props.className, this.getBsClassSet())}
+        className={classNames(this.props.className, bootstrapUtils.getClassSet(this.props))}
         id={this.props.collapsible ? null : this.props.id} onSelect={null}>
         {this.renderHeading(headerRole)}
         {this.props.collapsible ? this.renderCollapsibleBody(panelRole) : this.renderBody()}
@@ -74,7 +71,7 @@ const Panel = React.createClass({
 
   renderCollapsibleBody(panelRole) {
     let props = {
-      className: this.prefixClass('collapse'),
+      className: bootstrapUtils.prefix(this.props, 'collapse'),
       id: this.props.id,
       ref: 'panel',
       'aria-hidden': !this.isExpanded()
@@ -97,7 +94,7 @@ const Panel = React.createClass({
     let allChildren = this.props.children;
     let bodyElements = [];
     let panelBodyChildren = [];
-    let bodyClass = this.prefixClass('body');
+    let bodyClass = bootstrapUtils.prefix(this.props, 'body');
 
     function getProps() {
       return {key: bodyElements.length};
@@ -165,7 +162,7 @@ const Panel = React.createClass({
         this.renderCollapsibleTitle(header, headerRole) : header;
     } else {
       const className = classNames(
-        this.prefixClass('title'), header.props.className
+        bootstrapUtils.prefix(this.props, 'title'), header.props.className
       );
 
       if (this.props.collapsible) {
@@ -179,7 +176,7 @@ const Panel = React.createClass({
     }
 
     return (
-      <div className={this.prefixClass('heading')}>
+      <div className={bootstrapUtils.prefix(this.props, 'heading')}>
         {header}
       </div>
     );
@@ -202,7 +199,7 @@ const Panel = React.createClass({
 
   renderCollapsibleTitle(header, headerRole) {
     return (
-      <h4 className={this.prefixClass('title')} role="presentation">
+      <h4 className={bootstrapUtils.prefix(this.props, 'title')} role="presentation">
         {this.renderAnchor(header, headerRole)}
       </h4>
     );
@@ -214,11 +211,15 @@ const Panel = React.createClass({
     }
 
     return (
-      <div className={this.prefixClass('footer')}>
+      <div className={bootstrapUtils.prefix(this.props, 'footer')}>
         {this.props.footer}
       </div>
     );
   }
 });
 
-export default Panel;
+const PANEL_STATES = State.values().concat(DEFAULT, PRIMARY);
+
+export default bsStyles(PANEL_STATES, DEFAULT,
+  bsClass('panel', Panel)
+);
diff --git a/src/PanelGroup.js b/src/PanelGroup.js
index 45354acb1a..cddb76fe20 100644
--- a/src/PanelGroup.js
+++ b/src/PanelGroup.js
@@ -1,14 +1,11 @@
-/* eslint react/prop-types: [2, {ignore: "bsStyle"}] */
-/* BootstrapMixin contains `bsStyle` type validation */
-
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsClass } from './utils/bootstrapUtils';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
 const PanelGroup = React.createClass({
-  mixins: [BootstrapMixin],
+
 
   propTypes: {
     accordion: React.PropTypes.bool,
@@ -21,8 +18,7 @@ const PanelGroup = React.createClass({
 
   getDefaultProps() {
     return {
-      accordion: false,
-      bsClass: 'panel-group'
+      accordion: false
     };
   },
 
@@ -35,7 +31,7 @@ const PanelGroup = React.createClass({
   },
 
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
     let {className, ...props} = this.props;
     if (this.props.accordion) { props.role = 'tablist'; }
     return (
@@ -93,4 +89,4 @@ const PanelGroup = React.createClass({
   }
 });
 
-export default PanelGroup;
+export default bsClass('panel-group', PanelGroup);
diff --git a/src/Popover.js b/src/Popover.js
index 4a36f77880..de3906ddea 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
+import tbsUtils from './utils/bootstrapUtils';
 import isRequiredForA11y from 'react-prop-types/lib/isRequiredForA11y';
 
 const Popover = React.createClass({
 
-  mixins: [ BootstrapMixin ],
-
   propTypes: {
+
     /**
      * An html id attribute, necessary for accessibility
      * @type {string}
@@ -53,13 +52,14 @@ const Popover = React.createClass({
 
   getDefaultProps() {
     return {
-      placement: 'right'
+      placement: 'right',
+      bsClass: 'popover'
     };
   },
 
   render() {
     const classes = {
-      'popover': true,
+      [tbsUtils.prefix(this.props)]: true,
       [this.props.placement]: true
     };
 
@@ -80,7 +80,7 @@ const Popover = React.createClass({
       <div role="tooltip" {...this.props} className={classNames(this.props.className, classes)} style={style} title={null}>
         <div className="arrow" style={arrowStyle} />
         {this.props.title ? this.renderTitle() : null}
-        <div className="popover-content">
+        <div className={tbsUtils.prefix(this.props, 'content')}>
           {this.props.children}
         </div>
       </div>
@@ -89,7 +89,9 @@ const Popover = React.createClass({
 
   renderTitle() {
     return (
-      <h3 className="popover-title">{this.props.title}</h3>
+      <h3 className={tbsUtils.prefix(this.props, 'title')}>
+        {this.props.title}
+      </h3>
     );
   }
 });
diff --git a/src/ProgressBar.js b/src/ProgressBar.js
index 61edf3835e..bc9cbfa520 100644
--- a/src/ProgressBar.js
+++ b/src/ProgressBar.js
@@ -1,49 +1,34 @@
-/* eslint react/prop-types: [2, {ignore: "bsStyle"}] */
-/* BootstrapMixin contains `bsStyle` type validation */
-
 import React, { cloneElement, PropTypes } from 'react';
 import Interpolate from './Interpolate';
-import BootstrapMixin from './BootstrapMixin';
+import bootstrapUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import { State } from './styleMaps';
 import classNames from 'classnames';
-
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
-const ProgressBar = React.createClass({
-  propTypes: {
-    min: PropTypes.number,
-    now: PropTypes.number,
-    max: PropTypes.number,
-    label: PropTypes.node,
-    srOnly: PropTypes.bool,
-    striped: PropTypes.bool,
-    active: PropTypes.bool,
-    children: onlyProgressBar, // eslint-disable-line no-use-before-define
-    className: React.PropTypes.string,
-    interpolateClass: PropTypes.node,
-    /**
-     * @private
-     */
-    isChild: PropTypes.bool
-  },
-
-  mixins: [BootstrapMixin],
-
-  getDefaultProps() {
-    return {
-      bsClass: 'progress-bar',
-      min: 0,
-      max: 100,
-      active: false,
-      isChild: false,
-      srOnly: false,
-      striped: false
-    };
-  },
+/**
+ * Custom propTypes checker
+ */
+function onlyProgressBar(props, propName, componentName) {
+  if (props[propName]) {
+    let error, childIdentifier;
+
+    React.Children.forEach(props[propName], (child) => {
+      if (child.type !== ProgressBar) { //eslint-disable-line
+        childIdentifier = (child.type.displayName ? child.type.displayName : child.type);
+        error = new Error(`Children of ${componentName} can contain only ProgressBar components. Found ${childIdentifier}`);
+      }
+    });
+
+    return error;
+  }
+}
+
+class ProgressBar extends React.Component {
 
   getPercentage(now, min, max) {
     const roundPrecision = 1000;
     return Math.round(((now - min) / (max - min) * 100) * roundPrecision) / roundPrecision;
-  },
+  }
 
   render() {
     if (this.props.isChild) {
@@ -70,14 +55,14 @@ const ProgressBar = React.createClass({
         {content}
       </div>
     );
-  },
+  }
 
   renderChildBar(child, index) {
     return cloneElement(child, {
       isChild: true,
       key: child.key ? child.key : index
     });
-  },
+  }
 
   renderProgressBar() {
     let { className, label, now, min, max, ...props } = this.props;
@@ -98,9 +83,9 @@ const ProgressBar = React.createClass({
       );
     }
 
-    const classes = classNames(className, this.getBsClassSet(), {
+    const classes = classNames(className, bootstrapUtils.getClassSet(this.props), {
       active: this.props.active,
-      'progress-bar-striped': this.props.active || this.props.striped
+      [bootstrapUtils.prefix(this.props, 'striped')]: this.props.active || this.props.striped
     });
 
     return (
@@ -115,7 +100,7 @@ const ProgressBar = React.createClass({
         {label}
       </div>
     );
-  },
+  }
 
   renderLabel(percentage) {
     const InterpolateClass = this.props.interpolateClass || Interpolate;
@@ -131,24 +116,38 @@ const ProgressBar = React.createClass({
       </InterpolateClass>
     );
   }
-});
-
-/**
- * Custom propTypes checker
- */
-function onlyProgressBar(props, propName, componentName) {
-  if (props[propName]) {
-    let error, childIdentifier;
-
-    React.Children.forEach(props[propName], (child) => {
-      if (child.type !== ProgressBar) {
-        childIdentifier = (child.type.displayName ? child.type.displayName : child.type);
-        error = new Error(`Children of ${componentName} can contain only ProgressBar components. Found ${childIdentifier}`);
-      }
-    });
-
-    return error;
-  }
 }
 
-export default ProgressBar;
+ProgressBar.propTypes = {
+  ...ProgressBar.propTypes,
+  min: PropTypes.number,
+  now: PropTypes.number,
+  max: PropTypes.number,
+  label: PropTypes.node,
+  srOnly: PropTypes.bool,
+  striped: PropTypes.bool,
+  active: PropTypes.bool,
+  children: onlyProgressBar,
+  className: React.PropTypes.string,
+  interpolateClass: PropTypes.node,
+  /**
+   * @private
+   */
+  isChild: PropTypes.bool
+};
+
+ProgressBar.defaultProps = {
+  ...ProgressBar.defaultProps,
+  min: 0,
+  max: 100,
+  active: false,
+  isChild: false,
+  srOnly: false,
+  striped: false
+};
+
+export default bsStyles(State.values(),
+  bsClass('progress-bar',
+    ProgressBar
+  )
+);
diff --git a/src/SplitButton.js b/src/SplitButton.js
index 4aec5d3403..df599394ca 100644
--- a/src/SplitButton.js
+++ b/src/SplitButton.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import BootstrapMixin from './BootstrapMixin';
 import Button from './Button';
 import Dropdown from './Dropdown';
 import SplitToggle from './SplitToggle';
@@ -13,8 +12,7 @@ class SplitButton extends React.Component {
       onClick,
       target,
       href,
-      // bsStyle is validated by 'Button' component
-      bsStyle, // eslint-disable-line
+      bsStyle,
       ...props } = this.props;
 
     let { disabled } = props;
@@ -50,7 +48,7 @@ class SplitButton extends React.Component {
 
 SplitButton.propTypes = {
   ...Dropdown.propTypes,
-  ...BootstrapMixin.propTypes,
+  bsStyle: Button.propTypes.bsStyle,
 
   /**
    * @private
diff --git a/src/SubNav.js b/src/SubNav.js
index a4b9b4af6e..01241710a9 100644
--- a/src/SubNav.js
+++ b/src/SubNav.js
@@ -3,11 +3,10 @@ import classNames from 'classnames';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
-import BootstrapMixin from './BootstrapMixin';
 import SafeAnchor from './SafeAnchor';
 
 const SubNav = React.createClass({
-  mixins: [BootstrapMixin],
+
 
   propTypes: {
     onSelect: React.PropTypes.func,
diff --git a/src/Tab.js b/src/Tab.js
index 2e1ce776a0..1182330adf 100644
--- a/src/Tab.js
+++ b/src/Tab.js
@@ -1,7 +1,7 @@
-import classNames from 'classnames';
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 import TransitionEvents from './utils/TransitionEvents';
 
 const Tab = React.createClass({
@@ -26,6 +26,7 @@ const Tab = React.createClass({
 
   getDefaultProps() {
     return {
+      bsClass: 'tab',
       animation: true
     };
   },
@@ -85,7 +86,7 @@ const Tab = React.createClass({
 
   render() {
     let classes = {
-      'tab-pane': true,
+      [tbsUtils.prefix(this.props, 'pane')]: true,
       'fade': true,
       'active': this.props.active || this.state.animateOut,
       'in': this.props.active && !this.state.animateIn
diff --git a/src/Tabs.js b/src/Tabs.js
index d72df15543..d806cd865a 100644
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import ReactDOM from 'react-dom';
-
 import Col from './Col';
 import Nav from './Nav';
 import NavItem from './NavItem';
 import styleMaps from './styleMaps';
 import keycode from 'keycode';
 import createChainedFunction from './utils/createChainedFunction';
+import tbsUtils from './utils/bootstrapUtils';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
 let paneId = (props, child) => child.props.id ? child.props.id : props.id && (props.id + '___pane___' + child.props.eventKey);
@@ -97,6 +97,7 @@ const Tabs = React.createClass({
 
   getDefaultProps() {
     return {
+      bsClass: 'tab',
       animation: true,
       tabWidth: 2,
       position: 'top',
@@ -178,6 +179,7 @@ const Tabs = React.createClass({
     const tabsProps = {
       ...props,
       bsStyle,
+      bsClass: undefined,
       stacked: isHorizontal,
       activeKey: this.getActiveKey(),
       onSelect: this.handleSelect,
@@ -187,7 +189,7 @@ const Tabs = React.createClass({
     const childTabs = ValidComponentChildren.map(children, this.renderTab);
 
     const panesProps = {
-      className: 'tab-content',
+      className: tbsUtils.prefix(this.props, 'content'),
       ref: 'panes'
     };
     const childPanes = ValidComponentChildren.map(children, this.renderPane);
diff --git a/src/Thumbnail.js b/src/Thumbnail.js
index 09822ea916..5f94abf088 100644
--- a/src/Thumbnail.js
+++ b/src/Thumbnail.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import classSet from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
 import SafeAnchor from './SafeAnchor';
+import bootstrapUtils, { bsClass } from './utils/bootstrapUtils';
 
 const Thumbnail = React.createClass({
-  mixins: [BootstrapMixin],
 
   propTypes: {
     alt: React.PropTypes.string,
@@ -12,14 +11,8 @@ const Thumbnail = React.createClass({
     src: React.PropTypes.string
   },
 
-  getDefaultProps() {
-    return {
-      bsClass: 'thumbnail'
-    };
-  },
-
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
 
     if (this.props.href) {
       return (
@@ -48,4 +41,4 @@ const Thumbnail = React.createClass({
   }
 });
 
-export default Thumbnail;
+export default bsClass('thumbnail', Thumbnail);
diff --git a/src/Tooltip.js b/src/Tooltip.js
index a76b855dee..5af78fb47a 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -1,81 +1,87 @@
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
 import isRequiredForA11y from 'react-prop-types/lib/isRequiredForA11y';
 
-export default class Tooltip extends React.Component {
+const Tooltip = React.createClass({
+
+  propTypes: {
+    /**
+     * An html id attribute, necessary for accessibility
+     * @type {string}
+     * @required
+     */
+    id: isRequiredForA11y(
+      React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.number
+      ])
+    ),
+
+    /**
+     * Sets the direction the Tooltip is positioned towards.
+     */
+    placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+    /**
+     * The "left" position value for the Tooltip.
+     */
+    positionLeft: React.PropTypes.number,
+    /**
+     * The "top" position value for the Tooltip.
+     */
+    positionTop: React.PropTypes.number,
+    /**
+     * The "left" position value for the Tooltip arrow.
+     */
+    arrowOffsetLeft: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ]),
+    /**
+     * The "top" position value for the Tooltip arrow.
+     */
+    arrowOffsetTop: React.PropTypes.oneOfType([
+      React.PropTypes.number, React.PropTypes.string
+    ]),
+    /**
+     * Title text
+     */
+    title: React.PropTypes.node
+  },
+
+  getDefaultProps() {
+    return {
+      bsClass: 'tooltip',
+      placement: 'right'
+    };
+  },
+
   render() {
-    const {
-      placement,
-      positionLeft,
-      positionTop,
-      arrowOffsetLeft,
-      arrowOffsetTop,
-      className,
-      style,
-      children,
-      ...props
-    } = this.props;
+    const classes = {
+      [tbsUtils.prefix(this.props)]: true,
+      [this.props.placement]: true
+    };
 
-    return (
-      <div
-        role="tooltip"
-        {...props}
-        className={classNames(className, 'tooltip', placement)}
-        style={{left: positionLeft, top: positionTop, ...style}}
-      >
-        <div
-          className="tooltip-arrow"
-          style={{left: arrowOffsetLeft, top: arrowOffsetTop}}
-        />
+    const style = {
+      'left': this.props.positionLeft,
+      'top': this.props.positionTop,
+      ...this.props.style
+    };
+
+    const arrowStyle = {
+      'left': this.props.arrowOffsetLeft,
+      'top': this.props.arrowOffsetTop
+    };
 
-        <div className="tooltip-inner">
-          {children}
+    return (
+      <div role="tooltip" {...this.props} className={classNames(this.props.className, classes)} style={style}>
+        <div className={tbsUtils.prefix(this.props, 'arrow')} style={arrowStyle} />
+        <div className={tbsUtils.prefix(this.props, 'inner')}>
+          {this.props.children}
         </div>
       </div>
     );
   }
-}
-
-Tooltip.propTypes = {
-  /**
-   * An html id attribute, necessary for accessibility
-   * @type {string}
-   * @required
-   */
-  id: isRequiredForA11y(
-    React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
-    ])
-  ),
-
-  /**
-   * The direction the tooltip is positioned towards
-   */
-  placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
-  /**
-   * The `left` position value for the tooltip
-   */
-  positionLeft: React.PropTypes.number,
-  /**
-   * The `top` position value for the tooltip
-   */
-  positionTop: React.PropTypes.number,
-  /**
-   * The `left` position value for the tooltip arrow
-   */
-  arrowOffsetLeft: React.PropTypes.oneOfType([
-    React.PropTypes.number, React.PropTypes.string
-  ]),
-  /**
-   * The `top` position value for the tooltip arrow
-   */
-  arrowOffsetTop: React.PropTypes.oneOfType([
-    React.PropTypes.number, React.PropTypes.string
-  ])
-};
+});
 
-Tooltip.defaultProps = {
-  placement: 'right'
-};
+export default Tooltip;
diff --git a/src/Well.js b/src/Well.js
index 20398b040e..22d0f9cb69 100644
--- a/src/Well.js
+++ b/src/Well.js
@@ -1,18 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from './BootstrapMixin';
-
-const Well = React.createClass({
-  mixins: [BootstrapMixin],
-
-  getDefaultProps() {
-    return {
-      bsClass: 'well'
-    };
-  },
+import bootstrapUtils, { bsSizes, bsClass } from './utils/bootstrapUtils';
+import { Sizes } from './styleMaps';
 
+@bsClass('well')
+@bsSizes([Sizes.LARGE, Sizes.SMALL])
+class Well extends React.Component {
   render() {
-    let classes = this.getBsClassSet();
+    let classes = bootstrapUtils.getClassSet(this.props);
 
     return (
       <div {...this.props} className={classNames(this.props.className, classes)}>
@@ -20,6 +15,6 @@ const Well = React.createClass({
       </div>
     );
   }
-});
+}
 
 export default Well;
diff --git a/src/index.js b/src/index.js
index 7461e38dcc..19c15517e3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,6 @@ export Affix from './Affix';
 export AffixMixin from './AffixMixin';
 export Alert from './Alert';
 export Badge from './Badge';
-export BootstrapMixin from './BootstrapMixin';
 export Breadcrumb from './Breadcrumb';
 export BreadcrumbItem from './BreadcrumbItem';
 export Button from './Button';
@@ -51,7 +50,6 @@ export Row from './Row';
 export SafeAnchor from './SafeAnchor';
 export SplitButton from './SplitButton';
 export SplitButton from './SplitButton';
-export styleMaps from './styleMaps';
 export SubNav from './SubNav';
 export Tab from './Tab';
 export Table from './Table';
@@ -68,9 +66,10 @@ export * as FormControls from './FormControls';
 import childrenValueInputValidation from './utils/childrenValueInputValidation';
 import createChainedFunction from './utils/createChainedFunction';
 import ValidComponentChildren from './utils/ValidComponentChildren';
-
+import bootstrapUtils from './utils/bootstrapUtils';
 
 export const utils = {
+  bootstrapUtils,
   childrenValueInputValidation,
   createChainedFunction,
   ValidComponentChildren
diff --git a/src/styleMaps.js b/src/styleMaps.js
index 4360d1a675..fc5297ab40 100644
--- a/src/styleMaps.js
+++ b/src/styleMaps.js
@@ -1,41 +1,15 @@
+
+let constant = obj => {
+  return Object.assign(
+    Object.create({
+      values() {
+        return Object.keys(this).map(k => this[k]);
+      }
+    }), obj);
+};
+
 const styleMaps = {
-  CLASSES: {
-    'alert': 'alert',
-    'button': 'btn',
-    'button-group': 'btn-group',
-    'button-toolbar': 'btn-toolbar',
-    'column': 'col',
-    'input-group': 'input-group',
-    'form': 'form',
-    'glyphicon': 'glyphicon',
-    'label': 'label',
-    'thumbnail': 'thumbnail',
-    'list-group-item': 'list-group-item',
-    'panel': 'panel',
-    'panel-group': 'panel-group',
-    'pagination': 'pagination',
-    'progress-bar': 'progress-bar',
-    'nav': 'nav',
-    'navbar': 'navbar',
-    'modal': 'modal',
-    'row': 'row',
-    'well': 'well'
-  },
-  STYLES: [
-    'default',
-    'primary',
-    'success',
-    'info',
-    'warning',
-    'danger',
-    'link',
-    'inline',
-    'tabs',
-    'pills'
-  ],
-  addStyle(name) {
-    styleMaps.STYLES.push(name);
-  },
+
   SIZES: {
     'large': 'lg',
     'medium': 'md',
@@ -49,4 +23,23 @@ const styleMaps = {
   GRID_COLUMNS: 12
 };
 
+export const Sizes = constant({
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small',
+  XSMALL: 'xsmall'
+});
+
+export const State = constant({
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  DANGER: 'danger',
+  INFO: 'info'
+});
+
+export const DEFAULT = 'default';
+export const PRIMARY = 'primary';
+export const LINK = 'link';
+export const INVERSE = 'inverse';
+
 export default styleMaps;
diff --git a/src/utils/bootstrapUtils.js b/src/utils/bootstrapUtils.js
new file mode 100644
index 0000000000..9cae75e759
--- /dev/null
+++ b/src/utils/bootstrapUtils.js
@@ -0,0 +1,152 @@
+import { PropTypes } from 'react';
+import styleMaps from '../styleMaps';
+import invariant from 'invariant';
+import warning from 'warning';
+
+function curry(fn) {
+  return (...args) => {
+    let last = args[args.length - 1];
+    if (typeof last === 'function') {
+      return fn(...args);
+    }
+    return Component => fn(...args, Component);
+  };
+}
+
+function prefix(props = {}, variant) {
+  invariant((props.bsClass || '').trim(), 'A `bsClass` prop is required for this component');
+  return props.bsClass + (variant ? '-' + variant : '');
+}
+
+export let bsClass = curry((defaultClass, Component) => {
+  let propTypes = Component.propTypes || (Component.propTypes = {});
+  let defaultProps = Component.defaultProps || (Component.defaultProps = {});
+
+  propTypes.bsClass = PropTypes.string;
+  defaultProps.bsClass = defaultClass;
+
+  return Component;
+});
+
+export let bsStyles = curry((styles, defaultStyle, Component) => {
+  if (typeof defaultStyle !== 'string') {
+    Component = defaultStyle;
+    defaultStyle = undefined;
+  }
+
+  let existing = Component.STYLES || [];
+  let propTypes = Component.propTypes || {};
+
+  styles.forEach(style => {
+    if (existing.indexOf(style) === -1) {
+      existing.push(style);
+    }
+  });
+
+  let propType = PropTypes.oneOf(existing);
+
+  // expose the values on the propType function for documentation
+  Component.STYLES = propType._values = existing;
+
+  Component.propTypes = {
+    ...propTypes,
+    bsStyle: propType
+  };
+
+  if (defaultStyle !== undefined) {
+    let defaultProps = Component.defaultProps || (Component.defaultProps = {});
+    defaultProps.bsStyle = defaultStyle;
+  }
+
+  return Component;
+});
+
+export let bsSizes = curry((sizes, defaultSize, Component) => {
+  if (typeof defaultSize !== 'string') {
+    Component = defaultSize;
+    defaultSize = undefined;
+  }
+
+  let existing = Component.SIZES || [];
+  let propTypes = Component.propTypes || {};
+
+  sizes.forEach(size => {
+    if (existing.indexOf(size) === -1) {
+      existing.push(size);
+    }
+  });
+
+  let values = existing.reduce((result, size) => {
+    if (styleMaps.SIZES[size] && styleMaps.SIZES[size] !== size) {
+      result.push(styleMaps.SIZES[size]);
+    }
+    return result.concat(size);
+  }, []);
+
+  let propType = PropTypes.oneOf(values);
+
+  propType._values = values;
+
+  // expose the values on the propType function for documentation
+  Component.SIZES = existing;
+
+  Component.propTypes = {
+    ...propTypes,
+    bsSize: propType
+  };
+
+  if (defaultSize !== undefined) {
+    let defaultProps = Component.defaultProps || (Component.defaultProps = {});
+    defaultProps.bsSize = defaultSize;
+  }
+
+  return Component;
+});
+
+export default {
+
+  prefix,
+
+  getClassSet(props) {
+    let classes = {};
+    let bsClassName = prefix(props);
+
+    if (bsClassName) {
+      let bsSize;
+
+      classes[bsClassName] = true;
+
+      if (props.bsSize) {
+        bsSize = styleMaps.SIZES[props.bsSize] || bsSize;
+      }
+
+      if (bsSize) {
+        classes[prefix(props, bsSize)] = true;
+      }
+
+      if (props.bsStyle) {
+        if (props.bsStyle.indexOf(prefix(props)) === 0) {
+          warning(false, // small migration convenience, since the old method required manual prefixing
+            'bsStyle will automatically prefix custom values with the bsClass, so there is no ' +
+            'need to append it manually. (bsStyle: ' + props.bsStyle + ', bsClass: ' + prefix(props) + ')'
+          );
+          classes[props.bsStyle] = true;
+        } else {
+          classes[prefix(props, props.bsStyle)] = true;
+        }
+      }
+    }
+
+    return classes;
+  },
+
+  /**
+   * Add a style variant to a Component. Mutates the propTypes of the component
+   * in order to validate the new variant.
+   */
+  addStyle(Component, styleVariant) {
+    bsStyles(styleVariant, Component);
+  }
+};
+
+export let _curry = curry;
diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
deleted file mode 100644
index 560770162d..0000000000
--- a/test/BootstrapMixinSpec.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
-import BootstrapMixin from '../src/BootstrapMixin';
-import styleMaps from '../src/styleMaps';
-import { shouldWarn } from './helpers';
-
-let Component;
-
-describe('BootstrapMixin', () => {
-  beforeEach(() => {
-    Component = React.createClass({
-      mixins: [BootstrapMixin],
-
-      render() {
-        return React.DOM.button(this.props);
-      }
-    });
-  });
-
-  describe('#getBsClassSet', () => {
-    it('should return blank', () => {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component>
-          content
-        </Component>
-      );
-      assert.deepEqual(instance.getBsClassSet(), {});
-    });
-
-    it('maps and validates OK default classes', () => {
-      function instanceClassSet(bsClass) {
-        let instance = ReactTestUtils.renderIntoDocument(
-          <Component bsClass={bsClass}>
-            content
-          </Component>
-        );
-        return instance.getBsClassSet();
-      }
-
-      assert.deepEqual(instanceClassSet('column'), {'col': true});
-      assert.deepEqual(instanceClassSet('button'), {'btn': true});
-      assert.deepEqual(instanceClassSet('button-group'), {'btn-group': true});
-      assert.deepEqual(instanceClassSet('label'), {'label': true});
-      assert.deepEqual(instanceClassSet('alert'), {'alert': true});
-      assert.deepEqual(instanceClassSet('input-group'), {'input-group': true});
-      assert.deepEqual(instanceClassSet('form'), {'form': true});
-      assert.deepEqual(instanceClassSet('panel'), {'panel': true});
-    });
-
-    describe('Predefined Bootstrap styles', () => {
-      it('maps and validates OK default styles', () => {
-        function instanceClassSet(style) {
-          let instance = ReactTestUtils.renderIntoDocument(
-            <Component bsClass='button' bsStyle={style}>
-              content
-            </Component>
-          );
-          return instance.getBsClassSet();
-        }
-
-        assert.deepEqual(instanceClassSet('default'), {'btn': true, 'btn-default': true});
-        assert.deepEqual(instanceClassSet('primary'), {'btn': true, 'btn-primary': true});
-        assert.deepEqual(instanceClassSet('success'), {'btn': true, 'btn-success': true});
-        assert.deepEqual(instanceClassSet('info'), {'btn': true, 'btn-info': true});
-        assert.deepEqual(instanceClassSet('link'), {'btn': true, 'btn-link': true});
-        assert.deepEqual(instanceClassSet('inline'), {'btn': true, 'btn-inline': true});
-      });
-    });
-
-    describe('Sizes', () => {
-      it('maps english words for sizes to bootstrap sizes constants', () => {
-        function instanceClassSet(size) {
-          let instance = ReactTestUtils.renderIntoDocument(
-            <Component bsClass='button' bsSize={size}>
-              content
-            </Component>
-          );
-          return instance.getBsClassSet();
-        }
-
-        assert.deepEqual(instanceClassSet('large'), {'btn': true, 'btn-lg': true});
-        assert.deepEqual(instanceClassSet('small'), {'btn': true, 'btn-sm': true});
-        assert.deepEqual(instanceClassSet('medium'), {'btn': true, 'btn-md': true});
-        assert.deepEqual(instanceClassSet('xsmall'), {'btn': true, 'btn-xs': true});
-      });
-    });
-
-    describe('Custom styles', () => {
-      it('should validate OK custom styles added via "addStyle()"', () => {
-
-        styleMaps.addStyle('wacky');
-
-        let instance = ReactTestUtils.renderIntoDocument(
-          <Component bsClass='button' bsStyle='wacky'>
-            content
-          </Component>
-        );
-        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
-      });
-
-      it('should allow custom styles as is but with validation warning', () => {
-        let instance = ReactTestUtils.renderIntoDocument(
-          <Component bsClass='button' bsStyle='my-custom-class'>
-            content
-          </Component>
-        );
-        assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'my-custom-class': true});
-        shouldWarn('Invalid prop `bsStyle` of value `my-custom-class`');
-      });
-    });
-  });
-
-  // todo: fix bad naming
-  describe('#prefixClass', () => {
-    it('allows custom sub-classes', () => {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Component bsClass='button'>
-          content
-        </Component>
-      );
-      assert.equal(instance.prefixClass('title'), 'btn-title');
-    });
-  });
-});
diff --git a/test/ButtonGroupSpec.js b/test/ButtonGroupSpec.js
index 411ac7712d..66b7447672 100644
--- a/test/ButtonGroupSpec.js
+++ b/test/ButtonGroupSpec.js
@@ -22,7 +22,7 @@ describe('ButtonGroup', () => {
 
   it('Should add size', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ButtonGroup bsSize='large'>
+      <ButtonGroup bsSize="large">
         <Button>
           Title
         </Button>
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 332905d321..0ab4546ab6 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 import Modal from '../src/Modal';
 
-import {getOne, render, shouldWarn} from './helpers';
+import {getOne, render } from './helpers';
 
 describe('Modal', () => {
   let mountPoint;
@@ -128,7 +128,7 @@ describe('Modal', () => {
   it('Should pass className to the dialog', () => {
     let noOp = () => {};
     let instance = render(
-      <Modal show className='mymodal' onHide={noOp}>
+      <Modal show className="mymodal" onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     , mountPoint);
@@ -141,7 +141,7 @@ describe('Modal', () => {
   it('Should use bsClass on the dialog', () => {
     let noOp = () => {};
     let instance = render(
-      <Modal show bsClass='mymodal' onHide={noOp}>
+      <Modal show bsClass="mymodal" onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     , mountPoint);
@@ -153,9 +153,6 @@ describe('Modal', () => {
     assert.ok(dialog.children[0].children[0].className.match(/\bmymodal-content\b/));
 
     assert.ok(instance.refs.backdrop.className.match(/\bmymodal-backdrop\b/));
-
-
-    shouldWarn("Invalid prop 'bsClass' of value 'mymodal'");
   });
 
   it('Should pass bsSize to the dialog', () => {
diff --git a/test/ProgressBarSpec.js b/test/ProgressBarSpec.js
index 8ab3d1965c..0a6654b0fa 100644
--- a/test/ProgressBarSpec.js
+++ b/test/ProgressBarSpec.js
@@ -24,23 +24,15 @@ describe('ProgressBar', () => {
 
   it('Should have the default class', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={0} bsStyle='default' />
-    );
-
-    assert.ok(getProgressBarNode(instance).className.match(/\bprogress-bar-default\b/));
-  });
-
-  it('Should have the primary class', () => {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={0} bsStyle='primary' />
+      <ProgressBar min={0} max={10} now={0} />
     );
 
-    assert.ok(getProgressBarNode(instance).className.match(/\bprogress-bar-primary\b/));
+    assert.ok(getProgressBarNode(instance).className.match(/\bprogress-bar\b/));
   });
 
   it('Should have the success class', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={0} bsStyle='success' />
+      <ProgressBar min={0} max={10} now={0} bsStyle="success" />
     );
 
     assert.ok(getProgressBarNode(instance).className.match(/\bprogress-bar-success\b/));
@@ -48,7 +40,7 @@ describe('ProgressBar', () => {
 
   it('Should have the warning class', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={0} bsStyle='warning' />
+      <ProgressBar min={0} max={10} now={0} bsStyle="warning" />
     );
 
     assert.ok(getProgressBarNode(instance).className.match(/\bprogress-bar-warning\b/));
@@ -98,7 +90,7 @@ describe('ProgressBar', () => {
 
   it('Should not have label', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={5} bsStyle='primary' />
+      <ProgressBar min={0} max={10} now={5} />
     );
 
     assert.equal(ReactDOM.findDOMNode(instance).innerText, '');
@@ -106,21 +98,21 @@ describe('ProgressBar', () => {
 
   it('Should have label', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={5} bsStyle='primary'
-        label='min:%(min)s, max:%(max)s, now:%(now)s, percent:%(percent)s, bsStyle:%(bsStyle)s' />
+      <ProgressBar min={0} max={10} now={5} bsStyle="success"
+        label="min:%(min)s, max:%(max)s, now:%(now)s, percent:%(percent)s, bsStyle:%(bsStyle)s" />
     );
 
-    assert.equal(ReactDOM.findDOMNode(instance).innerText, 'min:0, max:10, now:5, percent:50, bsStyle:primary');
+    assert.equal(ReactDOM.findDOMNode(instance).innerText, 'min:0, max:10, now:5, percent:50, bsStyle:success');
   });
 
   it('Should have screen reader only label', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={5} bsStyle='primary' srOnly
-        label='min:%(min)s, max:%(max)s, now:%(now)s, percent:%(percent)s, bsStyle:%(bsStyle)s' />
+      <ProgressBar min={0} max={10} now={5} srOnly bsStyle="success"
+        label="min:%(min)s, max:%(max)s, now:%(now)s, percent:%(percent)s, bsStyle:%(bsStyle)s" />
     );
     let srLabel = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'sr-only');
 
-    assert.equal(srLabel.innerText, 'min:0, max:10, now:5, percent:50, bsStyle:primary');
+    assert.equal(srLabel.innerText, 'min:0, max:10, now:5, percent:50, bsStyle:success');
   });
 
   it('Should have a label that is a React component', () => {
@@ -129,7 +121,7 @@ describe('ProgressBar', () => {
     );
 
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={5} bsStyle='primary' label={customLabel} />
+      <ProgressBar min={0} max={10} now={5} label={customLabel} />
     );
 
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'special-label'));
@@ -141,7 +133,7 @@ describe('ProgressBar', () => {
     );
 
     let instance = ReactTestUtils.renderIntoDocument(
-      <ProgressBar min={0} max={10} now={5} bsStyle='primary' label={customLabel} srOnly />
+      <ProgressBar min={0} max={10} now={5} label={customLabel} srOnly />
     );
 
     let srLabel = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'sr-only');
diff --git a/test/helpers.js b/test/helpers.js
index cabf22a8d0..6de6d2c073 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -18,7 +18,7 @@ export function render(element, mountPoint) {
   let mount = mountPoint || document.createElement('div');
   let instance = ReactDOM.render(element, mount);
 
-  if (!instance.renderWithProps) {
+  if (instance && !instance.renderWithProps) {
     instance.renderWithProps = newProps => {
 
       return render(
diff --git a/test/utils/bootstrapUtilsSpec.js b/test/utils/bootstrapUtilsSpec.js
new file mode 100644
index 0000000000..644b78d403
--- /dev/null
+++ b/test/utils/bootstrapUtilsSpec.js
@@ -0,0 +1,209 @@
+import React from 'react';
+import tbsUtils, { bsStyles, bsSizes, _curry } from '../../src/utils/bootstrapUtils';
+import { render, shouldWarn } from '../helpers';
+
+describe('bootstrapUtils', ()=> {
+
+  function validatePropType(propTypes, prop, value, match) {
+    let result = propTypes[prop]({ [prop]: value }, prop, 'Component');
+
+    if (match) {
+      expect(result.message).to.match(match);
+    } else {
+      expect(result).to.not.exist;
+    }
+  }
+
+  it('should prefix with bsClass', ()=> {
+    expect(tbsUtils.prefix({ bsClass: 'yolo'}, 'pie')).to.equal('yolo-pie');
+  });
+
+  it('should return bsClass when there is no suffix', ()=> {
+    expect(tbsUtils.prefix({ bsClass: 'yolo'})).to.equal('yolo');
+    expect(tbsUtils.prefix({ bsClass: 'yolo'}, '')).to.equal('yolo');
+    expect(tbsUtils.prefix({ bsClass: 'yolo'}, null)).to.equal('yolo');
+  });
+
+  it('returns a classSet of bsClass', ()=> {
+    expect(tbsUtils.getClassSet({ bsClass: 'btn' })).to.eql({'btn': true });
+  });
+
+  it('returns a classSet of bsClass and style', ()=> {
+    expect(
+      tbsUtils.getClassSet({ bsClass: 'btn', bsStyle: 'primary' })
+    )
+    .to.eql({'btn': true, 'btn-primary': true });
+  });
+
+  it('returns a classSet of bsClass and size', ()=> {
+    expect(tbsUtils
+      .getClassSet({ bsClass: 'btn', bsSize: 'large' }))
+        .to.eql({'btn': true, 'btn-lg': true });
+
+    expect(tbsUtils
+      .getClassSet({ bsClass: 'btn', bsSize: 'lg' }))
+        .to.eql({'btn': true, 'btn-lg': true });
+  });
+
+  it('returns a classSet of bsClass, style and size', ()=> {
+    expect(tbsUtils
+      .getClassSet({ bsClass: 'btn', bsSize: 'lg', bsStyle: 'primary' }))
+        .to.eql({'btn': true, 'btn-lg': true, 'btn-primary': true });
+  });
+
+  describe('decorators', ()=> {
+    it('should apply immediately if a component is supplied', ()=> {
+      let spy = sinon.spy();
+      let component = function noop() {};
+
+      _curry(spy)(true, 'hi', component);
+
+      expect(spy).to.have.been.calledOnce;
+      expect(spy).to.have.been.calledWith(true, 'hi', component);
+    });
+
+    it('should curry the method as a decorator', ()=> {
+      let spy = sinon.spy();
+      let component = function noop() {};
+      let decorator = _curry(spy)(true, 'hi');
+
+      expect(spy).to.have.not.been.calledOnce;
+
+      decorator(component);
+
+      expect(spy).to.have.been.calledOnce;
+      expect(spy).to.have.been.calledWith(true, 'hi', component);
+    });
+  });
+
+  describe('bsStyles', ()=> {
+
+    it('should add style to allowed propTypes', ()=> {
+      let Component = {};
+
+      bsStyles(['minimal', 'boss', 'plaid'])(Component);
+
+      expect(Component.propTypes).to.exist;
+
+      validatePropType(Component.propTypes, 'bsStyle', 'plaid');
+
+      validatePropType(Component.propTypes, 'bsStyle', 'not-plaid',
+        /expected one of \["minimal","boss","plaid"\]/);
+    });
+
+    it('should not override other propTypes', ()=> {
+      let Component = { propTypes: {other() {}}};
+
+      bsStyles(['minimal', 'boss', 'plaid'])(Component);
+
+      expect(Component.propTypes).to.exist;
+      expect(Component.propTypes.other).to.exist;
+    });
+
+    it('should set a default if provided', ()=> {
+      let Component = { propTypes: {other() {}}};
+
+      bsStyles(['minimal', 'boss', 'plaid'], 'plaid')(Component);
+
+      expect(Component.defaultProps).to.exist;
+      expect(Component.defaultProps.bsStyle).to.equal('plaid');
+    });
+
+    it('should work with es6 classes', ()=> {
+      @bsStyles(['minimal', 'boss', 'plaid'], 'plaid')
+      class Component {
+        render() { return <span/>; }
+      }
+
+      let instance = render(<Component />);
+
+      expect(instance.props.bsStyle).to.equal('plaid');
+
+      render(<Component bsStyle="not-plaid"/>);
+
+      shouldWarn(/expected one of \["minimal","boss","plaid"\]/);
+    });
+
+    it('should work with createClass', ()=> {
+      let Component = bsStyles(['minimal', 'boss', 'plaid'], 'plaid')(
+        React.createClass({
+          render() { return <span/>; }
+        })
+      );
+
+      let instance = render(<Component />);
+
+      expect(instance.props.bsStyle).to.equal('plaid');
+
+      render(<Component bsStyle="not-plaid"/>);
+
+      shouldWarn(/expected one of \["minimal","boss","plaid"\]/);
+    });
+  });
+
+  describe('bsSizes', ()=> {
+
+    it('should add size to allowed propTypes', ()=> {
+      let Component = {};
+
+      bsSizes(['large', 'small'])(Component);
+
+      expect(Component.propTypes).to.exist;
+
+      validatePropType(Component.propTypes, 'bsSize', 'small');
+      validatePropType(Component.propTypes, 'bsSize', 'sm');
+
+      validatePropType(Component.propTypes, 'bsSize', 'superSmall',
+        /expected one of \["lg","large","sm","small"\]/);
+    });
+
+    it('should not override other propTypes', ()=> {
+      let Component = { propTypes: {other() {}}};
+
+      bsSizes(['smallish', 'micro', 'planet'])(Component);
+
+      expect(Component.propTypes).to.exist;
+      expect(Component.propTypes.other).to.exist;
+    });
+
+    it('should set a default if provided', ()=> {
+      let Component = { propTypes: {other() {}}};
+
+      bsSizes(['smallish', 'micro', 'planet'], 'smallish')(Component);
+
+      expect(Component.defaultProps).to.exist;
+      expect(Component.defaultProps.bsSize).to.equal('smallish');
+    });
+
+    it('should work with es6 classes', ()=> {
+      @bsSizes(['smallish', 'micro', 'planet'], 'smallish')
+      class Component {
+        render() { return <span/>; }
+      }
+
+      let instance = render(<Component />);
+
+      expect(instance.props.bsSize).to.equal('smallish');
+
+      render(<Component bsSize="not-smallish"/>);
+
+      shouldWarn(/expected one of \["smallish","micro","planet"\]/);
+    });
+
+    it('should work with createClass', ()=> {
+      let Component = bsSizes(['smallish', 'micro', 'planet'], 'smallish')(
+        React.createClass({
+          render() { return <span/>; }
+        })
+      );
+
+      let instance = render(<Component />);
+
+      expect(instance.props.bsSize).to.equal('smallish');
+
+      render(<Component bsSize="not-smallish"/>);
+
+      shouldWarn(/expected one of \["smallish","micro","planet"\]/);
+    });
+  });
+});

From 59c9571415a36dcff2d4ab5fd37ab3af744322cf Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 14 Nov 2015 09:23:34 -0500
Subject: [PATCH 02/10] [changed] remove extra wrapping `<nav>` element in Nav
 components

---
 src/Collapse.js    |  3 ++-
 src/Fade.js        |  3 ++-
 src/Nav.js         | 66 +++++++++++++++++++++++++++-------------------
 test/NavSpec.js    | 64 +-------------------------------------------
 test/NavbarSpec.js | 18 +------------
 5 files changed, 45 insertions(+), 109 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index 56a622bba5..fa4a420ec5 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -1,5 +1,6 @@
 import css from 'dom-helpers/style';
 import React from 'react';
+import classNames from 'classnames';
 import Transition from 'react-overlays/lib/Transition';
 import deprecated from 'react-prop-types/lib/deprecated';
 
@@ -50,7 +51,7 @@ class Collapse extends React.Component {
         ref="transition"
         {...this.props}
         aria-expanded={this.props.role ? this.props.in : null}
-        className={this._dimension() === 'width' ? 'width' : ''}
+        className={classNames(this.props.className, { width: this._dimension() === 'width' })}
         exitedClassName="collapse"
         exitingClassName="collapsing"
         enteredClassName="collapse in"
diff --git a/src/Fade.js b/src/Fade.js
index 934dfeca00..971be2a5ee 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import Transition from 'react-overlays/lib/Transition';
 import deprecated from 'react-prop-types/lib/deprecated';
 
@@ -10,7 +11,7 @@ class Fade extends React.Component {
       <Transition
         {...this.props}
         timeout={timeout}
-        className="fade"
+        className={classNames(this.props.className, 'fade')}
         enteredClassName="in"
         enteringClassName="in"
       >
diff --git a/src/Nav.js b/src/Nav.js
index 2af6305452..7056e6a98d 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -2,6 +2,7 @@ import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 import Collapse from './Collapse';
 import all from 'react-prop-types/lib/all';
+import deprecated from 'react-prop-types/lib/deprecated';
 import tbsUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
@@ -9,41 +10,45 @@ import createChainedFunction from './utils/createChainedFunction';
 class Nav extends React.Component {
 
   render() {
-    const classes = this.props.collapsible ? 'navbar-collapse' : null;
-
-    if (this.props.navbar && !this.props.collapsible) {
-      return (this.renderUl());
-    }
-
-    return (
-      <Collapse in={this.props.expanded}>
-        <nav {...this.props} className={classNames(this.props.className, classes)}>
-          {this.renderUl()}
-        </nav>
-      </Collapse>
-    );
-  }
-
-  renderUl() {
+    const { className, ulClassName, id, ulId } = this.props;
     const classes = tbsUtils.getClassSet(this.props);
 
-    // TODO: need to pass navbar bsClass down...
     classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
-    classes['navbar-nav'] = this.props.navbar;
-    classes['pull-right'] = this.props.pullRight;
-    classes['navbar-right'] = this.props.right;
 
-    return (
-      <ul {...this.props}
+    if (this.props.navbar) {
+      // TODO: need to pass navbar bsClass down...
+      classes['navbar-nav'] = this.props.navbar;
+      classes['navbar-right'] = this.props.right; // this is confusing along with `pullRight`
+    } else {
+      classes['pull-right'] = this.props.pullRight;
+    }
+
+    let list = (
+      <ul ref="ul"
+        {...this.props}
+        id={ulId || id}
         role={this.props.bsStyle === 'tabs' ? 'tablist' : null}
-        className={classNames(this.props.ulClassName, classes)}
-        id={this.props.ulId}
-        ref="ul"
+        className={classNames(className, ulClassName, classes)}
       >
         {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
+
+    if (this.props.collapsible) {
+      list = (
+        <Collapse
+          in={this.props.expanded}
+          className={this.props.navbar ? 'navbar-collapse' : void 0}
+        >
+          <div>
+            { list }
+          </div>
+        </Collapse>
+      );
+    }
+
+    return list;
   }
 
   getChildActiveProp(child) {
@@ -107,12 +112,19 @@ Nav.propTypes = {
   ]),
   /**
    * CSS classes for the inner `ul` element
+   *
+   * @deprecated
    */
-  ulClassName: React.PropTypes.string,
+  ulClassName: deprecated(React.PropTypes.string,
+    'The wrapping `<nav>` has been removed you can use `className` now'),
   /**
    * HTML id for the inner `ul` element
+   *
+   * @deprecated
    */
-  ulId: React.PropTypes.string,
+  ulId: deprecated(React.PropTypes.string,
+    'The wrapping `<nav>` has been removed you can use `id` now'),
+
   expanded: React.PropTypes.bool,
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
diff --git a/test/NavSpec.js b/test/NavSpec.js
index 0bae89cd48..7f4d304dca 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -65,7 +65,7 @@ describe('Nav', () => {
 
   it('Should add navbar-right class', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-          <Nav bsStyle="tabs" right activeKey={1}>
+          <Nav bsStyle="tabs" navbar right activeKey={1}>
             <NavItem key={1}>Tab 1 content</NavItem>
             <NavItem key={2}>Tab 2 content</NavItem>
           </Nav>
@@ -118,68 +118,6 @@ describe('Nav', () => {
     assert.ok(items[0].props.navItem);
   });
 
-  it('Should apply className only to the wrapper nav element', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} className="nav-specific">
-        <NavItem key={1}>Tab 1 content</NavItem>
-        <NavItem key={2}>Tab 2 content</NavItem>
-      </Nav>
-    );
-
-    let ulNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul');
-    assert.notInclude(ulNode.className, 'nav-specific');
-
-    let navNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav');
-    assert.include(navNode.className, 'nav-specific');
-  });
-
-  it('Should apply ulClassName to the inner ul element', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} className="nav-specific" ulClassName="ul-specific">
-        <NavItem key={1}>Tab 1 content</NavItem>
-        <NavItem key={2}>Tab 2 content</NavItem>
-      </Nav>
-    );
-
-    let ulNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul');
-    assert.include(ulNode.className, 'ul-specific');
-    assert.notInclude(ulNode.className, 'nav-specific');
-
-    let navNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav');
-    assert.notInclude(navNode.className, 'ul-specific');
-    assert.include(navNode.className, 'nav-specific');
-  });
-
-  it('Should apply id to the wrapper nav element', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} id="nav-id">
-        <NavItem key={1}>Tab 1 content</NavItem>
-        <NavItem key={2}>Tab 2 content</NavItem>
-      </Nav>
-    );
-
-    let navNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav');
-    assert.equal(navNode.id, 'nav-id');
-
-    let ulNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul');
-    assert.notEqual(ulNode.id, 'nav-id');
-  });
-
-  it('Should apply ulId to the inner ul element', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Nav bsStyle="tabs" activeKey={1} id="nav-id" ulId="ul-id">
-        <NavItem key={1}>Tab 1 content</NavItem>
-        <NavItem key={2}>Tab 2 content</NavItem>
-      </Nav>
-    );
-
-    let ulNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul');
-    assert.equal(ulNode.id, 'ul-id');
-
-    let navNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav');
-    assert.equal(navNode.id, 'nav-id');
-  });
-
   it('Should warn when attempting to use a justified navbar nav', () => {
     ReactTestUtils.renderIntoDocument(
       <Nav navbar justified />
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 36b2dcabac..61937a4b6d 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -6,7 +6,7 @@ import Nav from '../src/Nav';
 import NavBrand from '../src/NavBrand';
 import Navbar from '../src/Navbar';
 
-import {getOne, render, shouldWarn} from './helpers';
+import { getOne, shouldWarn } from './helpers';
 
 describe('Navbar', () => {
 
@@ -168,22 +168,6 @@ describe('Navbar', () => {
     assert.ok(nav.props.navbar);
   });
 
-  it('Should pass nav prop to ul', () => {
-    let instance = render(<Nav />);
-
-    let navNode = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav');
-    assert.ok(navNode);
-    assert.equal(navNode.nodeName, 'UL');
-    assert.equal(navNode.parentNode.nodeName, 'NAV');
-
-    instance = instance.renderWithProps({navbar: true});
-
-    navNode = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav');
-    assert.ok(navNode);
-    assert.equal(navNode.nodeName, 'UL');
-    assert.equal(navNode.parentNode.nodeName, 'DIV');
-  });
-
   it('Should add header when toggleNavKey is 0', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar toggleNavKey={0}>

From 214bc772e414050779bd37cbfb326c699f6f8be9 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 29 Aug 2015 13:26:29 -0400
Subject: [PATCH 03/10] Use react-overlays

---
 src/Modal.js       | 392 +++++++++++----------------------------------
 src/ModalBody.js   |  15 +-
 src/ModalDialog.js |  32 ++--
 src/ModalFooter.js |   4 +-
 src/ModalHeader.js |  21 ++-
 src/ModalTitle.js  |  11 +-
 test/ModalSpec.js  | 182 +++------------------
 7 files changed, 143 insertions(+), 514 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index e6a0dd45eb..eef05fc053 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,20 +1,16 @@
-/* eslint-disable react/prop-types */
 
+/* eslint-disable react/prop-types */
 import classNames from 'classnames';
-import React, {cloneElement} from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import domUtils from './utils/domUtils';
-import bootstrapUtils from './utils/bootstrapUtils';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
-import EventListener from './utils/EventListener';
-import createChainedFunction from './utils/createChainedFunction';
-import elementType from 'react-prop-types/lib/elementType';
+import tbsUtils, { bsClass, bsSizes } from './utils/bootstrapUtils';
+import { Sizes } from './styleMaps';
 
+import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import canUseDOM from 'dom-helpers/util/inDOM';
-import contains from 'dom-helpers/query/contains';
-import activeElement from 'dom-helpers/activeElement';
-
-import Portal from 'react-overlays/lib/Portal';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import events from 'dom-helpers/events';
+import elementType from 'react-prop-types/lib/elementType';
 
 import Fade from './Fade';
 import ModalDialog from './ModalDialog';
@@ -23,63 +19,14 @@ import Header from './ModalHeader';
 import Title from './ModalTitle';
 import Footer from './ModalFooter';
 
-/**
- * Gets the correct clientHeight of the modal container
- * when the body/window/document you need to use the docElement clientHeight
- * @param  {HTMLElement} container
- * @param  {ReactElement|HTMLElement} context
- * @return {Number}
- */
-function containerClientHeight(container, context) {
-  let doc = domUtils.ownerDocument(context);
-
-  return (container === doc.body || container === doc.documentElement)
-      ? doc.documentElement.clientHeight
-      : container.clientHeight;
-}
-
-function getContainer(context) {
-  return (context.props.container && ReactDOM.findDOMNode(context.props.container)) ||
-    domUtils.ownerDocument(context).body;
-}
-
-let currentFocusListener;
-
-/**
- * Firefox doesn't have a focusin event so using capture is easiest way to get bubbling
- * IE8 can't do addEventListener, but does have onfocusin, so we use that in ie8
- *
- * We only allow one Listener at a time to avoid stack overflows
- *
- * @param  {ReactElement|HTMLElement} context
- * @param  {Function} handler
- */
-function onFocus(context, handler) {
-  let doc = domUtils.ownerDocument(context);
-  let useFocusin = !doc.addEventListener;
-  let remove;
-
-  if (currentFocusListener) {
-    currentFocusListener.remove();
-  }
-
-  if (useFocusin) {
-    document.attachEvent('onfocusin', handler);
-    remove = () => document.detachEvent('onfocusin', handler);
-  } else {
-    document.addEventListener('focus', handler, true);
-    remove = () => document.removeEventListener('focus', handler, true);
-  }
-
-  currentFocusListener = { remove };
-
-  return currentFocusListener;
-}
-
+import BaseModal from 'react-overlays/lib/Modal';
+import isOverflowing from 'react-overlays/lib/utils/isOverflowing';
+import pick from 'lodash/object/pick';
 
 const Modal = React.createClass({
+
   propTypes: {
-    ...Portal.propTypes,
+    ...BaseModal.propTypes,
     ...ModalDialog.propTypes,
 
     /**
@@ -125,233 +72,115 @@ const Modal = React.createClass({
     /**
      * When `true` The modal will show itself.
      */
-    show: React.PropTypes.bool
+    show: React.PropTypes.bool,
+
+    /**
+     * A callback fired when the header closeButton or non-static backdrop is
+     * clicked. Required if either are specified.
+     */
+    onHide: React.PropTypes.func
+  },
+
+  childContextTypes: {
+    '$bs_onModalHide': React.PropTypes.func
   },
 
   getDefaultProps() {
     return {
+      ...BaseModal.defaultProps,
       bsClass: 'modal',
-      dialogComponent: ModalDialog,
-      show: false,
       animation: true,
-      backdrop: true,
-      keyboard: true,
-      autoFocus: true,
-      enforceFocus: true
+      dialogComponent: ModalDialog,
     };
   },
 
   getInitialState() {
     return {
-      exited: !this.props.show
+      modalStyles: {}
+    };
+  },
+
+  getChildContext() {
+    return {
+      $bs_onModalHide: this.props.onHide
     };
   },
 
   render() {
-    let { children, animation, backdrop, ...props } = this.props;
-    let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
+    let {
+        className
+      , children
+      , dialogClassName
+      , animation
+      , ...props } = this.props;
+
+    let { modalStyles } = this.state;
 
-    let show = !!props.show;
+    let inClass = { in: props.show && !animation };
     let Dialog = props.dialogComponent;
 
-    const mountModal = show || (animation && !this.state.exited);
-    if (!mountModal) {
-      return null;
-    }
+    let parentProps = pick(props,
+      Object.keys(BaseModal.propTypes).concat(
+        ['onExit', 'onExiting', 'onEnter', 'onEntered']) // the rest are fired in _onHide() and _onShow()
+    );
 
     let modal = (
       <Dialog
+        key="modal"
+        ref={ref => this._modal = ref}
         {...props}
-        ref={this._setDialogRef}
-        className={classNames(this.props.className, { in: show && !animation })}
-        onClick={backdrop === true ? this.handleBackdropClick : null}>
-        { this.renderContent() }
+        style={modalStyles}
+        className={classNames(className, inClass)}
+        dialogClassName={dialogClassName}
+        onClick={props.backdrop === true ? this.handleDialogClick : null}
+      >
+        { this.props.children }
       </Dialog>
     );
 
-    if (animation) {
-      modal = (
-        <Fade
-          transitionAppear
-          unmountOnExit
-          in={show}
-          timeout={Modal.TRANSITION_DURATION}
-          onExit={onExit}
-          onExiting={onExiting}
-          onExited={this.handleHidden}
-          onEnter={onEnter}
-          onEntering={onEntering}
-          onEntered={onEntered}>
-          { modal }
-        </Fade>
-      );
-    }
-
-    if (backdrop) {
-      modal = this.renderBackdrop(modal);
-    }
-
     return (
-      <Portal container={props.container}>
+      <BaseModal
+        {...parentProps}
+        show={props.show}
+        ref={ref => {
+          this._wrapper = (ref && ref.refs.modal);
+          this._backdrop = (ref && ref.refs.backdrop);
+        }}
+        onEntering={this._onShow}
+        onExited={this._onHide}
+        backdropClassName={classNames(tbsUtils.prefix(props, 'backdrop'), inClass)}
+        containerClassName={tbsUtils.prefix(props, 'open')}
+        transition={animation ? Fade : undefined}
+        dialogTransitionTimeout={Modal.TRANSITION_DURATION}
+        backdropTransitionTimeout={Modal.BACKDROP_TRANSITION_DURATION}
+      >
         { modal }
-      </Portal>
+      </BaseModal>
     );
   },
 
-  renderContent() {
-    return React.Children.map(this.props.children, child => {
-      // TODO: use context in 0.14
-      if (child && child.type && child.type.__isModalHeader) {
-        return cloneElement(child, {
-          onHide: createChainedFunction(this.props.onHide, child.props.onHide)
-        });
-      }
-      return child;
-    });
-  },
-
-  renderBackdrop(modal) {
-    let { animation } = this.props;
-    let duration = Modal.BACKDROP_TRANSITION_DURATION;
-    let prefix = bootstrapUtils.prefix(this.props);
-
-    // Don't handle clicks for "static" backdrops
-    let onClick = this.props.backdrop === true ?
-      this.handleBackdropClick : null;
 
-    let backdrop = (
-      <div
-        ref="backdrop"
-        className={classNames(`${prefix}-backdrop`, { in: this.props.show && !animation })}
-        onClick={onClick}/>
-    );
+  _onShow(...args) {
+    events.on(window, 'resize', this.handleWindowResize);
 
-    return (
-      <div
-        ref="modal">
-        { animation
-            ? <Fade transitionAppear in={this.props.show} timeout={duration}>{backdrop}</Fade>
-            : backdrop
-        }
-        {modal}
-      </div>
+    this.setState(
+      this._getStyles()
     );
-  },
-
-  _setDialogRef(ref) {
-    // issue #1074
-    // due to: https://github.com/facebook/react/blob/v0.13.3/src/core/ReactCompositeComponent.js#L842
-    //
-    // when backdrop is `false` react hasn't had a chance to reassign the refs to a usable object, b/c there are no other
-    // "classic" refs on the component (or they haven't been processed yet)
-    // TODO: Remove the need for this in next breaking release
-    if (Object.isFrozen(this.refs) && !Object.keys(this.refs).length) {
-      this.refs = {};
-    }
-
-    this.refs.dialog = ref;
-
-    // maintains backwards compat with older component breakdown
-    if (!this.props.backdrop) {
-      this.refs.modal = ref;
-    }
-  },
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.show) {
-      this.setState({exited: false});
-    } else if (!nextProps.animation) {
-      // Otherwise let handleHidden take care of marking exited.
-      this.setState({exited: true});
-    }
-  },
-
-  componentWillUpdate(nextProps) {
-    if (nextProps.show) {
-      this.checkForFocus();
-    }
-  },
 
-  componentDidMount() {
-    if (this.props.show) {
-      this.onShow();
+    if (this.props.onEntering) {
+      this.props.onEntering(...args);
     }
   },
 
-  componentDidUpdate(prevProps) {
-    let { animation } = this.props;
-
-    if (prevProps.show && !this.props.show && !animation) {
-      // otherwise handleHidden will call this.
-      this.onHide();
-    } else if (!prevProps.show && this.props.show) {
-      this.onShow();
-    }
-  },
-
-  componentWillUnmount() {
-    if (this.props.show) {
-      this.onHide();
-    }
-  },
-
-  onShow() {
-    const doc = domUtils.ownerDocument(this);
-    const win = domUtils.ownerWindow(this);
-
-    this._onDocumentKeyupListener =
-      EventListener.listen(doc, 'keyup', this.handleDocumentKeyUp);
-
-    this._onWindowResizeListener =
-      EventListener.listen(win, 'resize', this.handleWindowResize);
-
-    if (this.props.enforceFocus) {
-      this._onFocusinListener = onFocus(this, this.enforceFocus);
-    }
-
-    let container = getContainer(this);
-
-    container.className += container.className.length ? ' modal-open' : 'modal-open';
-
-    this._containerIsOverflowing = container.scrollHeight > containerClientHeight(container, this);
-
-    this._originalPadding = container.style.paddingRight;
-
-    if (this._containerIsOverflowing) {
-      container.style.paddingRight = parseInt(this._originalPadding || 0, 10) + getScrollbarSize() + 'px';
-    }
-
-    this.setState(this._getStyles(), () => this.focusModalContent());
-  },
-
-  onHide() {
-    this._onDocumentKeyupListener.remove();
-    this._onWindowResizeListener.remove();
-
-    if (this._onFocusinListener) {
-      this._onFocusinListener.remove();
-    }
-
-    let container = getContainer(this);
-
-    container.style.paddingRight = this._originalPadding;
-
-    container.className = container.className.replace(/ ?modal-open/, '');
-
-    this.restoreLastFocus();
-  },
-
-  handleHidden(...args) {
-    this.setState({ exited: true });
-
-    this.onHide();
+  _onHide(...args) {
+    events.off(window, 'resize', this.handleWindowResize);
 
     if (this.props.onExited) {
       this.props.onExited(...args);
     }
   },
 
-  handleBackdropClick(e) {
+  handleDialogClick(e) {
     if (e.target !== e.currentTarget) {
       return;
     }
@@ -359,72 +188,29 @@ const Modal = React.createClass({
     this.props.onHide();
   },
 
-  handleDocumentKeyUp(e) {
-    if (this.props.keyboard && e.keyCode === 27) {
-      this.props.onHide();
-    }
-  },
-
   handleWindowResize() {
     this.setState(this._getStyles());
   },
 
-  checkForFocus() {
-    if (canUseDOM) {
-      this.lastFocus = activeElement(document);
-    }
-  },
-
-  focusModalContent() {
-    let modalContent = ReactDOM.findDOMNode(this.refs.dialog);
-    let current = activeElement(domUtils.ownerDocument(this));
-    let focusInModal = current && contains(modalContent, current);
-
-    if (modalContent && this.props.autoFocus && !focusInModal) {
-      this.lastFocus = current;
-      modalContent.focus();
-    }
-  },
-
-  restoreLastFocus() {
-    if (this.lastFocus && this.lastFocus.focus) {
-      this.lastFocus.focus();
-      this.lastFocus = null;
-    }
-  },
-
-  enforceFocus() {
-    if (!this.isMounted()) {
-      return;
-    }
-
-    let active = activeElement(domUtils.ownerDocument(this));
-    let modal = ReactDOM.findDOMNode(this.refs.dialog);
-
-    if (modal && modal !== active && !contains(modal, active)) {
-      modal.focus();
-    }
-  },
-
   _getStyles() {
     if (!canUseDOM) {
       return {};
     }
 
-    let node = ReactDOM.findDOMNode(this.refs.modal);
+    let node = ReactDOM.findDOMNode(this._modal);
+    let doc = ownerDocument(node);
+
     let scrollHt = node.scrollHeight;
-    let container = getContainer(this);
-    let containerIsOverflowing = this._containerIsOverflowing;
-    let modalIsOverflowing = scrollHt > containerClientHeight(container, this);
+    let bodyIsOverflowing = isOverflowing(ReactDOM.findDOMNode(this.props.container || doc.body));
+    let modalIsOverflowing = scrollHt > doc.documentElement.clientHeight;
 
     return {
-      dialogStyles: {
-        paddingRight: containerIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : void 0,
-        paddingLeft: !containerIsOverflowing && modalIsOverflowing ? getScrollbarSize() : void 0
+      modalStyles: {
+        paddingRight: bodyIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : void 0,
+        paddingLeft: !bodyIsOverflowing && modalIsOverflowing ? getScrollbarSize() : void 0
       }
     };
   }
-
 });
 
 Modal.Body = Body;
@@ -437,4 +223,6 @@ Modal.Dialog = ModalDialog;
 Modal.TRANSITION_DURATION = 300;
 Modal.BACKDROP_TRANSITION_DURATION = 150;
 
-export default Modal;
+export default bsSizes([Sizes.LARGE, Sizes.SMALL],
+  bsClass('modal', Modal)
+);
diff --git a/src/ModalBody.js b/src/ModalBody.js
index 33e48c9ab2..e5d93877b0 100644
--- a/src/ModalBody.js
+++ b/src/ModalBody.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import tbsUtils from './utils/bootstrapUtils';
+import tbsUtils, { bsClass } from './utils/bootstrapUtils';
 
 class ModalBody extends React.Component {
   render() {
@@ -14,16 +14,5 @@ class ModalBody extends React.Component {
   }
 }
 
-ModalBody.propTypes = {
-  /**
-   * A css class applied to the Component
-   */
-  bsClass: React.PropTypes.string
-};
 
-ModalBody.defaultProps = {
-  bsClass: 'modal'
-};
-
-
-export default ModalBody;
+export default bsClass('modal', ModalBody);
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index bd2d01ccd3..39437c7881 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -1,31 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import classNames from 'classnames';
-import bootstrapUtils, { bsSizes } from './utils/bootstrapUtils';
+import tbsUtils, { bsClass, bsSizes } from './utils/bootstrapUtils';
 import { Sizes } from './styleMaps';
 
 const ModalDialog = React.createClass({
 
   propTypes: {
-    /**
-     * A Callback fired when the header closeButton or non-static backdrop is clicked.
-     * @type {function}
-     * @required
-     */
-    onHide: React.PropTypes.func.isRequired,
-
     /**
      * A css class to apply to the Modal dialog DOM node.
      */
     dialogClassName: React.PropTypes.string
-
-  },
-
-  getDefaultProps() {
-    return {
-      bsClass: 'modal',
-      closeButton: true
-    };
   },
 
   render() {
@@ -33,11 +18,11 @@ const ModalDialog = React.createClass({
       display: 'block',
       ...this.props.style
     };
-    let prefix = bootstrapUtils.prefix(this.props);
-    let dialogClasses = bootstrapUtils.getClassSet(this.props);
+    let prefix = tbsUtils.prefix(this.props);
+    let dialogClasses = tbsUtils.getClassSet(this.props);
 
-    delete dialogClasses.modal;
-    dialogClasses[`${prefix}-dialog`] = true;
+    delete dialogClasses[prefix];
+    dialogClasses[tbsUtils.prefix(this.props, 'dialog')] = true;
 
     return (
       <div
@@ -46,9 +31,10 @@ const ModalDialog = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classNames(this.props.className, prefix)}>
+        className={classNames(this.props.className, prefix)}
+      >
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className={`${prefix}-content`} role="document">
+          <div className={tbsUtils.prefix(this.props, 'content')} role="document">
             { this.props.children }
           </div>
         </div>
@@ -58,5 +44,5 @@ const ModalDialog = React.createClass({
 });
 
 export default bsSizes([Sizes.LARGE, Sizes.SMALL],
-  ModalDialog
+  bsClass('modal', ModalDialog)
 );
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
index 235ca6a4a1..0a3d6b19ee 100644
--- a/src/ModalFooter.js
+++ b/src/ModalFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import tbsUtils from './utils/bootstrapUtils';
+import tbsUtils, { bsClass } from './utils/bootstrapUtils';
 
 class ModalFooter extends React.Component {
   render() {
@@ -25,4 +25,4 @@ ModalFooter.defaultProps = {
   bsClass: 'modal'
 };
 
-export default ModalFooter;
+export default bsClass('modal', ModalFooter);
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index ee13a2f751..3e226115fa 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -1,18 +1,23 @@
 import React from 'react';
 import classNames from 'classnames';
-import tbsUtils from './utils/bootstrapUtils';
+import tbsUtils, { bsClass } from './utils/bootstrapUtils';
+import createChainedFunction from './utils/createChainedFunction';
 
 class ModalHeader extends React.Component {
+
   render() {
+    let onHide = createChainedFunction(this.context.$bs_onModalHide, this.props.onHide);
+
     return (
       <div
         {...this.props}
-        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'header'))}>
+        className={classNames(this.props.className, tbsUtils.prefix(this.props, 'header'))}
+      >
         { this.props.closeButton &&
           <button
             type="button"
             className="close"
-            onClick={this.props.onHide}>
+            onClick={onHide}>
             <span aria-hidden="true">
               &times;
             </span>
@@ -24,9 +29,6 @@ class ModalHeader extends React.Component {
   }
 }
 
-// used in liue of parent contexts right now to auto wire the close button
-ModalHeader.__isModalHeader = true;
-
 ModalHeader.propTypes = {
   /**
    * The 'aria-label' attribute is used to define a string that labels the current element.
@@ -48,11 +50,14 @@ ModalHeader.propTypes = {
   onHide: React.PropTypes.func
 };
 
+ModalHeader.contextTypes = {
+  '$bs_onModalHide': React.PropTypes.func
+};
+
 ModalHeader.defaultProps = {
   'aria-label': 'Close',
-  bsClass: 'modal',
   closeButton: false
 };
 
 
-export default ModalHeader;
+export default bsClass('modal', ModalHeader);
diff --git a/src/ModalTitle.js b/src/ModalTitle.js
index 889691c033..196c15ed4d 100644
--- a/src/ModalTitle.js
+++ b/src/ModalTitle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import tbsUtils from './utils/bootstrapUtils';
+import tbsUtils, { bsClass } from './utils/bootstrapUtils';
 
 class ModalTitle extends React.Component {
   render() {
@@ -14,12 +14,5 @@ class ModalTitle extends React.Component {
   }
 }
 
-ModalTitle.propTypes = {
-  bsClass: React.PropTypes.string
-};
 
-ModalTitle.defaultProps = {
-  bsClass: 'modal'
-};
-
-export default ModalTitle;
+export default bsClass('modal', ModalTitle);
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index 0ab4546ab6..5a720b1125 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 import Modal from '../src/Modal';
 
-import {getOne, render } from './helpers';
+import { render } from './helpers';
 
 describe('Modal', () => {
   let mountPoint;
@@ -27,60 +27,8 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    assert.ok(getOne(instance.refs.modal.querySelectorAll('strong')));
-  });
-
-  it('Should add modal-open class to the modal container while open', (done) => {
-
-    let Container = React.createClass({
-      getInitialState() {
-        return { modalOpen: true };
-      },
-      handleCloseModal() {
-        this.setState({ modalOpen: false });
-      },
-      render() {
-        return (
-          <div>
-            <Modal
-              animation={false}
-              show={this.state.modalOpen}
-              onHide={this.handleCloseModal}
-              container={this}
-            >
-              <strong>Message</strong>
-            </Modal>
-          </div>
-        );
-      }
-    });
-
-    let instance = render(
-          <Container />
-        , mountPoint);
-
-    let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal);
-
-    assert.ok(ReactDOM.findDOMNode(instance).className.match(/\bmodal-open\b/));
-
-    ReactTestUtils.Simulate.click(modal.refs.backdrop);
-
-    setTimeout(() => {
-      assert.equal(ReactDOM.findDOMNode(instance).className.length, 0);
-      done();
-    }, 0);
-
-  });
-
-  it('Should close the modal when the backdrop is clicked', (done) => {
-    let doneOp = () => { done(); };
-    let instance = render(
-      <Modal show onHide={doneOp} animation={false}>
-        <strong>Message</strong>
-      </Modal>
-    , mountPoint);
-
-    ReactTestUtils.Simulate.click(instance.refs.backdrop);
+    assert.ok(
+      ReactTestUtils.findRenderedDOMComponentWithTag(instance._modal, 'strong'));
   });
 
   it('Should close the modal when the modal dialog is clicked', (done) => {
@@ -92,20 +40,23 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    let dialog = ReactDOM.findDOMNode(instance.refs.dialog);
+
+    let dialog = ReactDOM.findDOMNode(instance._modal);
 
     ReactTestUtils.Simulate.click(dialog);
   });
 
-  it('Should not close the modal when the "static" backdrop is clicked', () => {
+  it('Should not close the modal when the "static" dialog is clicked', () => {
     let onHideSpy = sinon.spy();
     let instance = render(
-      <Modal show onHide={onHideSpy} backdrop='static'>
+      <Modal show onHide={onHideSpy} backdrop="static">
         <strong>Message</strong>
       </Modal>
     , mountPoint);
 
-    ReactTestUtils.Simulate.click(instance.refs.backdrop);
+    let dialog = ReactDOM.findDOMNode(instance._modal);
+
+    ReactTestUtils.Simulate.click(dialog);
 
     expect(onHideSpy).to.not.have.been.called;
   });
@@ -120,7 +71,8 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    let button = instance.refs.modal.getElementsByClassName('close')[0];
+    let button = ReactDOM.findDOMNode(instance._modal)
+        .getElementsByClassName('close')[0];
 
     ReactTestUtils.Simulate.click(button);
   });
@@ -133,7 +85,7 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    let dialog = ReactDOM.findDOMNode(instance.refs.dialog);
+    let dialog = ReactDOM.findDOMNode(instance._modal);
 
     assert.ok(dialog.className.match(/\bmymodal\b/));
   });
@@ -146,25 +98,26 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    let dialog = ReactDOM.findDOMNode(instance.refs.dialog);
+    let modal = ReactDOM.findDOMNode(instance._modal);
 
-    assert.ok(dialog.className.match(/\bmymodal\b/));
-    assert.ok(dialog.children[0].className.match(/\bmymodal-dialog\b/));
-    assert.ok(dialog.children[0].children[0].className.match(/\bmymodal-content\b/));
-
-    assert.ok(instance.refs.backdrop.className.match(/\bmymodal-backdrop\b/));
+    assert.ok(modal.className.match(/\bmymodal\b/));
+    assert.ok(modal.children[0].className.match(/\bmymodal-dialog\b/));
+    assert.ok(modal.children[0].children[0].className.match(/\bmymodal-content\b/));
+    assert.ok(instance._backdrop.className.match(/\bmymodal-backdrop\b/));
   });
 
   it('Should pass bsSize to the dialog', () => {
     let noOp = () => {};
     let instance = render(
-      <Modal show bsSize='small' onHide={noOp}>
+      <Modal show bsSize="small" onHide={noOp}>
         <strong>Message</strong>
       </Modal>
     , mountPoint);
 
-    let dialog = getOne(instance.refs.modal.getElementsByClassName('modal-dialog'));
+    let dialog = ReactDOM.findDOMNode(instance._modal).getElementsByClassName('modal-dialog')[0];
+
     assert.ok(dialog.className.match(/\bmodal-sm\b/));
+
   });
 
   it('Should pass dialogClassName to the dialog', () => {
@@ -175,19 +128,9 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    let dialog = instance.refs.modal.querySelector('.modal-dialog');
-    assert.match(dialog.className, /\btestCss\b/);
-  });
-
-  it('Should assign refs correctly when no backdrop', () => {
-
-    let test = () => render(
-      <Modal show backdrop={false} onHide={() => {}}>
-        <strong>Message</strong>
-      </Modal>
-    , mountPoint);
+    let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance._modal, 'modal-dialog');
 
-    expect(test).not.to.throw();
+    assert.ok(dialog.className.match(/\btestCss\b/));
   });
 
   it('Should use dialogComponent', () => {
@@ -203,7 +146,7 @@ describe('Modal', () => {
       </Modal>
     , mountPoint);
 
-    assert.ok(instance.refs.dialog instanceof CustomDialog);
+    assert.ok(instance._modal instanceof CustomDialog);
   });
 
   it('Should pass transition callbacks to Transition', (done) => {
@@ -232,79 +175,4 @@ describe('Modal', () => {
       , mountPoint);
   });
 
-  it('Should unbind listeners when unmounted', () => {
-    render(
-        <div>
-          <Modal show onHide={() => null} animation={false}>
-            <strong>Foo bar</strong>
-          </Modal>
-        </div>
-    , mountPoint);
-
-    assert.include(document.body.className, 'modal-open');
-
-    render(<div />, mountPoint);
-
-    assert.notInclude(document.body.className, 'modal-open');
-  });
-
-  describe('Focused state', () => {
-    let focusableContainer = null;
-
-    beforeEach(() => {
-      focusableContainer = document.createElement('div');
-      focusableContainer.tabIndex = 0;
-      document.body.appendChild(focusableContainer);
-      focusableContainer.focus();
-    });
-
-    afterEach(() => {
-      ReactDOM.unmountComponentAtNode(focusableContainer);
-      document.body.removeChild(focusableContainer);
-    });
-
-    it('Should focus on the Modal when it is opened', () => {
-
-      document.activeElement.should.equal(focusableContainer);
-
-      let instance = render(
-        <Modal show onHide={() => {}} animation={false}>
-          <strong>Message</strong>
-        </Modal>
-        , focusableContainer);
-
-      document.activeElement.className.should.contain('modal');
-
-      instance.renderWithProps({ show: false });
-
-      document.activeElement.should.equal(focusableContainer);
-    });
-
-
-    it('Should not focus on the Modal when autoFocus is false', () => {
-      render(
-        <Modal show autoFocus={false} onHide={() => {}} animation={false}>
-          <strong>Message</strong>
-        </Modal>
-        , focusableContainer);
-
-      document.activeElement.should.equal(focusableContainer);
-    });
-
-    it('Should not focus Modal when child has focus', () => {
-
-      document.activeElement.should.equal(focusableContainer);
-
-      render(
-        <Modal show onHide={() => {}} animation={false}>
-          <input autoFocus />
-        </Modal>
-        , focusableContainer);
-
-      let input = document.getElementsByTagName('input')[0];
-
-      document.activeElement.should.equal(input);
-    });
-  });
-
 });

From 5dbafd341281ebce731eceeeccea2cae57884bae Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 14 Nov 2015 12:33:12 -0500
Subject: [PATCH 04/10] [changed] Split the Navbar component into
 sub-components

---
 docs/examples/.eslintrc            |   5 +-
 docs/examples/CollapsibleNav.js    |  24 ----
 docs/examples/NavbarBasic.js       |   6 +-
 docs/examples/NavbarCollapsible.js |  37 +++--
 docs/examples/NavbarForm.js        |  21 +++
 docs/examples/NavbarTextLink.js    |  20 +++
 docs/src/ComponentsPage.js         |  83 +++++++----
 docs/src/NavMain.js                |  19 ++-
 docs/src/PropTable.js              |   2 +-
 docs/src/ReactPlayground.js        |   2 +-
 docs/src/Samples.js                |   3 +-
 src/Nav.js                         |  44 +++---
 src/NavBrand.js                    |  40 ++----
 src/Navbar.js                      | 219 ++++++++++++-----------------
 src/NavbarBrand.js                 |  32 +++++
 src/NavbarCollapse.js              |  29 ++++
 src/NavbarHeader.js                |  24 ++++
 src/NavbarToggle.js                |  42 ++++++
 src/index.js                       |   1 +
 test/CollapsibleNavSpec.js         |  94 -------------
 test/NavBrandSpec.js               |  12 +-
 test/NavbarSpec.js                 | 170 ++++++++++++----------
 22 files changed, 487 insertions(+), 442 deletions(-)
 delete mode 100644 docs/examples/CollapsibleNav.js
 create mode 100644 docs/examples/NavbarForm.js
 create mode 100644 docs/examples/NavbarTextLink.js
 create mode 100644 src/NavbarBrand.js
 create mode 100644 src/NavbarCollapse.js
 create mode 100644 src/NavbarHeader.js
 create mode 100644 src/NavbarToggle.js
 delete mode 100644 test/CollapsibleNavSpec.js

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 33da9224f3..f6e91e7bc0 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -34,7 +34,10 @@
     "ListGroup",
     "ListGroupItem",
     "Nav",
-    "NavBrand",
+    "NavbarBrand",
+    "NavbarHeader",
+    "NavbarToggle",
+    "NavbarCollapse",
     "Navbar",
     "NavDropdown",
     "NavItem",
diff --git a/docs/examples/CollapsibleNav.js b/docs/examples/CollapsibleNav.js
deleted file mode 100644
index 6cf05235df..0000000000
--- a/docs/examples/CollapsibleNav.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const navbarInstance = (
-  <Navbar toggleNavKey={0}>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
-    <CollapsibleNav eventKey={0}> {/* This is the eventKey referenced */}
-      <Nav navbar>
-        <NavItem eventKey={1} href="#">Link</NavItem>
-        <NavItem eventKey={2} href="#">Link</NavItem>
-        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-nav-dropdown">
-          <MenuItem eventKey="1">Action</MenuItem>
-          <MenuItem eventKey="2">Another action</MenuItem>
-          <MenuItem eventKey="3">Something else here</MenuItem>
-          <MenuItem divider />
-          <MenuItem eventKey="4">Separated link</MenuItem>
-        </NavDropdown>
-      </Nav>
-      <Nav navbar right>
-        <NavItem eventKey={1} href="#">Link Right</NavItem>
-        <NavItem eventKey={2} href="#">Link Right</NavItem>
-      </Nav>
-    </CollapsibleNav>
-  </Navbar>
-);
-
-ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
index 22180aa984..b85f031484 100644
--- a/docs/examples/NavbarBasic.js
+++ b/docs/examples/NavbarBasic.js
@@ -1,6 +1,10 @@
 const navbarInstance = (
   <Navbar>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+    </Navbar.Header>
     <Nav>
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
index 164da5eee2..406750bb1c 100644
--- a/docs/examples/NavbarCollapsible.js
+++ b/docs/examples/NavbarCollapsible.js
@@ -1,17 +1,28 @@
 const navbarInstance = (
-  <Navbar inverse toggleNavKey={0}>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
-    <Nav right eventKey={0}> {/* This is the eventKey referenced */}
-      <NavItem eventKey={1} href="#">Link</NavItem>
-      <NavItem eventKey={2} href="#">Link</NavItem>
-      <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
-        <MenuItem eventKey="1">Action</MenuItem>
-        <MenuItem eventKey="2">Another action</MenuItem>
-        <MenuItem eventKey="3">Something else here</MenuItem>
-        <MenuItem divider />
-        <MenuItem eventKey="4">Separated link</MenuItem>
-      </NavDropdown>
-    </Nav>
+  <Navbar inverse>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Nav>
+        <NavItem eventKey={1} href="#">Link</NavItem>
+        <NavItem eventKey={2} href="#">Link</NavItem>
+        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
+          <MenuItem eventKey="1">Action</MenuItem>
+          <MenuItem eventKey="2">Another action</MenuItem>
+          <MenuItem eventKey="3">Something else here</MenuItem>
+          <MenuItem divider />
+          <MenuItem eventKey="4">Separated link</MenuItem>
+        </NavDropdown>
+      </Nav>
+      <Nav right>
+        <NavItem eventKey={1} href="#">Link Right</NavItem>
+        <NavItem eventKey={2} href="#">Link Right</NavItem>
+      </Nav>
+    </Navbar.Collapse>
   </Navbar>
 );
 
diff --git a/docs/examples/NavbarForm.js b/docs/examples/NavbarForm.js
new file mode 100644
index 0000000000..9d241f0e25
--- /dev/null
+++ b/docs/examples/NavbarForm.js
@@ -0,0 +1,21 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Form pullLeft>
+        <div className="form-group">
+          <Input type="text" placeholder="Search"/>
+        </div>
+        {' '}
+        <Button type="submit">Submit</Button>
+      </Navbar.Form>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarTextLink.js b/docs/examples/NavbarTextLink.js
new file mode 100644
index 0000000000..80e99d5622
--- /dev/null
+++ b/docs/examples/NavbarTextLink.js
@@ -0,0 +1,20 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Text>
+        Signed in as: <Navbar.Link href="#">Mark Otto</Navbar.Link>
+      </Navbar.Text>
+      <Navbar.Text pullRight>
+        Have a great day!
+      </Navbar.Text>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index bab62c6ead..99fbdaaba6 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -501,51 +501,72 @@ const ComponentsPage = React.createClass({
 
                 {/* Navbar */}
                 <div className="bs-docs-section">
-                  <h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, NavBrand, Nav, NavItem</small></h1>
+                  <h1 className="page-header">
+                    <Anchor id="navbars">Navbars</Anchor>{' '}
+                    <small>Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse</small>
+                  </h1>
 
-                  <p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
-                  <p>They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>. The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>, <code>inverse</code>, <code>fluid</code>.</p>
-                  <p>You can specify a brand node by wrapping it in a <code>NavBrand</code> element and passing it as a child to the <code>Navbar</code>.</p>
-                  <p>You can drag elements to the right by specifying the <code>right</code> property on the <code>Nav</code> component.</p>
+                  <p>
+                    They also supports all the different Bootstrap classes as properties. Just camelCase
+                    the css class and remove navbar from it.
+
+                    For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>.
+                    The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>
+                    , <code>inverse</code>, <code>fluid</code>.
+                  </p>
+                  <p>
+                    You can also align elements to the right by specifying the <code>right</code> prop on
+                    the <code>Nav</code> component.
+                  </p>
 
                   <h3><Anchor id="navbars-basic">Navbar Basic Example</Anchor></h3>
                   <ReactPlayground codeText={Samples.NavbarBasic} />
-
-                  <h3><Anchor id="navbars-mobile-friendly">Mobile Friendly</Anchor></h3>
-                  <p>To have a mobile friendly Navbar, specify the property <code>toggleNavKey</code> on the Navbar with a value corresponding to an <code>eventKey</code> of one of his <code>Nav</code> children. This child will be the one collapsed.</p>
-                  <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded')} the Navbar will start expanded by default.</p>
                   <div className="bs-callout bs-callout-info">
-                    <h4>Scrollbar overflow</h4>
-                    <p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
-                    <pre>
-                      {React.DOM.code(null,
-                        '.navbar-collapse {\n' +
-                        '  overflow: hidden;\n' +
-                        '}\n'
-                      )}
-                    </pre>
+                    <h4>Additional Import Options</h4>
+                    <p>
+                      The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
+                      the <code>{"<Navbar/>"}</code> component, but you can also,
+                      import them directly from the <code>/lib</code> directory
+                      like: <code>{'require("react-bootstrap/lib/NavbarHeader")'}</code>.
+                    </p>
                   </div>
+
+                  <h3><Anchor id="navbars-mobile-friendly">Responsive Navbars</Anchor></h3>
+                  <p>
+                    To have a mobile friendly Navbar, Add a <code>Navbar.Toggle</code> to your Header and wrap your
+                    Navs in a <code>Navbar.Collapse</code> component. The <code>Navbar</code> will automatically wire
+                    the toggle and collapse together!
+                  </p>
+                  <p>
+                    By setting the prop <code>defaultNavExpanded</code> the Navbar will start
+                    expanded by default. You can also finely control the collapsing behavior by using
+                    the <code>navExpanded</code> and <code>onToggle</code> props.
+                  </p>
+
                   <ReactPlayground codeText={Samples.NavbarCollapsible} />
 
-                  <h3><Anchor id="navbars-mobile-friendly-multiple">Mobile Friendly (Multiple Nav Components)</Anchor></h3>
-                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsibleNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsibleNav</code> component.</p>
-                  <div className="bs-callout bs-callout-info">
-                    <h4>Div collapse</h4>
-                    <p>The <code>navbar-collapse</code> div gets created as the collapsible element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsible navbar documentation.</p>
-                    <pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
-                  </div>
-                  <ReactPlayground codeText={Samples.CollapsibleNav} />
+                  <h3><Anchor id="navbars-form">Forms</Anchor></h3>
+                  <p>
+                    Use the <code>Navbar.Form</code> convenience component to apply proper margins and alignment to
+                    form components.
+                  </p>
+                  <ReactPlayground codeText={Samples.NavbarForm} />
+
+                  <h3><Anchor id="navbars-text-link">Text and Non-nav links</Anchor></h3>
+                  <p>
+                    Loose text and links can be wraped in the convenience
+                    components: <code>Navbar.Link</code> and <code>Navbar.Text</code>
+                  </p>
+
+                  <ReactPlayground codeText={Samples.NavbarTextLink} />
 
                   <h3><Anchor id="navbar-props">Props</Anchor></h3>
 
                   <h4><Anchor id="navs-props-navbar">Navbar</Anchor></h4>
                   <PropTable component="Navbar"/>
 
-                  <h4><Anchor id="navs-props-navbrand">NavBrand</Anchor></h4>
-                  <PropTable component="NavBrand"/>
-
-                  <h4><Anchor id="navs-props-collapsiblenav">CollapsibleNav</Anchor></h4>
-                  <PropTable component="CollapsibleNav"/>
+                  <h4><Anchor id="navs-props-navbrand">NavbarToggle, Navbar.Toggle</Anchor></h4>
+                  <PropTable component="NavbarToggle"/>
                 </div>
 
                 {/* Breadcrumb */}
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index e1042d54e0..76495a4e31 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Navbar from '../../src/Navbar';
-import NavBrand from '../../src/NavBrand';
 import Nav from '../../src/Nav';
 
 const NAV_LINKS = {
@@ -37,11 +36,19 @@ const NavMain = React.createClass({
     ]);
 
     return (
-      <Navbar componentClass="header" staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
-        <NavBrand>{brand}</NavBrand>
-        <Nav className="bs-navbar-collapse" role="navigation" eventKey={0} id="top">
-          {links}
-        </Nav>
+      <Navbar staticTop
+        componentClass="header"
+        className="bs-docs-nav"
+        role="banner"
+      >
+        <Navbar.Header>
+          {brand}
+        </Navbar.Header>
+        <Navbar.Collapse className="bs-navbar-collapse" >
+          <Nav role="navigation" id="top">
+            {links}
+          </Nav>
+        </Navbar.Collapse>
       </Navbar>
     );
   },
diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
index fb82a6bf56..de5f2c19bd 100644
--- a/docs/src/PropTable.js
+++ b/docs/src/PropTable.js
@@ -46,7 +46,7 @@ const PropTable = React.createClass({
     let propsData = this.propsData;
 
     if (!Object.keys(propsData).length) {
-      return <span/>;
+      return <div className="text-muted"><em>There are no public props for this component.</em></div>;
     }
 
     return (
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 057e28ed16..f70f692a03 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -36,7 +36,7 @@ const ListGroupItem = require('../../src/ListGroupItem');
 const MenuItem = require('../../src/MenuItem');
 const Modal = require('../../src/Modal');
 const Nav = require('../../src/Nav');
-const NavBrand = require('../../src/NavBrand');
+const NavbarBrand = require('../../src/NavbarBrand');
 const Navbar = require('../../src/Navbar');
 const NavItem = require('../../src/NavItem');
 const NavDropdown = require('../../src/NavDropdown');
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index ed2ef287ae..b900fc39d9 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -62,7 +62,8 @@ export default {
   NavJustified:                  require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
   NavbarBasic:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
   NavbarCollapsible:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
-  CollapsibleNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
+  NavbarForm:                    require('fs').readFileSync(__dirname + '/../examples/NavbarForm.js', 'utf8'),
+  NavbarTextLink:                require('fs').readFileSync(__dirname + '/../examples/NavbarTextLink.js', 'utf8'),
   TabsUncontrolled:              require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
   TabsControlled:                require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
   TabsNoAnimation:               require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),
diff --git a/src/Nav.js b/src/Nav.js
index 7056e6a98d..2087ceebe5 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,9 +1,9 @@
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
-import Collapse from './Collapse';
 import all from 'react-prop-types/lib/all';
 import deprecated from 'react-prop-types/lib/deprecated';
-import tbsUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import tbsUtils, { bsStyles, bsClass as _bsClass } from './utils/bootstrapUtils';
+
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
@@ -11,20 +11,23 @@ class Nav extends React.Component {
 
   render() {
     const { className, ulClassName, id, ulId } = this.props;
+    const isNavbar = this.props.navbar != null ? this.props.navbar : this.context.$bs_navbar;
     const classes = tbsUtils.getClassSet(this.props);
 
     classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
 
+
     if (this.props.navbar) {
-      // TODO: need to pass navbar bsClass down...
-      classes['navbar-nav'] = this.props.navbar;
-      classes['navbar-right'] = this.props.right; // this is confusing along with `pullRight`
+      let bsClass = this.context.$bs_navbar_bsClass || 'navbar';
+
+      classes[tbsUtils.prefix({ bsClass }, 'nav')] = true;
+      classes[tbsUtils.prefix({ bsClass }, 'right')] = isNavbar;
     } else {
       classes['pull-right'] = this.props.pullRight;
     }
 
-    let list = (
+    return (
       <ul ref="ul"
         {...this.props}
         id={ulId || id}
@@ -34,21 +37,6 @@ class Nav extends React.Component {
         {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
-
-    if (this.props.collapsible) {
-      list = (
-        <Collapse
-          in={this.props.expanded}
-          className={this.props.navbar ? 'navbar-collapse' : void 0}
-        >
-          <div>
-            { list }
-          </div>
-        </Collapse>
-      );
-    }
-
-    return list;
   }
 
   getChildActiveProp(child) {
@@ -98,7 +86,7 @@ Nav.propTypes = {
     )
   ),
   onSelect: React.PropTypes.func,
-  collapsible: React.PropTypes.bool,
+
   /**
    * CSS classes for the wrapper `nav` element
    */
@@ -122,27 +110,31 @@ Nav.propTypes = {
    *
    * @deprecated
    */
+
   ulId: deprecated(React.PropTypes.string,
     'The wrapping `<nav>` has been removed you can use `id` now'),
 
   expanded: React.PropTypes.bool,
+
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
   pullRight: React.PropTypes.bool,
   right: React.PropTypes.bool
 };
 
+Nav.contextTypes = {
+  $bs_navbar: React.PropTypes.bool,
+  $bs_navbar_bsClass: React.PropTypes.string
+};
+
 Nav.defaultProps = {
-  collapsible: false,
-  expanded: true,
   justified: false,
-  navbar: false,
   pullRight: false,
   right: false,
   stacked: false
 };
 
-export default bsClass('nav',
+export default _bsClass('nav',
   bsStyles(['tabs', 'pills'],
     Nav
   )
diff --git a/src/NavBrand.js b/src/NavBrand.js
index 397f193c6d..948e5f5ee9 100644
--- a/src/NavBrand.js
+++ b/src/NavBrand.js
@@ -1,32 +1,8 @@
-import classNames from 'classnames';
-import React from 'react';
-
-class NavBrand extends React.Component {
-  render() {
-    const {className, children, ...props} = this.props;
-
-    if (React.isValidElement(children)) {
-      return React.cloneElement(children, {
-        className: classNames(
-          children.props.className, className, 'navbar-brand'
-        )
-      });
-    }
-
-    return (
-      <span {...props} className={classNames(className, 'navbar-brand')}>
-        {children}
-      </span>
-    );
-  }
-}
-
-NavBrand.propTypes = {
-  bsRole: React.PropTypes.string
-};
-
-NavBrand.defaultProps = {
-  bsRole: 'brand'
-};
-
-export default NavBrand;
+import NavbarBrand from './NavbarBrand';
+import deprecationWarning from './utils/deprecationWarning';
+
+export default deprecationWarning.wrapper(NavbarBrand, {
+  message:
+    'The `NavBrand` component has been renamed to: `NavbarBrand`. ' +
+    'Please use that component instead; this alias will be removed in an upcoming release'
+});
diff --git a/src/Navbar.js b/src/Navbar.js
index 27d3a1d9a9..731cf68a8b 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,38 +1,67 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import uncontrollable from 'uncontrollable';
 import classNames from 'classnames';
-import deprecated from 'react-prop-types/lib/deprecated';
 import elementType from 'react-prop-types/lib/elementType';
 
 import Grid from './Grid';
-import NavBrand from './NavBrand';
+import NavbarBrand from './NavbarBrand';
+import NavbarHeader from './NavbarHeader';
+import NavbarToggle from './NavbarToggle';
+import NavbarCollapse from './NavbarCollapse';
 
-import tbsUtils, { bsClass, bsStyles } from './utils/bootstrapUtils';
+import tbsUtils, { bsClass as bsClasses, bsStyles } from './utils/bootstrapUtils';
 import { DEFAULT, INVERSE } from './styleMaps';
-import createChainedFunction from './utils/createChainedFunction';
-import ValidComponentChildren from './utils/ValidComponentChildren';
 
-const Navbar = React.createClass({
+let Navbar = React.createClass({
 
   propTypes: {
+    /**
+     * Create a fixed navbar along the top of the screen, that scrolls with the page
+     */
     fixedTop: React.PropTypes.bool,
+    /**
+     * Create a fixed navbar along the bottom of the screen, that scrolls with the page
+     */
     fixedBottom: React.PropTypes.bool,
+    /**
+     * Create a full-width navbar that scrolls away with the page
+     */
     staticTop: React.PropTypes.bool,
+    /**
+     * An alternative dark visual style for the Navbar
+     */
     inverse: React.PropTypes.bool,
+    /**
+     * Allow the Navbar to fluidly adjust to the page or container width, instead of at the
+     * predefined screen breakpoints
+     */
     fluid: React.PropTypes.bool,
-    role: React.PropTypes.string,
+
     /**
-     * You can use a custom element for this component
+     * Set a custom element for this component.
      */
     componentClass: elementType,
-    brand: deprecated(React.PropTypes.node, 'Use the `NavBrand` component.'),
-    toggleButton: React.PropTypes.node,
-    toggleNavKey: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
-    ]),
+    /**
+     * A callback fired when the `<Navbar>` body collapses or expands.
+     * Fired when a `<Navbar.Toggle>` is clicked and called with the new `navExpanded` boolean value.
+     *
+     * @controllable navExpanded
+     */
     onToggle: React.PropTypes.func,
-    navExpanded: React.PropTypes.bool,
-    defaultNavExpanded: React.PropTypes.bool
+
+    /**
+     * Explicitly set the visiblity of the navbar body
+     *
+     * @controllable onToggle
+     */
+    navExpanded: React.PropTypes.bool
+  },
+
+  childContextTypes: {
+    $bs_navbar: PropTypes.bool,
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_onToggle: PropTypes.func,
+    $bs_navbar_navExpanded: PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -43,49 +72,29 @@ const Navbar = React.createClass({
       fixedBottom: false,
       staticTop: false,
       inverse: false,
-      fluid: false,
-      defaultNavExpanded: false
+      fluid: false
     };
   },
 
-  getInitialState() {
+  getChildContext() {
     return {
-      navExpanded: this.props.defaultNavExpanded
+      $bs_navbar: true,
+      $bs_navbar_bsClass: this.props.bsClass,
+      $bs_navbar_onToggle: this.handleToggle,
+      $bs_navbar_navExpanded: this.props.navExpanded
     };
   },
 
-  shouldComponentUpdate() {
-    // Defer any updates to this component during the `onSelect` handler.
-    return !this._isChanging;
-  },
-
   handleToggle() {
-    if (this.props.onToggle) {
-      this._isChanging = true;
-      this.props.onToggle();
-      this._isChanging = false;
-    }
-
-    this.setState({
-      navExpanded: !this.state.navExpanded
-    });
+    this.props.onToggle(!this.props.navExpanded);
   },
 
   isNavExpanded() {
-    return this.props.navExpanded != null ? this.props.navExpanded : this.state.navExpanded;
-  },
-
-  hasNavBrandChild() {
-    return ValidComponentChildren.findValidComponents(
-      this.props.children, child => child.props.bsRole === 'brand'
-    ).length > 0;
+    return !!this.props.navExpanded;
   },
 
   render() {
     const {
-      brand,
-      toggleButton,
-      toggleNavKey,
       fixedTop,
       fixedBottom,
       staticTop,
@@ -107,103 +116,55 @@ const Navbar = React.createClass({
     classes[tbsUtils.prefix(this.props, INVERSE)] = this.props.inverse;
     classes[tbsUtils.prefix(this.props, DEFAULT)] = !this.props.inverse;
 
-    const showHeader =
-      (brand || toggleButton || toggleNavKey != null) &&
-      !this.hasNavBrandChild();
-
     return (
       <ComponentClass {...props} className={classNames(className, classes)}>
         <Grid fluid={fluid}>
-          {showHeader ? this.renderBrandHeader() : null}
-          {ValidComponentChildren.map(children, this.renderChild)}
+          { children }
         </Grid>
       </ComponentClass>
     );
-  },
-
-  renderBrandHeader() {
-    let {brand} = this.props;
-    if (brand) {
-      brand = <NavBrand>{brand}</NavBrand>;
-    }
-
-    return this.renderHeader(brand);
-  },
-
-
-  renderHeader(brand) {
-    const hasToggle = this.props.toggleButton || this.props.toggleNavKey != null;
-    const headerClass = tbsUtils.prefix(this.props, 'header');
+  }
+});
 
-    return (
-      <div className={headerClass}>
-        {brand}
-        {hasToggle ? this.renderToggleButton() : null}
-      </div>
-    );
-  },
+const NAVBAR_STATES = [DEFAULT, INVERSE];
 
-  renderChild(child, index) {
-    const key = child.key != null ? child.key : index;
+Navbar = bsStyles(NAVBAR_STATES, DEFAULT,
+  bsClasses('navbar',
+    uncontrollable(Navbar, { navExpanded: 'onToggle' })
+  )
+);
 
-    if (child.props.bsRole === 'brand') {
-      return React.cloneElement(this.renderHeader(child), {key});
-    }
+function createSimpleWrapper(tag, suffix, displayName) {
+  let wrapper = (
+    { componentClass: Tag, className, ...props },
+    { $bs_navbar_bsClass: bsClass = 'navbar' }
+  ) =>
+    <Tag {...props}
+      className={classNames(className, tbsUtils.prefix({ bsClass }, suffix), {
+        [tbsUtils.prefix({ bsClass }, 'right')]: props.pullRight,
+        [tbsUtils.prefix({ bsClass }, 'left')]: props.pullLeft
+      })}
+    />;
 
-    const {toggleNavKey} = this.props;
-    const collapsible =
-      toggleNavKey != null && toggleNavKey === child.props.eventKey;
+  wrapper.displayName = displayName;
 
-    return React.cloneElement(child, {
-      navbar: true,
-      collapsible,
-      expanded: collapsible && this.isNavExpanded(),
-      key
-    });
-  },
+  wrapper.propTypes = { componentClass: elementType};
+  wrapper.defaultProps = { componentClass: tag };
 
-  renderToggleButton() {
-    const {toggleButton} = this.props;
-    const toggleClass = tbsUtils.prefix(this.props, 'toggle');
-
-    if (React.isValidElement(toggleButton)) {
-      return React.cloneElement(toggleButton, {
-        className: classNames(toggleButton.props.className, toggleClass),
-        onClick: createChainedFunction(
-          this.handleToggle, toggleButton.props.onClick
-        )
-      });
-    }
-
-    let children;
-    if (toggleButton != null) {
-      children = toggleButton;
-    } else {
-      children = [
-        <span className="sr-only" key={0}>Toggle navigation</span>,
-        <span className="icon-bar" key={1}></span>,
-        <span className="icon-bar" key={2}></span>,
-        <span className="icon-bar" key={3}></span>
-      ];
-    }
+  wrapper.contextTypes = {
+    $bs_navbar_bsClass: PropTypes.string
+  };
 
-    return (
-      <button
-        type="button"
-        onClick={this.handleToggle}
-        className={toggleClass}
-      >
-        {children}
-      </button>
-    );
-  }
+  return wrapper;
+}
 
-});
+Navbar.Brand = NavbarBrand;
+Navbar.Header = NavbarHeader;
+Navbar.Toggle = NavbarToggle;
+Navbar.Collapse = NavbarCollapse;
 
-const NAVBAR_STATES = [DEFAULT, INVERSE];
+Navbar.Form = createSimpleWrapper('div', 'form', 'NavbarForm');
+Navbar.Text = createSimpleWrapper('p', 'text', 'NavbarText');
+Navbar.Link = createSimpleWrapper('a', 'link', 'NavbarLink');
 
-export default bsStyles(NAVBAR_STATES, DEFAULT,
-  bsClass('navbar',
-    Navbar
-  )
-);
+export default Navbar;
diff --git a/src/NavbarBrand.js b/src/NavbarBrand.js
new file mode 100644
index 0000000000..8d0406018a
--- /dev/null
+++ b/src/NavbarBrand.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
+
+class NavbarBrand extends React.Component {
+
+  render() {
+    const {className, children, ...props} = this.props;
+    let { $bs_navbar_bsClass: bsClass = 'navbar' } = this.context;
+    let brandClasses = tbsUtils.prefix({ bsClass }, 'brand');
+
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        className: classNames(
+          children.props.className, className, brandClasses
+        )
+      });
+    }
+
+    return (
+      <span {...props} className={classNames(className, brandClasses)}>
+        {children}
+      </span>
+    );
+  }
+}
+
+NavbarBrand.contextTypes = {
+  $bs_navbar_bsClass: React.PropTypes.string
+};
+
+export default NavbarBrand;
diff --git a/src/NavbarCollapse.js b/src/NavbarCollapse.js
new file mode 100644
index 0000000000..bce989462a
--- /dev/null
+++ b/src/NavbarCollapse.js
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+import Collapse from './Collapse';
+
+let NavbarCollapse = React.createClass({
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_navExpanded: PropTypes.bool
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+      $bs_navbar_navExpanded: expanded,
+    } = this.context;
+
+    return (
+      <Collapse in={expanded} {...props}>
+        <div className={tbsUtils.prefix({ bsClass }, 'collapse')}>
+          { children }
+        </div>
+      </Collapse>
+    );
+  }
+});
+
+export default NavbarCollapse;
diff --git a/src/NavbarHeader.js b/src/NavbarHeader.js
new file mode 100644
index 0000000000..359aa91244
--- /dev/null
+++ b/src/NavbarHeader.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+
+let NavbarHeader = React.createClass({
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+    } = this.context;
+
+    return (
+      <div className={tbsUtils.prefix({ bsClass }, 'header')}>
+        { children }
+      </div>
+    );
+  }
+});
+
+export default NavbarHeader;
diff --git a/src/NavbarToggle.js b/src/NavbarToggle.js
new file mode 100644
index 0000000000..23aeeafd5c
--- /dev/null
+++ b/src/NavbarToggle.js
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+
+let NavbarToggle = React.createClass({
+
+  propTypes: {
+    /**
+     * The toggle content, if left empty it will render the default toggle (seen above).
+     */
+    children: PropTypes.node
+  },
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_onToggle: PropTypes.func,
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+      $bs_navbar_onToggle: onToggle
+    } = this.context;
+
+    return (
+      <button type="button"
+        onClick={onToggle}
+        className={tbsUtils.prefix({ bsClass }, 'toggle')}
+      >
+        { children || [
+          <span className="sr-only" key={0}>Toggle navigation</span>,
+          <span className="icon-bar" key={1}></span>,
+          <span className="icon-bar" key={2}></span>,
+          <span className="icon-bar" key={3}></span>
+        ]
+        }
+      </button>
+    );
+  }
+});
+
+export default NavbarToggle;
diff --git a/src/index.js b/src/index.js
index 19c15517e3..df598b787c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,6 +33,7 @@ export ModalTitle from './ModalTitle';
 export Nav from './Nav';
 export Navbar from './Navbar';
 export NavBrand from './NavBrand';
+export NavbarBrand from './NavbarBrand';
 export NavDropdown from './NavDropdown';
 export NavItem from './NavItem';
 export Overlay from './Overlay';
diff --git a/test/CollapsibleNavSpec.js b/test/CollapsibleNavSpec.js
deleted file mode 100644
index 1d48b8bb6d..0000000000
--- a/test/CollapsibleNavSpec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
-import ReactDOM from 'react-dom';
-
-import CollapsibleNav from '../src/CollapsibleNav';
-import Nav from '../src/Nav';
-import Navbar from '../src/Navbar';
-import NavItem from '../src/NavItem';
-
-describe('CollapsibleNav', () => {
-  it('Should create div and add collapse class', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1}>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse'));
-  });
-
-  it('Should handle multiple Nav elements', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1} ref='collapsible_object'>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedComponentWithType(instance.refs.collapsible_object.refs.collapsible_0, Nav));
-    assert.ok(ReactTestUtils.findRenderedComponentWithType(instance.refs.collapsible_object.refs.collapsible_1, Nav));
-  });
-
-  it('Should just render children and move along if not in <Navbar>', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <CollapsibleNav eventKey={1}>
-            <Nav>
-              <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-              <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-            </Nav>
-          </CollapsibleNav>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    let collapsibleNav = ReactTestUtils.findRenderedComponentWithType(instance, CollapsibleNav);
-    assert.notOk(ReactDOM.findDOMNode(collapsibleNav).className.match(/\navbar-collapse\b/));
-    let nav = ReactTestUtils.findRenderedComponentWithType(collapsibleNav.refs.nocollapse_0, Nav);
-    assert.ok(nav);
-  });
-
-  it('Should retain childrens classes set by className', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1} ref='collapsible_object'>
-              <Nav>
-                <NavItem eventKey={1} ref='item1' className='foo bar'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2' className='baz'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'foo'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'bar'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'baz'));
-  });
-});
diff --git a/test/NavBrandSpec.js b/test/NavBrandSpec.js
index d47e562262..2f20099a2a 100644
--- a/test/NavBrandSpec.js
+++ b/test/NavBrandSpec.js
@@ -2,13 +2,13 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ReactDOM from 'react-dom';
 
-import NavBrand from '../src/NavBrand';
+import NavbarBrand from '../src/NavbarBrand';
 
-describe('Navbrand', () => {
+describe('NavbarBrand', () => {
 
-  it('Should create navbrand SPAN element', () => {
+  it('Should create NavbarBrand SPAN element', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <NavBrand>Brand</NavBrand>
+      <NavbarBrand>Brand</NavbarBrand>
     );
 
     let brand = ReactDOM.findDOMNode(instance);
@@ -18,9 +18,9 @@ describe('Navbrand', () => {
     assert.equal(brand.innerText, 'Brand');
   });
 
-  it('Should create navbrand A (link) element', () => {
+  it('Should create NavbarBrand A (link) element', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <NavBrand><a href>BrandLink</a></NavBrand>
+      <NavbarBrand><a href>BrandLink</a></NavbarBrand>
     );
 
     let brand = ReactDOM.findDOMNode(instance);
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 61937a4b6d..1aa7283321 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -3,10 +3,9 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ReactDOM from 'react-dom';
 
 import Nav from '../src/Nav';
-import NavBrand from '../src/NavBrand';
 import Navbar from '../src/Navbar';
 
-import { getOne, shouldWarn } from './helpers';
+import { getOne } from './helpers';
 
 describe('Navbar', () => {
 
@@ -69,152 +68,171 @@ describe('Navbar', () => {
     assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'HEADER');
   });
 
-  it('Should throw a deprecation warning message when brand is passed', () => {
-    ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand" />
-    );
-    shouldWarn('deprecated');
-  });
-
   it('Should add header with brand', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand" />
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Brand>Brand</Navbar.Brand>
+        </Navbar.Header>
+      </Navbar>
     );
 
     let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
 
-    assert.ok(header);
-
     let brand = getOne(header.getElementsByClassName('navbar-brand'));
 
     assert.ok(brand);
     assert.equal(brand.nodeName, 'SPAN');
     assert.equal(brand.innerText, 'Brand');
-
-    shouldWarn('deprecated');
   });
 
-  it('Should add span element with navbar-brand class using NavBrand Component', () => {
+  it('Should add link element with navbar-brand class using NavBrand Component', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar>
-        <NavBrand>Brand</NavBrand>
+        <Navbar.Header>
+          <Navbar.Brand><a>Brand</a></Navbar.Brand>
+        </Navbar.Header>
       </Navbar>
     );
 
     let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
 
     assert.ok(brand);
-    assert.equal(brand.nodeName, 'SPAN');
+    assert.equal(brand.nodeName, 'A');
     assert.equal(brand.innerText, 'Brand');
   });
 
-  it('Should add header with brand component', () => {
+  it('Should pass navbar context to navs', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand={<a>Brand</a>} />
+      <Navbar>
+        <Nav />
+      </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
-
-    assert.ok(header);
-
-    let brand = getOne(header.getElementsByClassName('navbar-brand'));
-
-    assert.ok(brand);
-    assert.equal(brand.nodeName, 'A');
-    assert.equal(brand.innerText, 'Brand');
+    let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);
 
-    shouldWarn('deprecated');
+    assert.ok(nav.context.$bs_navbar);
   });
 
-  it('Should add link element with navbar-brand class using NavBrand Component', () => {
+  it('Should add default toggle', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar>
-        <NavBrand><a>Brand</a></NavBrand>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
       </Navbar>
     );
 
-    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
-
-    assert.ok(brand);
-    assert.equal(brand.nodeName, 'A');
-    assert.equal(brand.innerText, 'Brand');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'icon-bar');
   });
 
-  it('Should add only one element with navbar-brand class using NavBrand Component', () => {
+  it('Should add custom toggle', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand">
-        <NavBrand>Brand</NavBrand>
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Toggle>
+            <span className='test'>hi</span>
+          </Navbar.Toggle>
+        </Navbar.Header>
       </Navbar>
     );
 
-    let brands = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'navbar-brand');
-
-    assert.equal(brands.length, 1);
-    assert.equal(brands[0].nodeName, 'SPAN');
-    assert.equal(brands[0].innerText, 'Brand');
-
-    shouldWarn('deprecated');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'test');
   });
 
-  it('Should pass navbar prop to navs', () => {
+  it('Should trigger onToggle', () => {
+    let toggleSpy = sinon.spy();
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar>
-        <Nav />
+      <Navbar onToggle={toggleSpy}>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
       </Navbar>
     );
 
-    let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);
+    let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
 
-    assert.ok(nav.props.navbar);
+    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
+
+    expect(toggleSpy).to.be.calledOnce;
+    expect(toggleSpy).to.be.calledWith(true);
   });
 
-  it('Should add header when toggleNavKey is 0', () => {
+  it('Should render collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={0}>
-        <Nav eventKey={0} />
+      <Navbar>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
-
-    assert.ok(header);
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse');
   });
 
-  it('Should add header when toggleNavKey is 1', () => {
+  it('Should pass navExpanded to Collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={1}>
-        <Nav eventKey={1} />
+      <Navbar defaultNavExpanded>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+    let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
 
-    assert.ok(header);
+    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
   });
 
-  it('Should add header when toggleNavKey is string', () => {
+  it.only('Should wire the toggle to the collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={'string'}>
-        <Nav eventKey={'string'} />
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+    let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
+
+    expect(collapse.context.$bs_navbar_navExpanded).to.not.be.ok;
+
+    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
 
-    assert.ok(header);
+    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
   });
 
-  it('Should show toggle button when using NavBrand', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={0}>
-        <NavBrand>Brand</NavBrand>
-        <Nav eventKey={0} />
+  it('Should pass `bsClass` down to sub components', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar bsClass='my-navbar'>
+        <Navbar.Header>
+          <Navbar.Brand />
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          <Navbar.Form/>
+          <Navbar.Text/>
+          <Navbar.Link/>
+          <Nav right/>
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    const toggle = ReactTestUtils.findRenderedDOMComponentWithClass(
-      instance, 'navbar-toggle'
-    );
-    expect(toggle).to.be.ok;
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-header');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-brand');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-toggle');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-text');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-link');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-form');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-collapse');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-nav');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-right');
   });
 });

From 0be007f9f5b3f26fe664e59932f666a79325b0c5 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 14 Nov 2015 14:17:03 -0500
Subject: [PATCH 05/10] [removed] Nav `right` prop in favor of `pullRight`

---
 src/Nav.js         | 7 ++++---
 test/NavbarSpec.js | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Nav.js b/src/Nav.js
index 2087ceebe5..fe840c87ce 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -18,11 +18,12 @@ class Nav extends React.Component {
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
 
 
-    if (this.props.navbar) {
+    if (isNavbar) {
       let bsClass = this.context.$bs_navbar_bsClass || 'navbar';
+      const navbarRight = this.props.right != null ? this.props.right : this.props.pullRight;
 
       classes[tbsUtils.prefix({ bsClass }, 'nav')] = true;
-      classes[tbsUtils.prefix({ bsClass }, 'right')] = isNavbar;
+      classes[tbsUtils.prefix({ bsClass }, 'right')] = navbarRight;
     } else {
       classes['pull-right'] = this.props.pullRight;
     }
@@ -119,7 +120,7 @@ Nav.propTypes = {
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
   pullRight: React.PropTypes.bool,
-  right: React.PropTypes.bool
+  right: deprecated(React.PropTypes.bool, 'Use the `pullRight` prop instead')
 };
 
 Nav.contextTypes = {
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 1aa7283321..63fb6d7cb8 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -186,7 +186,7 @@ describe('Navbar', () => {
     expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
   });
 
-  it.only('Should wire the toggle to the collapse', () => {
+  it('Should wire the toggle to the collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar>
         <Navbar.Header>

From 7b1c7b291ca83ebb56030a01f96d6e29768d81b5 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 15 Nov 2015 08:30:58 -0500
Subject: [PATCH 06/10] Add deprecation path!

good idea @taion, should help some folks upgrade.
---
 docs/examples/NavbarBasic.js       |   8 +-
 docs/examples/NavbarCollapsible.js |  12 +-
 src/CollapsibleNav.js              |   8 +-
 src/Nav.js                         |  51 ++++++-
 src/Navbar.js                      |  29 ++++
 src/deprecated/Navbar.js           | 220 +++++++++++++++++++++++++++++
 test/NavSpec.js                    |   2 +-
 test/NavbarSpec.js                 |  38 ++++-
 8 files changed, 346 insertions(+), 22 deletions(-)
 create mode 100644 src/deprecated/Navbar.js

diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
index b85f031484..e7cd4df4ea 100644
--- a/docs/examples/NavbarBasic.js
+++ b/docs/examples/NavbarBasic.js
@@ -9,11 +9,11 @@ const navbarInstance = (
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
       <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
-        <MenuItem eventKey="1">Action</MenuItem>
-        <MenuItem eventKey="2">Another action</MenuItem>
-        <MenuItem eventKey="3">Something else here</MenuItem>
+        <MenuItem eventKey={3.1}>Action</MenuItem>
+        <MenuItem eventKey={3.2}>Another action</MenuItem>
+        <MenuItem eventKey={3.3}>Something else here</MenuItem>
         <MenuItem divider />
-        <MenuItem eventKey="4">Separated link</MenuItem>
+        <MenuItem eventKey={3.3}>Separated link</MenuItem>
       </NavDropdown>
     </Nav>
   </Navbar>
diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
index 406750bb1c..956975f85a 100644
--- a/docs/examples/NavbarCollapsible.js
+++ b/docs/examples/NavbarCollapsible.js
@@ -10,15 +10,15 @@ const navbarInstance = (
       <Nav>
         <NavItem eventKey={1} href="#">Link</NavItem>
         <NavItem eventKey={2} href="#">Link</NavItem>
-        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
-          <MenuItem eventKey="1">Action</MenuItem>
-          <MenuItem eventKey="2">Another action</MenuItem>
-          <MenuItem eventKey="3">Something else here</MenuItem>
+        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
+          <MenuItem eventKey={3.1}>Action</MenuItem>
+          <MenuItem eventKey={3.2}>Another action</MenuItem>
+          <MenuItem eventKey={3.3}>Something else here</MenuItem>
           <MenuItem divider />
-          <MenuItem eventKey="4">Separated link</MenuItem>
+          <MenuItem eventKey={3.3}>Separated link</MenuItem>
         </NavDropdown>
       </Nav>
-      <Nav right>
+      <Nav pullRight>
         <NavItem eventKey={1} href="#">Link Right</NavItem>
         <NavItem eventKey={2} href="#">Link Right</NavItem>
       </Nav>
diff --git a/src/CollapsibleNav.js b/src/CollapsibleNav.js
index cd71ecf836..862dbf2579 100644
--- a/src/CollapsibleNav.js
+++ b/src/CollapsibleNav.js
@@ -1,11 +1,12 @@
 import React, { cloneElement } from 'react';
 import Collapse from './Collapse';
 import classNames from 'classnames';
+import deprecationWarning from './utils/deprecationWarning';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
-const CollapsibleNav = React.createClass({
+let CollapsibleNav = React.createClass({
 
   propTypes: {
     onSelect: React.PropTypes.func,
@@ -95,4 +96,7 @@ const CollapsibleNav = React.createClass({
   }
 });
 
-export default CollapsibleNav;
+export default deprecationWarning.wrapper(CollapsibleNav,
+  'CollapsibleNav', 'Navbar.Collapse',
+  'http://react-bootstrap.github.io/components.html#navbars'
+);
diff --git a/src/Nav.js b/src/Nav.js
index fe840c87ce..8b96b93dae 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -7,6 +7,8 @@ import tbsUtils, { bsStyles, bsClass as _bsClass } from './utils/bootstrapUtils'
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
+import Collapse from './Collapse';
+
 class Nav extends React.Component {
 
   render() {
@@ -17,18 +19,19 @@ class Nav extends React.Component {
     classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
 
-
     if (isNavbar) {
       let bsClass = this.context.$bs_navbar_bsClass || 'navbar';
       const navbarRight = this.props.right != null ? this.props.right : this.props.pullRight;
 
       classes[tbsUtils.prefix({ bsClass }, 'nav')] = true;
       classes[tbsUtils.prefix({ bsClass }, 'right')] = navbarRight;
+      classes[tbsUtils.prefix({ bsClass }, 'left')] = this.props.pullLeft;
     } else {
       classes['pull-right'] = this.props.pullRight;
+      classes['pull-left'] = this.props.pullLeft;
     }
 
-    return (
+    let list = (
       <ul ref="ul"
         {...this.props}
         id={ulId || id}
@@ -38,6 +41,22 @@ class Nav extends React.Component {
         {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
+
+    // TODO remove in 0.29
+    if (this.context.$bs_deprecated_navbar && this.props.collapsible) {
+      list = (
+        <Collapse
+          in={this.props.expanded}
+          className={isNavbar ? 'navbar-collapse' : void 0}
+        >
+          <div>
+            { list }
+          </div>
+        </Collapse>
+      );
+    }
+
+    return list;
   }
 
   getChildActiveProp(child) {
@@ -115,23 +134,41 @@ Nav.propTypes = {
   ulId: deprecated(React.PropTypes.string,
     'The wrapping `<nav>` has been removed you can use `id` now'),
 
-  expanded: React.PropTypes.bool,
-
+  /**
+   * Apply styling an alignment for use in a Navbar. This prop will be set
+   * automatically when the Nav is used inside a Navbar.
+   */
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
   pullRight: React.PropTypes.bool,
-  right: deprecated(React.PropTypes.bool, 'Use the `pullRight` prop instead')
+  pullLeft: React.PropTypes.bool,
+
+  right: deprecated(React.PropTypes.bool,
+    'Use the `pullRight` prop instead'),
+
+  /**
+   * @private
+   */
+  expanded: React.PropTypes.bool,
+
+  /**
+   * @private
+   */
+  collapsible: deprecated(React.PropTypes.bool,
+    'Use `Navbar.Collapse` instead, to create collapsible Navbars'),
 };
 
 Nav.contextTypes = {
   $bs_navbar: React.PropTypes.bool,
-  $bs_navbar_bsClass: React.PropTypes.string
+  $bs_navbar_bsClass: React.PropTypes.string,
+
+  $bs_deprecated_navbar: React.PropTypes.bool
 };
 
 Nav.defaultProps = {
   justified: false,
   pullRight: false,
-  right: false,
+  pullLeft: false,
   stacked: false
 };
 
diff --git a/src/Navbar.js b/src/Navbar.js
index 731cf68a8b..3f8d74742a 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -2,8 +2,11 @@ import React, { PropTypes } from 'react';
 import uncontrollable from 'uncontrollable';
 import classNames from 'classnames';
 import elementType from 'react-prop-types/lib/elementType';
+import deprecationWarning from './utils/deprecationWarning';
+import ValidComponentChildren from './utils/ValidComponentChildren';
 
 import Grid from './Grid';
+import OldNavbar from './deprecated/Navbar';
 import NavbarBrand from './NavbarBrand';
 import NavbarHeader from './NavbarHeader';
 import NavbarToggle from './NavbarToggle';
@@ -12,6 +15,21 @@ import NavbarCollapse from './NavbarCollapse';
 import tbsUtils, { bsClass as bsClasses, bsStyles } from './utils/bootstrapUtils';
 import { DEFAULT, INVERSE } from './styleMaps';
 
+let has = (obj, key) => obj && {}.hasOwnProperty.call(obj, key);
+
+function shouldRenderOldNavbar(component) {
+  let props = component.props;
+  return (
+    has(props, 'toggleButton') ||
+    has(props, 'toggleNavKey') ||
+    has(props, 'brand') ||
+    // this should be safe b/c the new version requires wrapping in a Header
+    ValidComponentChildren.findValidComponents(
+      props.children, child => child.props.bsRole === 'brand'
+    ).length > 0
+  );
+}
+
 let Navbar = React.createClass({
 
   propTypes: {
@@ -106,6 +124,17 @@ let Navbar = React.createClass({
       ...props
     } = this.props;
 
+    if (shouldRenderOldNavbar(this)) {
+      deprecationWarning({ message:
+        'Rendering a deprecated version of the Navbar due to the use of deprecated ' +
+        'props. Please use the new Navbar api, and remove `toggleButton`, `toggleNavKey`, `brand` or ' +
+        'use of the `<NavBrand>` component outside of a `<Navbar.Header>`. \n\n' +
+        'for more details see: http://react-bootstrap.github.io/components.html#navbars'
+      });
+
+      return <OldNavbar {...this.props}/>;
+    }
+
     const classes = tbsUtils.getClassSet(this.props);
 
     classes[tbsUtils.prefix(this.props, 'fixed-top')] = this.props.fixedTop;
diff --git a/src/deprecated/Navbar.js b/src/deprecated/Navbar.js
new file mode 100644
index 0000000000..f625fe19f5
--- /dev/null
+++ b/src/deprecated/Navbar.js
@@ -0,0 +1,220 @@
+import React from 'react';
+import classNames from 'classnames';
+import deprecated from 'react-prop-types/lib/deprecated';
+import elementType from 'react-prop-types/lib/elementType';
+
+import Grid from '../Grid';
+import NavBrand from '../NavBrand';
+
+import tbsUtils, { bsClass, bsStyles } from '../utils/bootstrapUtils';
+import { DEFAULT, INVERSE } from '../styleMaps';
+import createChainedFunction from '../utils/createChainedFunction';
+import ValidComponentChildren from '../utils/ValidComponentChildren';
+
+const Navbar = React.createClass({
+
+  propTypes: {
+    fixedTop: React.PropTypes.bool,
+    fixedBottom: React.PropTypes.bool,
+    staticTop: React.PropTypes.bool,
+    inverse: React.PropTypes.bool,
+    fluid: React.PropTypes.bool,
+    role: React.PropTypes.string,
+    /**
+     * You can use a custom element for this component
+     */
+    componentClass: elementType,
+    brand: deprecated(React.PropTypes.node, 'Use the `NavBrand` component.'),
+    toggleButton: React.PropTypes.node,
+    toggleNavKey: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number
+    ]),
+    onToggle: React.PropTypes.func,
+    navExpanded: React.PropTypes.bool,
+    defaultNavExpanded: React.PropTypes.bool
+  },
+
+  // TODO Remove in 0.29
+  childContextTypes: {
+    $bs_deprecated_navbar: React.PropTypes.bool
+  },
+
+  getChildContext() {
+    return {
+      $bs_deprecated_navbar: true
+    };
+  },
+
+  getDefaultProps() {
+    return {
+      role: 'navigation',
+      componentClass: 'nav',
+      fixedTop: false,
+      fixedBottom: false,
+      staticTop: false,
+      inverse: false,
+      fluid: false,
+      defaultNavExpanded: false
+    };
+  },
+
+  getInitialState() {
+    return {
+      navExpanded: this.props.defaultNavExpanded
+    };
+  },
+
+  shouldComponentUpdate() {
+    // Defer any updates to this component during the `onSelect` handler.
+    return !this._isChanging;
+  },
+
+  handleToggle() {
+    if (this.props.onToggle) {
+      this._isChanging = true;
+      this.props.onToggle();
+      this._isChanging = false;
+    }
+
+    this.setState({
+      navExpanded: !this.state.navExpanded
+    });
+  },
+
+  isNavExpanded() {
+    return this.props.navExpanded != null ? this.props.navExpanded : this.state.navExpanded;
+  },
+
+  hasNavBrandChild() {
+    return ValidComponentChildren.findValidComponents(
+      this.props.children, child => child.props.bsRole === 'brand'
+    ).length > 0;
+  },
+
+  render() {
+    const {
+      brand,
+      toggleButton,
+      toggleNavKey,
+      fixedTop,
+      fixedBottom,
+      staticTop,
+      inverse,
+      componentClass: ComponentClass,
+      fluid,
+      className,
+      children,
+      ...props
+    } = this.props;
+
+    const classes = tbsUtils.getClassSet(this.props);
+
+    classes[tbsUtils.prefix(this.props, 'fixed-top')] = this.props.fixedTop;
+    classes[tbsUtils.prefix(this.props, 'fixed-bottom')] = this.props.fixedBottom;
+    classes[tbsUtils.prefix(this.props, 'static-top')] = this.props.staticTop;
+
+    // handle built-in styles manually to provide the convenience `inverse` prop
+    classes[tbsUtils.prefix(this.props, INVERSE)] = this.props.inverse;
+    classes[tbsUtils.prefix(this.props, DEFAULT)] = !this.props.inverse;
+
+    const showHeader =
+      (brand || toggleButton || toggleNavKey != null) &&
+      !this.hasNavBrandChild();
+
+    return (
+      <ComponentClass {...props} className={classNames(className, classes)}>
+        <Grid fluid={fluid}>
+          {showHeader ? this.renderBrandHeader() : null}
+          {ValidComponentChildren.map(children, this.renderChild)}
+        </Grid>
+      </ComponentClass>
+    );
+  },
+
+  renderBrandHeader() {
+    let {brand} = this.props;
+    if (brand) {
+      brand = <NavBrand>{brand}</NavBrand>;
+    }
+
+    return this.renderHeader(brand);
+  },
+
+
+  renderHeader(brand) {
+    const hasToggle = this.props.toggleButton || this.props.toggleNavKey != null;
+    const headerClass = tbsUtils.prefix(this.props, 'header');
+
+    return (
+      <div className={headerClass}>
+        {brand}
+        {hasToggle ? this.renderToggleButton() : null}
+      </div>
+    );
+  },
+
+  renderChild(child, index) {
+    const key = child.key != null ? child.key : index;
+
+    if (child.props.bsRole === 'brand') {
+      return React.cloneElement(this.renderHeader(child), {key});
+    }
+
+    const {toggleNavKey} = this.props;
+    const collapsible =
+      toggleNavKey != null && toggleNavKey === child.props.eventKey;
+
+    return React.cloneElement(child, {
+      navbar: true,
+      collapsible,
+      expanded: collapsible && this.isNavExpanded(),
+      key
+    });
+  },
+
+  renderToggleButton() {
+    const {toggleButton} = this.props;
+    const toggleClass = tbsUtils.prefix(this.props, 'toggle');
+
+    if (React.isValidElement(toggleButton)) {
+      return React.cloneElement(toggleButton, {
+        className: classNames(toggleButton.props.className, toggleClass),
+        onClick: createChainedFunction(
+          this.handleToggle, toggleButton.props.onClick
+        )
+      });
+    }
+
+    let children;
+    if (toggleButton != null) {
+      children = toggleButton;
+    } else {
+      children = [
+        <span className="sr-only" key={0}>Toggle navigation</span>,
+        <span className="icon-bar" key={1}></span>,
+        <span className="icon-bar" key={2}></span>,
+        <span className="icon-bar" key={3}></span>
+      ];
+    }
+
+    return (
+      <button
+        type="button"
+        onClick={this.handleToggle}
+        className={toggleClass}
+      >
+        {children}
+      </button>
+    );
+  }
+
+});
+
+const NAVBAR_STATES = [DEFAULT, INVERSE];
+
+export default bsStyles(NAVBAR_STATES, DEFAULT,
+  bsClass('navbar',
+    Navbar
+  )
+);
diff --git a/test/NavSpec.js b/test/NavSpec.js
index 7f4d304dca..0d33df38c8 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -65,7 +65,7 @@ describe('Nav', () => {
 
   it('Should add navbar-right class', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-          <Nav bsStyle="tabs" navbar right activeKey={1}>
+          <Nav bsStyle="tabs" navbar pullRight activeKey={1}>
             <NavItem key={1}>Tab 1 content</NavItem>
             <NavItem key={2}>Tab 2 content</NavItem>
           </Nav>
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 63fb6d7cb8..642f47ac7c 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import Nav from '../src/Nav';
 import Navbar from '../src/Navbar';
 
-import { getOne } from './helpers';
+import { getOne, shouldWarn } from './helpers';
 
 describe('Navbar', () => {
 
@@ -219,7 +219,7 @@ describe('Navbar', () => {
           <Navbar.Form/>
           <Navbar.Text/>
           <Navbar.Link/>
-          <Nav right/>
+          <Nav pullRight/>
         </Navbar.Collapse>
       </Navbar>
     );
@@ -235,4 +235,38 @@ describe('Navbar', () => {
     ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-nav');
     ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-right');
   });
+
+  describe('deprecations', ()=> {
+    it('Should add header with brand', () => {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Navbar brand="Brand" />
+      );
+
+      let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+
+      assert.ok(header);
+
+      let brand = getOne(header.getElementsByClassName('navbar-brand'));
+
+      assert.ok(brand);
+      assert.equal(brand.nodeName, 'SPAN');
+      assert.equal(brand.innerText, 'Brand');
+
+      shouldWarn('deprecated');
+    });
+
+    it('Should add header when toggleNavKey is 0', () => {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Navbar toggleNavKey={0}>
+          <Nav eventKey={0} />
+        </Navbar>
+      );
+
+      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+      ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+
+      shouldWarn('deprecated');
+    });
+  });
+
 });

From ef6f5f5139e1c75e59d821e82d1e57b655fff906 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 15 Nov 2015 09:32:19 -0500
Subject: [PATCH 07/10] fix wording

---
 docs/src/ComponentsPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 99fbdaaba6..b05728e389 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -515,8 +515,8 @@ const ComponentsPage = React.createClass({
                     , <code>inverse</code>, <code>fluid</code>.
                   </p>
                   <p>
-                    You can also align elements to the right by specifying the <code>right</code> prop on
-                    the <code>Nav</code> component.
+                    You can also align elements to the right by specifying the <code>pullRight</code> prop on
+                    the <code>Nav</code>, and other sub-components.
                   </p>
 
                   <h3><Anchor id="navbars-basic">Navbar Basic Example</Anchor></h3>

From 0b5662d696861f9cfc7442b63c861c85284e244a Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 15 Nov 2015 10:25:38 -0500
Subject: [PATCH 08/10] remove extra wrapping div in form example

---
 docs/examples/NavbarForm.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/examples/NavbarForm.js b/docs/examples/NavbarForm.js
index 9d241f0e25..87fc1f357a 100644
--- a/docs/examples/NavbarForm.js
+++ b/docs/examples/NavbarForm.js
@@ -8,9 +8,7 @@ const navbarInstance = (
     </Navbar.Header>
     <Navbar.Collapse>
       <Navbar.Form pullLeft>
-        <div className="form-group">
-          <Input type="text" placeholder="Search"/>
-        </div>
+        <Input type="text" placeholder="Search"/>
         {' '}
         <Button type="submit">Submit</Button>
       </Navbar.Form>

From f9ea41143cfb29b31817ec9a2e29e70d782ee976 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 15 Nov 2015 10:44:16 -0500
Subject: [PATCH 09/10] [changed] navbar `navExpanded` to `expanded`

---
 docs/src/ComponentsPage.js |  6 +++---
 src/Navbar.js              | 39 ++++++++++++++++++++++++++++----------
 src/NavbarCollapse.js      |  4 ++--
 test/NavbarSpec.js         | 10 +++++-----
 4 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index b05728e389..807dc71636 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -525,8 +525,8 @@ const ComponentsPage = React.createClass({
                     <h4>Additional Import Options</h4>
                     <p>
                       The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
-                      the <code>{"<Navbar/>"}</code> component, but you can also,
-                      import them directly from the <code>/lib</code> directory
+                      the <code>{"<Navbar/>"}</code> component but you can also import them directly from
+                      the <code>/lib</code> directory
                       like: <code>{'require("react-bootstrap/lib/NavbarHeader")'}</code>.
                     </p>
                   </div>
@@ -540,7 +540,7 @@ const ComponentsPage = React.createClass({
                   <p>
                     By setting the prop <code>defaultNavExpanded</code> the Navbar will start
                     expanded by default. You can also finely control the collapsing behavior by using
-                    the <code>navExpanded</code> and <code>onToggle</code> props.
+                    the <code>expanded</code> and <code>onToggle</code> props.
                   </p>
 
                   <ReactPlayground codeText={Samples.NavbarCollapsible} />
diff --git a/src/Navbar.js b/src/Navbar.js
index 3f8d74742a..166c91ca31 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,7 +1,9 @@
+/* eslint react/no-multi-comp: 0 */
 import React, { PropTypes } from 'react';
 import uncontrollable from 'uncontrollable';
 import classNames from 'classnames';
 import elementType from 'react-prop-types/lib/elementType';
+import deprecated from 'react-prop-types/lib/deprecated';
 import deprecationWarning from './utils/deprecationWarning';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
@@ -20,9 +22,11 @@ let has = (obj, key) => obj && {}.hasOwnProperty.call(obj, key);
 function shouldRenderOldNavbar(component) {
   let props = component.props;
   return (
+    has(props, 'brand') ||
     has(props, 'toggleButton') ||
     has(props, 'toggleNavKey') ||
-    has(props, 'brand') ||
+    has(props, 'navExpanded') ||
+    has(props, 'defaultNavExpanded') ||
     // this should be safe b/c the new version requires wrapping in a Header
     ValidComponentChildren.findValidComponents(
       props.children, child => child.props.bsRole === 'brand'
@@ -72,14 +76,20 @@ let Navbar = React.createClass({
      *
      * @controllable onToggle
      */
-    navExpanded: React.PropTypes.bool
+    expanded: React.PropTypes.bool,
+
+    /**
+     * @deprecated
+     */
+    navExpanded: deprecated(React.PropTypes.bool,
+      'Use `expanded` and `defaultExpanded` instead.')
   },
 
   childContextTypes: {
     $bs_navbar: PropTypes.bool,
     $bs_navbar_bsClass: PropTypes.string,
     $bs_navbar_onToggle: PropTypes.func,
-    $bs_navbar_navExpanded: PropTypes.bool,
+    $bs_navbar_expanded: PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -99,16 +109,16 @@ let Navbar = React.createClass({
       $bs_navbar: true,
       $bs_navbar_bsClass: this.props.bsClass,
       $bs_navbar_onToggle: this.handleToggle,
-      $bs_navbar_navExpanded: this.props.navExpanded
+      $bs_navbar_expanded: this.props.expanded
     };
   },
 
   handleToggle() {
-    this.props.onToggle(!this.props.navExpanded);
+    this.props.onToggle(!this.props.expanded);
   },
 
   isNavExpanded() {
-    return !!this.props.navExpanded;
+    return !!this.props.expanded;
   },
 
   render() {
@@ -127,7 +137,8 @@ let Navbar = React.createClass({
     if (shouldRenderOldNavbar(this)) {
       deprecationWarning({ message:
         'Rendering a deprecated version of the Navbar due to the use of deprecated ' +
-        'props. Please use the new Navbar api, and remove `toggleButton`, `toggleNavKey`, `brand` or ' +
+        'props. Please use the new Navbar api, and remove `toggleButton`, ' +
+        '`toggleNavKey`, `brand`, `navExpanded`, `defaultNavExpanded` props or the ' +
         'use of the `<NavBrand>` component outside of a `<Navbar.Header>`. \n\n' +
         'for more details see: http://react-bootstrap.github.io/components.html#navbars'
       });
@@ -159,7 +170,7 @@ const NAVBAR_STATES = [DEFAULT, INVERSE];
 
 Navbar = bsStyles(NAVBAR_STATES, DEFAULT,
   bsClasses('navbar',
-    uncontrollable(Navbar, { navExpanded: 'onToggle' })
+    uncontrollable(Navbar, { expanded: 'onToggle' })
   )
 );
 
@@ -177,8 +188,16 @@ function createSimpleWrapper(tag, suffix, displayName) {
 
   wrapper.displayName = displayName;
 
-  wrapper.propTypes = { componentClass: elementType};
-  wrapper.defaultProps = { componentClass: tag };
+  wrapper.propTypes = {
+    componentClass: elementType,
+    pullRight: React.PropTypes.bool,
+    pullLeft: React.PropTypes.bool,
+  };
+  wrapper.defaultProps = {
+    componentClass: tag,
+    pullRight: false,
+    pullLeft: false
+  };
 
   wrapper.contextTypes = {
     $bs_navbar_bsClass: PropTypes.string
diff --git a/src/NavbarCollapse.js b/src/NavbarCollapse.js
index bce989462a..4a4bf209e2 100644
--- a/src/NavbarCollapse.js
+++ b/src/NavbarCollapse.js
@@ -6,14 +6,14 @@ let NavbarCollapse = React.createClass({
 
   contextTypes: {
     $bs_navbar_bsClass: PropTypes.string,
-    $bs_navbar_navExpanded: PropTypes.bool
+    $bs_navbar_expanded: PropTypes.bool
   },
 
   render() {
     let { children, ...props } = this.props;
     let {
       $bs_navbar_bsClass: bsClass = 'navbar',
-      $bs_navbar_navExpanded: expanded,
+      $bs_navbar_expanded: expanded,
     } = this.context;
 
     return (
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 642f47ac7c..12a846bc16 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -172,9 +172,9 @@ describe('Navbar', () => {
     ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse');
   });
 
-  it('Should pass navExpanded to Collapse', () => {
+  it('Should pass expanded to Collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar defaultNavExpanded>
+      <Navbar defaultExpanded>
         <Navbar.Collapse>
           hello
         </Navbar.Collapse>
@@ -183,7 +183,7 @@ describe('Navbar', () => {
 
     let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
 
-    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
+    expect(collapse.context.$bs_navbar_expanded).to.equal(true);
   });
 
   it('Should wire the toggle to the collapse', () => {
@@ -201,11 +201,11 @@ describe('Navbar', () => {
     let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
     let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
 
-    expect(collapse.context.$bs_navbar_navExpanded).to.not.be.ok;
+    expect(collapse.context.$bs_navbar_expanded).to.not.be.ok;
 
     ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
 
-    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
+    expect(collapse.context.$bs_navbar_expanded).to.equal(true);
   });
 
   it('Should pass `bsClass` down to sub components', () => {

From e65bc0995f97cdcc6fcfeae4c63bf8476275005d Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Sun, 15 Nov 2015 12:27:28 -0500
Subject: [PATCH 10/10] Clean up use of Affix

- Removed vestigial Affix component
- Explain what to do in docs instead
- Switch docs to use react-overlays AutoAffix
- Move SubNav into docs, where it belongs
- Explain why we're missing scrollspy as well
---
 docs/assets/docs.css        |  32 ++------
 docs/src/ComponentsPage.js  | 160 ++++++++++++++++++++----------------
 {src => docs/src}/SubNav.js |   6 +-
 package.json                |   2 +-
 src/Affix.js                |  26 ------
 src/AffixMixin.js           | 130 -----------------------------
 src/index.js                |   3 -
 7 files changed, 103 insertions(+), 256 deletions(-)
 rename {src => docs/src}/SubNav.js (93%)
 delete mode 100644 src/Affix.js
 delete mode 100644 src/AffixMixin.js

diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 31869b39c7..560bc55907 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -535,8 +535,10 @@ body {
  */
 
 /* By default it's not affixed in mobile views, so undo that */
-.bs-docs-sidebar.affix {
-  position: static;
+@media (max-width: 991px) {
+  .bs-docs-sidebar {
+    position: static !important;
+  }
 }
 @media (min-width: 768px) {
   .bs-docs-sidebar {
@@ -628,35 +630,17 @@ body {
 
 /* Show and affix the side nav when space allows it */
 @media (min-width: 992px) {
+  .bs-docs-sidebar-holder {
+    padding-top: 20px;
+  }
   .bs-docs-sidebar .nav > .active > ul {
     display: block;
   }
-  /* Widen the fixed sidebar */
-  .bs-docs-sidebar.affix,
-  .bs-docs-sidebar.affix-bottom {
-    width: 213px;
-  }
-  .bs-docs-sidebar.affix {
-    position: fixed; /* Undo the static from mobile first approach */
-    top: 20px;
-  }
-  .bs-docs-sidebar.affix-bottom {
-    position: absolute; /* Undo the static from mobile first approach */
-  }
-  .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
-  .bs-docs-sidebar.affix .bs-docs-sidenav {
+  .bs-docs-sidebar .bs-docs-sidenav {
     margin-top: 0;
     margin-bottom: 0;
   }
 }
-@media (min-width: 1200px) {
-  /* Widen the fixed sidebar again */
-  .bs-docs-sidebar.affix-bottom,
-  .bs-docs-sidebar.affix {
-    width: 263px;
-  }
-}
-
 
 /*
  * Docs sections
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index bab62c6ead..fd119a0e7c 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -1,13 +1,7 @@
-/* eslint react/no-did-mount-set-state: 0 */
-
 import React from 'react';
-import ReactDOM from 'react-dom';
-import getOffset from 'dom-helpers/query/offset';
-import css from 'dom-helpers/style';
+import AutoAffix from 'react-overlays/lib/AutoAffix';
 
-import Affix from '../../src/Affix';
 import Nav from '../../src/Nav';
-import SubNav from '../../src/SubNav';
 import NavItem from '../../src/NavItem';
 
 import NavMain from './NavMain';
@@ -17,32 +11,31 @@ import PageFooter from './PageFooter';
 import ReactPlayground from './ReactPlayground';
 import Samples from './Samples';
 import Anchor from './Anchor';
+import SubNav from './SubNav';
 
 const ComponentsPage = React.createClass({
   getInitialState() {
     return {
-      activeNavItemHref: null,
-      navOffsetTop: null
+      activeNavItemHref: null
     };
   },
 
-  handleNavItemSelect(key, href) {
-    this.setState({
-      activeNavItemHref: href
-    });
+  getMain() {
+    return this.refs.main;
+  },
 
+  handleNavItemSelect(key, href) {
     window.location = href;
+    this.setActiveNavItem();
   },
 
   componentDidMount() {
-    let elem = ReactDOM.findDOMNode(this.refs.sideNav);
-    let sideNavOffsetTop = getOffset(elem).top;
-    let sideNavMarginTop = parseInt(css(elem.firstChild, 'marginTop'), 10);
-    let topNavHeight = ReactDOM.findDOMNode(this.refs.topNav).offsetHeight;
+    this.setActiveNavItem();
+  },
 
+  setActiveNavItem() {
     this.setState({
-      navOffsetTop: sideNavOffsetTop - topNavHeight - sideNavMarginTop,
-      navOffsetBottom: ReactDOM.findDOMNode(this.refs.footer).offsetHeight
+      activeNavItemHref: window.location.hash
     });
   },
 
@@ -55,7 +48,7 @@ const ComponentsPage = React.createClass({
             title="Components"
             subTitle="" />
 
-          <div className="container bs-docs-container">
+          <div ref="main" className="container bs-docs-container">
             <div className="row">
               <div className="col-md-9" role="main">
 
@@ -965,58 +958,87 @@ const ComponentsPage = React.createClass({
                   <h4><Anchor id="utilities-fade-props">Props</Anchor></h4>
                   <PropTable component="Fade"/>
                 </div>
+
+                {/* Missing components */}
+                <div className="bs-docs-section">
+                  <h1 className="page-header"><Anchor id="missing">Missing components</Anchor></h1>
+
+                  <p className="lead">We've intentionally omitted a few components from React-Bootstrap. Don't worry, though &ndash; we cover what to do in this section.</p>
+                </div>
+
+                <div className="bs-docs-section">
+                  <h2 className="page-header"><Anchor id="affix">Affix</Anchor></h2>
+
+                  <p>Use <a href="http://react-bootstrap.github.io/react-overlays/examples/#affixes"><code>{'<AutoAffix>'}</code> or <code>{'<Affix>'}</code> from react-overlays</a>.</p>
+                  <p>There isn't really any additional Bootstrap markup associated with affixes, so we didn't add a Bootstrap-specific affix class. The upstream ones already give you everything you need.</p>
+                </div>
+
+                <div className="bs-docs-section">
+                  <h2 className="page-header"><Anchor id="scrollspy">Scrollspy</Anchor></h2>
+
+                  <p>Setting up a scrollspy in idiomatic React requires wiring up a number of components across your entire page, both to handle elements scrolling in and to wire that up to the navigation. It's a poor fit for a component library, because it's not a standalone component.</p>
+                  <p>To implement this functionality, use a library like <a href="http://brigade.github.io/react-waypoint/">React Waypoint</a> along with a bit of your own state management.</p>
+                </div>
               </div>
 
 
-              <div className="col-md-3">
-                <Affix
-                  className="bs-docs-sidebar hidden-print"
-                  role="complementary"
-                  offsetTop={this.state.navOffsetTop}
-                  offsetBottom={this.state.navOffsetBottom}>
-                  <Nav
-                    className="bs-docs-sidenav"
-                    activeHref={this.state.activeNavItemHref}
-                    onSelect={this.handleNavItemSelect}
-                    ref="sideNav">
-                    <SubNav href="#buttons" key={1} text="Buttons">
-                      <NavItem href="#btn-groups" key={2}>Button groups</NavItem>
-                      <NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
-                      <NavItem href="#menu-item" key={25}>Menu Item</NavItem>
-                    </SubNav>
-                    <NavItem href="#panels" key={4}>Panels</NavItem>
-                    <NavItem href="#modals" key={5}>Modals</NavItem>
-                    <NavItem href="#tooltips" key={6}>Tooltips</NavItem>
-                    <NavItem href="#popovers" key={7}>Popovers</NavItem>
-                    <NavItem href="#overlays" key={27}>Overlays</NavItem>
-                    <NavItem href="#progress" key={8}>Progress bars</NavItem>
-                    <NavItem href="#navs" key={9}>Navs</NavItem>
-                    <NavItem href="#navbars" key={10}>Navbars</NavItem>
-                    <NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
-                    <NavItem href="#tabs" key={11}>Tabs</NavItem>
-                    <NavItem href="#pager" key={12}>Pager</NavItem>
-                    <NavItem href="#pagination" key={13}>Pagination</NavItem>
-                    <NavItem href="#alerts" key={14}>Alerts</NavItem>
-                    <NavItem href="#carousels" key={15}>Carousels</NavItem>
-                    <NavItem href="#grids" key={16}>Grids</NavItem>
-                    <NavItem href="#images" key={29}>Images</NavItem>
-                    <NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
-                    <NavItem href="#listgroup" key={18}>List group</NavItem>
-                    <NavItem href="#labels" key={19}>Labels</NavItem>
-                    <NavItem href="#badges" key={20}>Badges</NavItem>
-                    <NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
-                    <NavItem href="#page-header" key={22}>Page Header</NavItem>
-                    <NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
-                    <NavItem href="#wells" key={23}>Wells</NavItem>
-                    <NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
-                    <NavItem href="#tables" key={25}>Tables</NavItem>
-                    <NavItem href="#input" key={26}>Input</NavItem>
-                    <NavItem href="#utilities" key={28}>Utilities</NavItem>
-                  </Nav>
-                  <a className="back-to-top" href="#top">
-                  Back to top
-                  </a>
-                </Affix>
+              <div className="col-md-3 bs-docs-sidebar-holder">
+                <AutoAffix
+                  viewportOffsetTop={20}
+                  container={this.getMain}
+                >
+                  <div
+                    className="bs-docs-sidebar hidden-print"
+                    role="complementary"
+                  >
+                    <Nav
+                      className="bs-docs-sidenav"
+                      activeHref={this.state.activeNavItemHref}
+                      onSelect={this.handleNavItemSelect}
+                    >
+                      <SubNav href="#buttons" key={1} text="Buttons">
+                        <NavItem href="#btn-groups" key={2}>Button groups</NavItem>
+                        <NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
+                        <NavItem href="#menu-item" key={25}>Menu Item</NavItem>
+                      </SubNav>
+                      <NavItem href="#panels" key={4}>Panels</NavItem>
+                      <NavItem href="#modals" key={5}>Modals</NavItem>
+                      <NavItem href="#tooltips" key={6}>Tooltips</NavItem>
+                      <NavItem href="#popovers" key={7}>Popovers</NavItem>
+                      <NavItem href="#overlays" key={27}>Overlays</NavItem>
+                      <NavItem href="#progress" key={8}>Progress bars</NavItem>
+                      <NavItem href="#navs" key={9}>Navs</NavItem>
+                      <NavItem href="#navbars" key={10}>Navbars</NavItem>
+                      <NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
+                      <NavItem href="#tabs" key={11}>Tabs</NavItem>
+                      <NavItem href="#pager" key={12}>Pager</NavItem>
+                      <NavItem href="#pagination" key={13}>Pagination</NavItem>
+                      <NavItem href="#alerts" key={14}>Alerts</NavItem>
+                      <NavItem href="#carousels" key={15}>Carousels</NavItem>
+                      <NavItem href="#grids" key={16}>Grids</NavItem>
+                      <NavItem href="#images" key={29}>Images</NavItem>
+                      <NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
+                      <NavItem href="#listgroup" key={18}>List group</NavItem>
+                      <NavItem href="#labels" key={19}>Labels</NavItem>
+                      <NavItem href="#badges" key={20}>Badges</NavItem>
+                      <NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
+                      <NavItem href="#page-header" key={22}>Page Header</NavItem>
+                      <NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
+                      <NavItem href="#wells" key={23}>Wells</NavItem>
+                      <NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
+                      <NavItem href="#tables" key={25}>Tables</NavItem>
+                      <NavItem href="#input" key={26}>Input</NavItem>
+                      <NavItem href="#utilities" key={28}>Utilities</NavItem>
+                      <SubNav href="#missing" key={32} text="Missing components">
+                        <NavItem href="#affix" key={33}>Affix</NavItem>
+                        <NavItem href="#scrollspy" key={34}>Scrollspy</NavItem>
+                      </SubNav>
+                    </Nav>
+                    <a className="back-to-top" href="#top">
+                    Back to top
+                    </a>
+                  </div>
+                </AutoAffix>
               </div>
             </div>
           </div>
diff --git a/src/SubNav.js b/docs/src/SubNav.js
similarity index 93%
rename from src/SubNav.js
rename to docs/src/SubNav.js
index 01241710a9..8f90db39b0 100644
--- a/src/SubNav.js
+++ b/docs/src/SubNav.js
@@ -1,9 +1,9 @@
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
 
-import ValidComponentChildren from './utils/ValidComponentChildren';
-import createChainedFunction from './utils/createChainedFunction';
-import SafeAnchor from './SafeAnchor';
+import ValidComponentChildren from '../../src/utils/ValidComponentChildren';
+import createChainedFunction from '../../src/utils/createChainedFunction';
+import SafeAnchor from '../../src/SafeAnchor';
 
 const SubNav = React.createClass({
 
diff --git a/package.json b/package.json
index 1a611d92cb..236f145dcb 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "invariant": "^2.1.2",
     "keycode": "^2.1.0",
     "lodash-compat": "^3.10.1",
-    "react-overlays": "^0.5.0",
+    "react-overlays": "^0.5.1",
     "react-prop-types": "^0.3.0",
     "uncontrollable": "^3.1.3",
     "warning": "^2.1.0"
diff --git a/src/Affix.js b/src/Affix.js
deleted file mode 100644
index 13dc893690..0000000000
--- a/src/Affix.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import AffixMixin from './AffixMixin';
-
-const Affix = React.createClass({
-
-  mixins: [AffixMixin],
-
-  render() {
-    let holderStyle = {
-      top: this.state.affixPositionTop,
-      // we don't want to expose the `style` property
-      ...this.props.style // eslint-disable-line react/prop-types
-    };
-
-    return (
-      <div {...this.props}
-        className={classNames(this.props.className, this.state.affixClass)}
-        style={holderStyle}>
-        {this.props.children}
-      </div>
-    );
-  }
-});
-
-export default Affix;
diff --git a/src/AffixMixin.js b/src/AffixMixin.js
deleted file mode 100644
index 3990601a73..0000000000
--- a/src/AffixMixin.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import domUtils from './utils/domUtils';
-import getOffset from 'dom-helpers/query/offset';
-import EventListener from './utils/EventListener';
-
-const AffixMixin = {
-  propTypes: {
-    offset: React.PropTypes.number,
-    offsetTop: React.PropTypes.number,
-    offsetBottom: React.PropTypes.number
-  },
-
-  getInitialState() {
-    return {
-      affixClass: 'affix-top'
-    };
-  },
-
-  getPinnedOffset(DOMNode) {
-    if (this.pinnedOffset) {
-      return this.pinnedOffset;
-    }
-
-    DOMNode.className = DOMNode.className.replace(/affix-top|affix-bottom|affix/, '');
-    DOMNode.className += DOMNode.className.length ? ' affix' : 'affix';
-
-    this.pinnedOffset = getOffset(DOMNode).top - window.pageYOffset;
-
-    return this.pinnedOffset;
-  },
-
-  checkPosition() {
-    let DOMNode, scrollHeight, scrollTop, position, offsetTop, offsetBottom,
-      affix, affixType, affixPositionTop;
-
-    // TODO: or not visible
-    if (!this.isMounted()) {
-      return;
-    }
-
-    DOMNode = ReactDOM.findDOMNode(this);
-    scrollHeight = domUtils.getDocumentHeight();
-    scrollTop = window.pageYOffset;
-    position = getOffset(DOMNode);
-
-    if (this.affixed === 'top') {
-      position.top += scrollTop;
-    }
-
-    offsetTop = this.props.offsetTop != null ?
-      this.props.offsetTop : this.props.offset;
-    offsetBottom = this.props.offsetBottom != null ?
-      this.props.offsetBottom : this.props.offset;
-
-    if (offsetTop == null && offsetBottom == null) {
-      return;
-    }
-    if (offsetTop == null) {
-      offsetTop = 0;
-    }
-    if (offsetBottom == null) {
-      offsetBottom = 0;
-    }
-
-    if (this.unpin != null && (scrollTop + this.unpin <= position.top)) {
-      affix = false;
-    } else if (offsetBottom != null && (position.top + DOMNode.offsetHeight >= scrollHeight - offsetBottom)) {
-      affix = 'bottom';
-    } else if (offsetTop != null && (scrollTop <= offsetTop)) {
-      affix = 'top';
-    } else {
-      affix = false;
-    }
-
-    if (this.affixed === affix) {
-      return;
-    }
-
-    if (this.unpin != null) {
-      DOMNode.style.top = '';
-    }
-
-    affixType = 'affix' + (affix ? '-' + affix : '');
-
-    this.affixed = affix;
-    this.unpin = affix === 'bottom' ?
-      this.getPinnedOffset(DOMNode) : null;
-
-    if (affix === 'bottom') {
-      DOMNode.className = DOMNode.className.replace(/affix-top|affix-bottom|affix/, 'affix-bottom');
-      affixPositionTop = scrollHeight - offsetBottom - DOMNode.offsetHeight - getOffset(DOMNode).top;
-    }
-
-    this.setState({
-      affixClass: affixType,
-      affixPositionTop
-    });
-  },
-
-  checkPositionWithEventLoop() {
-    setTimeout(this.checkPosition, 0);
-  },
-
-  componentDidMount() {
-    this._onWindowScrollListener =
-      EventListener.listen(window, 'scroll', this.checkPosition);
-    this._onDocumentClickListener =
-      EventListener.listen(domUtils.ownerDocument(this), 'click', this.checkPositionWithEventLoop);
-  },
-
-  componentWillUnmount() {
-    if (this._onWindowScrollListener) {
-      this._onWindowScrollListener.remove();
-    }
-
-    if (this._onDocumentClickListener) {
-      this._onDocumentClickListener.remove();
-    }
-  },
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.affixClass === this.state.affixClass) {
-      this.checkPositionWithEventLoop();
-    }
-  }
-};
-
-export default AffixMixin;
diff --git a/src/index.js b/src/index.js
index 19c15517e3..eee927185c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,4 @@
 export Accordion from './Accordion';
-export Affix from './Affix';
-export AffixMixin from './AffixMixin';
 export Alert from './Alert';
 export Badge from './Badge';
 export Breadcrumb from './Breadcrumb';
@@ -50,7 +48,6 @@ export Row from './Row';
 export SafeAnchor from './SafeAnchor';
 export SplitButton from './SplitButton';
 export SplitButton from './SplitButton';
-export SubNav from './SubNav';
 export Tab from './Tab';
 export Table from './Table';
 export Tabs from './Tabs';