Merge branch '3.0.0-wip' into bs3-normalize

Conflicts:
	less/bootstrap.less

Makefile

@@ -16,7 +16,7 @@ build:
 	@jshint js/*.js --config js/.jshintrc
 	@jshint js/tests/unit/*.js --config js/.jshintrc
 	@echo "Running JSHint on javascript...             ${CHECK} Done"
-	@recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
+	@./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
 	@echo "Compiling LESS with Recess...               ${CHECK} Done"
 	@node docs/build
 	@cp fonts/* docs/assets/fonts/
@@ -24,8 +24,8 @@ build:
 	@cp js/tests/vendor/jquery.js docs/assets/js/
 	@echo "Compiling documentation...                  ${CHECK} Done"
 	@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
-	@uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.tmp.js
-	@echo "/**\n* Bootstrap.js v3.0.0 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
+	@./node_modules/.bin/uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
+	@echo "/**\n* Bootstrap.js v2.2.3 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
 	@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
 	@rm docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js
 	@echo "Compiling and minifying javascript...       ${CHECK} Done"
@@ -40,8 +40,8 @@ build:
 #
 
 test:
-	jshint js/*.js --config js/.jshintrc
-	jshint js/tests/unit/*.js --config js/.jshintrc
+	./node_modules/.bin/jshint js/*.js --config js/.jshintrc
+	./node_modules/.bin/jshint js/tests/unit/*.js --config js/.jshintrc
 	node js/tests/server.js &
 	phantomjs js/tests/phantom.js "http://localhost:3000/js/tests"
 	kill -9 `cat js/tests/pid.txt`
@@ -64,10 +64,10 @@ bootstrap:
 	mkdir -p bootstrap/css
 	mkdir -p bootstrap/js
 	cp fonts/* bootstrap/fonts/
-	recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
-	recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
+	./node_modules/.bin/recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
+	./node_modules/.bin/recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
 	cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
-	uglifyjs bootstrap/js/bootstrap.js -nc > bootstrap/js/bootstrap.min.tmp.js
+	./node_modules/.bin/uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
 	echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
 	cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
 	rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

composer.json

@@ -5,6 +5,5 @@
   , "homepage": "http://twitter.github.com/bootstrap/"
   , "author": "Twitter Inc."
   , "license": "Apache-2.0"
-  , "target-dir": "twitter/bootstrap"
 
 }

docs/assets/css/docs.css

@@ -83,7 +83,7 @@ hr.soften {
 
 /* Base class
 ------------------------- */
-.jumbotron {
+.bs-docs-jumbotron {
   position: relative;
   padding: 40px 0;
   color: #fff;
@@ -101,13 +101,13 @@ hr.soften {
      -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
           box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 }
-.jumbotron h1 {
+.bs-docs-jumbotron h1 {
   font-size: 80px;
   font-weight: bold;
   letter-spacing: -1px;
   line-height: 1;
 }
-.jumbotron p {
+.bs-docs-jumbotron p {
   font-size: 24px;
   font-weight: 300;
   line-height: 1.25;
@@ -115,14 +115,14 @@ hr.soften {
 }
 
 /* Link styles (used on .masthead-links as well) */
-.jumbotron a {
+.bs-docs-jumbotron a {
   color: #fff;
   color: rgba(255,255,255,.5);
   -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
           transition: all .2s ease-in-out;
 }
-.jumbotron a:hover {
+.bs-docs-jumbotron a:hover {
   color: #fff;
   text-shadow: 0 0 10px rgba(255,255,255,.25);
 }

docs/assets/js/application.js

@@ -14,12 +14,14 @@
     })
 
     // side bar
-    $('.bs-docs-sidenav').affix({
-      offset: {
-        top: function () { return $window.width() <= 980 ? 290 : 210 }
-      , bottom: 270
-      }
-    })
+    setTimeout(function () {
+      $('.bs-docs-sidenav').affix({
+        offset: {
+          top: function () { return $window.width() <= 980 ? 290 : 210 }
+        , bottom: 270
+        }
+      })
+    }, 100)
 
     // make code pretty
     window.prettyPrint && prettyPrint()
@@ -34,7 +36,7 @@
     // add tipsies to grid for scaffolding
     if ($('#gridSystem').length) {
       $('#gridSystem').tooltip({
-          selector: '.show-grid > div'
+          selector: '.show-grid > div:not(.tooltip)'
         , title: function () { return $(this).width() + 'px' }
       })
     }

docs/assets/js/bootstrap-carousel.js

@@ -28,6 +28,7 @@
 
   var Carousel = function (element, options) {
     this.$element = $(element)
+    this.$indicators = this.$element.find('.carousel-indicators')
     this.options = options
     this.options.pause == 'hover' && this.$element
       .on('mouseenter', $.proxy(this.pause, this))
@@ -44,13 +45,17 @@
       return this
     }
 
+  , getActiveIndex: function () {
+      this.$active = this.$element.find('.item.active')
+      this.$items = this.$active.parent().children()
+      return this.$items.index(this.$active)
+    }
+
   , to: function (pos) {
-      var $active = this.$element.find('.item.active')
-        , children = $active.parent().children()
-        , activePos = children.index($active)
+      var activeIndex = this.getActiveIndex()
         , that = this
 
-      if (pos > (children.length - 1) || pos < 0) return
+      if (pos > (this.$items.length - 1) || pos < 0) return
 
       if (this.sliding) {
         return this.$element.one('slid', function () {
@@ -58,11 +63,11 @@
         })
       }
 
-      if (activePos == pos) {
+      if (activeIndex == pos) {
         return this.pause().cycle()
       }
 
-      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+      return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
     }
 
   , pause: function (e) {
@@ -107,6 +112,14 @@
 
       if ($next.hasClass('active')) return
 
+      if (this.$indicators.length) {
+        this.$indicators.find('.active').removeClass('active')
+        this.$element.one('slid', function () {
+          var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
+          $nextIndicator && $nextIndicator.addClass('active')
+        })
+      }
+
       if ($.support.transition && this.$element.hasClass('slide')) {
         this.$element.trigger(e)
         if (e.isDefaultPrevented()) return
@@ -151,7 +164,7 @@
       if (!data) $this.data('carousel', (data = new Carousel(this, options)))
       if (typeof option == 'number') data.to(option)
       else if (action) data[action]()
-      else if (options.interval) data.cycle()
+      else if (options.interval) data.pause().cycle()
     })
   }
 

docs/assets/js/bootstrap-collapse.js

@@ -52,7 +52,7 @@
         , actives
         , hasData
 
-      if (this.transitioning) return
+      if (this.transitioning || this.$element.hasClass('in')) return
 
       dimension = this.dimension()
       scroll = $.camelCase(['scroll', dimension].join('-'))

docs/assets/js/bootstrap-dropdown.js

@@ -115,8 +115,9 @@
       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
     }
 
-    $parent = $(selector)
-    $parent.length || ($parent = $this.parent())
+    $parent = selector && $(selector)
+
+    if (!$parent || !$parent.length) $parent = $this.parent()
 
     return $parent
   }

docs/assets/js/bootstrap-modal.js

@@ -60,8 +60,7 @@
             that.$element.appendTo(document.body) //don't move modals dom position
           }
 
-          that.$element
-            .show()
+          that.$element.show()
 
           if (transition) {
             that.$element[0].offsetWidth // force reflow

docs/assets/js/bootstrap-tooltip.js

@@ -97,7 +97,6 @@
 
   , show: function () {
       var $tip
-        , inside
         , pos
         , actualWidth
         , actualHeight
@@ -116,19 +115,17 @@
           this.options.placement.call(this, $tip[0], this.$element[0]) :
           this.options.placement
 
-        inside = /in/.test(placement)
-
         $tip
           .detach()
           .css({ top: 0, left: 0, display: 'block' })
           .insertAfter(this.$element)
 
-        pos = this.getPosition(inside)
+        pos = this.getPosition()
 
         actualWidth = $tip[0].offsetWidth
         actualHeight = $tip[0].offsetHeight
 
-        switch (inside ? placement.split(' ')[1] : placement) {
+        switch (placement) {
           case 'bottom':
             tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
             break
@@ -193,11 +190,12 @@
       return this.getTitle()
     }
 
-  , getPosition: function (inside) {
-      return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
-        width: this.$element[0].offsetWidth
-      , height: this.$element[0].offsetHeight
-      })
+  , getPosition: function () {
+      var el = this.$element[0]
+      return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
+        width: el.offsetWidth
+      , height: el.offsetHeight
+      }, this.$element.offset())
     }
 
   , getTitle: function () {

docs/assets/js/bootstrap-typeahead.js

@@ -172,6 +172,7 @@
 
   , listen: function () {
       this.$element
+        .on('focus',    $.proxy(this.focus, this))
         .on('blur',     $.proxy(this.blur, this))
         .on('keypress', $.proxy(this.keypress, this))
         .on('keyup',    $.proxy(this.keyup, this))
@@ -183,6 +184,7 @@
       this.$menu
         .on('click', $.proxy(this.click, this))
         .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
+        .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
     }
 
   , eventSupported: function(eventName) {
@@ -256,9 +258,13 @@
       e.preventDefault()
   }
 
+  , focus: function (e) {
+      this.focused = true
+    }
+
   , blur: function (e) {
-      var that = this
-      setTimeout(function () { that.hide() }, 150)
+      this.focused = false
+      if (!this.mousedover && this.shown) this.hide()
     }
 
   , click: function (e) {
@@ -268,10 +274,16 @@
     }
 
   , mouseenter: function (e) {
+      this.mousedover = true
       this.$menu.find('.active').removeClass('active')
       $(e.currentTarget).addClass('active')
     }
 
+  , mouseleave: function (e) {
+      this.mousedover = false
+      if (!this.focused && this.shown) this.hide()
+    }
+
   }
 
 

docs/assets/js/bootstrap.js

@@ -289,6 +289,7 @@
 
   var Carousel = function (element, options) {
     this.$element = $(element)
+    this.$indicators = this.$element.find('.carousel-indicators')
     this.options = options
     this.options.pause == 'hover' && this.$element
       .on('mouseenter', $.proxy(this.pause, this))
@@ -305,13 +306,17 @@
       return this
     }
 
+  , getActiveIndex: function () {
+      this.$active = this.$element.find('.item.active')
+      this.$items = this.$active.parent().children()
+      return this.$items.index(this.$active)
+    }
+
   , to: function (pos) {
-      var $active = this.$element.find('.item.active')
-        , children = $active.parent().children()
-        , activePos = children.index($active)
+      var activeIndex = this.getActiveIndex()
         , that = this
 
-      if (pos > (children.length - 1) || pos < 0) return
+      if (pos > (this.$items.length - 1) || pos < 0) return
 
       if (this.sliding) {
         return this.$element.one('slid', function () {
@@ -319,11 +324,11 @@
         })
       }
 
-      if (activePos == pos) {
+      if (activeIndex == pos) {
         return this.pause().cycle()
       }
 
-      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+      return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
     }
 
   , pause: function (e) {
@@ -368,6 +373,14 @@
 
       if ($next.hasClass('active')) return
 
+      if (this.$indicators.length) {
+        this.$indicators.find('.active').removeClass('active')
+        this.$element.one('slid', function () {
+          var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
+          $nextIndicator && $nextIndicator.addClass('active')
+        })
+      }
+
       if ($.support.transition && this.$element.hasClass('slide')) {
         this.$element.trigger(e)
         if (e.isDefaultPrevented()) return
@@ -412,7 +425,7 @@
       if (!data) $this.data('carousel', (data = new Carousel(this, options)))
       if (typeof option == 'number') data.to(option)
       else if (action) data[action]()
-      else if (options.interval) data.cycle()
+      else if (options.interval) data.pause().cycle()
     })
   }
 
@@ -497,7 +510,7 @@
         , actives
         , hasData
 
-      if (this.transitioning) return
+      if (this.transitioning || this.$element.hasClass('in')) return
 
       dimension = this.dimension()
       scroll = $.camelCase(['scroll', dimension].join('-'))
@@ -726,8 +739,9 @@
       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
     }
 
-    $parent = $(selector)
-    $parent.length || ($parent = $this.parent())
+    $parent = selector && $(selector)
+
+    if (!$parent || !$parent.length) $parent = $this.parent()
 
     return $parent
   }
@@ -831,8 +845,7 @@
             that.$element.appendTo(document.body) //don't move modals dom position
           }
 
-          that.$element
-            .show()
+          that.$element.show()
 
           if (transition) {
             that.$element[0].offsetWidth // force reflow
@@ -1113,7 +1126,6 @@
 
   , show: function () {
       var $tip
-        , inside
         , pos
         , actualWidth
         , actualHeight
@@ -1132,19 +1144,17 @@
           this.options.placement.call(this, $tip[0], this.$element[0]) :
           this.options.placement
 
-        inside = /in/.test(placement)
-
         $tip
           .detach()
           .css({ top: 0, left: 0, display: 'block' })
           .insertAfter(this.$element)
 
-        pos = this.getPosition(inside)
+        pos = this.getPosition()
 
         actualWidth = $tip[0].offsetWidth
         actualHeight = $tip[0].offsetHeight
 
-        switch (inside ? placement.split(' ')[1] : placement) {
+        switch (placement) {
           case 'bottom':
             tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
             break
@@ -1209,11 +1219,12 @@
       return this.getTitle()
     }
 
-  , getPosition: function (inside) {
-      return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
-        width: this.$element[0].offsetWidth
-      , height: this.$element[0].offsetHeight
-      })
+  , getPosition: function () {
+      var el = this.$element[0]
+      return $.extend({}, el.getBoundingClientRect ? el.getBoundingClientRect() : {
+        width: el.offsetWidth
+      , height: el.offsetHeight
+      }, this.$element.offset())
     }
 
   , getTitle: function () {
@@ -1892,6 +1903,7 @@
 
   , listen: function () {
       this.$element
+        .on('focus',    $.proxy(this.focus, this))
         .on('blur',     $.proxy(this.blur, this))
         .on('keypress', $.proxy(this.keypress, this))
         .on('keyup',    $.proxy(this.keyup, this))
@@ -1903,6 +1915,7 @@
       this.$menu
         .on('click', $.proxy(this.click, this))
         .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
+        .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
     }
 
   , eventSupported: function(eventName) {
@@ -1976,9 +1989,13 @@
       e.preventDefault()
   }
 
+  , focus: function (e) {
+      this.focused = true
+    }
+
   , blur: function (e) {
-      var that = this
-      setTimeout(function () { that.hide() }, 150)
+      this.focused = false
+      if (!this.mousedover && this.shown) this.hide()
     }
 
   , click: function (e) {
@@ -1988,10 +2005,16 @@
     }
 
   , mouseenter: function (e) {
+      this.mousedover = true
       this.$menu.find('.active').removeClass('active')
       $(e.currentTarget).addClass('active')
     }
 
+  , mouseleave: function (e) {
+      this.mousedover = false
+      if (!this.focused && this.shown) this.hide()
+    }
+
   }
 
 

docs/components.html

@@ -68,7 +68,7 @@
 
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="bs-docs-jumbotron subhead">
   <div class="container">
     <h1>Components</h1>
     <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
@@ -90,7 +90,7 @@
           <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
           <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
           <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
-          <li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li>
+          <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
           <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
           <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
@@ -159,90 +159,6 @@
   ...
 &lt;/ul&gt;
 </pre>
-
-          <h3>Sub menus on dropdowns</h3>
-          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
-          <div class="bs-docs-example bs-docs-example-submenus">
-
-            <div class="pull-left">
-              <p class="muted">Default</p>
-              <div class="dropdown clearfix">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="pull-left">
-              <p class="muted">Dropup</p>
-              <div class="dropup">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="pull-left">
-              <p class="muted">Left submenu</p>
-              <div class="dropdown">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-                  <li><a tabindex="-1" href="#">Action</a></li>
-                  <li><a tabindex="-1" href="#">Another action</a></li>
-                  <li><a tabindex="-1" href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li class="dropdown-submenu pull-left">
-                    <a tabindex="-1" href="#">More options</a>
-                    <ul class="dropdown-menu">
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                      <li><a tabindex="-1" href="#">Second level link</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-          </div>
-<pre class="prettyprint linenums">
-&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
-  ...
-  &lt;li class="dropdown-submenu"&gt;
-    &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
         </section>
 
 
@@ -327,7 +243,7 @@
           <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
 
           <h4>Dropdowns in button groups</h4>
-          <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
+          <p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
         </section>
 
 
@@ -1511,73 +1427,13 @@
 
 
 
-        <!-- Labels and badges
+        <!-- Badges
         ================================================== -->
-        <section id="labels-badges">
+        <section id="badges">
           <div class="page-header">
-            <h1>Labels and badges</h1>
+            <h1>Badges</h1>
           </div>
-          <h3>Labels</h3>
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Labels</th>
-                <th>Markup</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <span class="label">Default</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-success">Success</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-warning">Warning</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-danger">Danger</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-info">Info</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <span class="label label-inverse">Inverse</span>
-                </td>
-                <td>
-                  <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
 
-          <h3>Badges</h3>
           <table class="table table-bordered table-striped">
             <thead>
               <tr>
@@ -1657,7 +1513,7 @@
           </table>
 
           <h3>Easily collapsible</h3>
-          <p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+          <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
         </section>
 
@@ -1670,17 +1526,17 @@
             <h1>Typographic components</h1>
           </div>
 
-          <h2>Hero unit</h2>
+          <h2>Jumbotron</h2>
           <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
           <div class="bs-docs-example">
-            <div class="hero-unit">
+            <div class="jumbotron">
               <h1>Hello, world!</h1>
               <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
               <p><a class="btn btn-primary btn-large">Learn more</a></p>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="hero-unit"&gt;
+&lt;div class="jumbotron"&gt;
   &lt;h1&gt;Heading&lt;/h1&gt;
   &lt;p&gt;Tagline&lt;/p&gt;
   &lt;p&gt;

docs/customize.html

@@ -68,7 +68,7 @@
 
 <!-- Masthead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="bs-docs-jumbotron subhead">
   <div class="container">
     <h1>Customize and download</h1>
     <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download Bootstrap</a> or customize variables, components, JavaScript plugins, and more.</p>

docs/examples/carousel.html

@@ -78,7 +78,7 @@
 
     .carousel .container {
       position: relative;
-      z-index: 10;
+      z-index: 9;
     }
 
     .carousel-control {

docs/extend.html

@@ -68,7 +68,7 @@
 
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="bs-docs-jumbotron subhead">
   <div class="container">
     <h1>Extending Bootstrap</h1>
     <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>

docs/gallery.html

@@ -68,7 +68,7 @@
 
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="bs-docs-jumbotron subhead">
   <div class="container">
     <h1>Gallery</h1>
     <p class="lead">Showcase of sites using Bootstrap.</p>