Merge branch '2.1.0-wip' of https://github.com/twitter/bootstrap into respclasses

docs/assets/css/bootstrap-responsive.css

@@ -362,6 +362,9 @@
   .uneditable-input {
     margin-left: 0;
   }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 30px;
+  }
   input.span12,
   textarea.span12,
   .uneditable-input.span12 {
@@ -704,6 +707,9 @@
   .uneditable-input {
     margin-left: 0;
   }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 20px;
+  }
   input.span12,
   textarea.span12,
   .uneditable-input.span12 {
@@ -798,6 +804,9 @@
   .thumbnails {
     margin-left: 0;
   }
+  .thumbnails > li {
+    float: none;
+  }
   [class*="span"],
   .row-fluid [class*="span"] {
     display: block;

docs/assets/css/bootstrap.css

@@ -851,7 +851,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   font-size: 21px;
   line-height: 40px;
   color: #333333;
@@ -1143,6 +1143,10 @@ textarea,
   margin-left: 0;
 }
 
+.controls-row [class*="span"] + [class*="span"] {
+  margin-left: 20px;
+}
+
 input.span12,
 textarea.span12,
 .uneditable-input.span12 {
@@ -1215,6 +1219,25 @@ textarea.span1,
   width: 50px;
 }
 
+.controls-row {
+  *zoom: 1;
+}
+
+.controls-row:before,
+.controls-row:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.controls-row:after {
+  clear: both;
+}
+
+.controls-row [class*="span"] {
+  float: left;
+}
+
 input[disabled],
 select[disabled],
 textarea[disabled],
@@ -1385,19 +1408,19 @@ select:focus:required:invalid:focus {
   *zoom: 1;
 }
 
-.input-prepend,
+.input-append,
-.input-append {
+.input-prepend {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap;
 }
 
-.input-prepend input,
 .input-append input,
-.input-prepend select,
+.input-prepend input,
 .input-append select,
-.input-prepend .uneditable-input,
+.input-prepend select,
-.input-append .uneditable-input {
+.input-append .uneditable-input,
+.input-prepend .uneditable-input {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
@@ -1408,17 +1431,17 @@ select:focus:required:invalid:focus {
           border-radius: 0 3px 3px 0;
 }
 
-.input-prepend input:focus,
 .input-append input:focus,
-.input-prepend select:focus,
+.input-prepend input:focus,
 .input-append select:focus,
-.input-prepend .uneditable-input:focus,
+.input-prepend select:focus,
-.input-append .uneditable-input:focus {
+.input-append .uneditable-input:focus,
+.input-prepend .uneditable-input:focus {
   z-index: 2;
 }
 
-.input-prepend .add-on,
+.input-append .add-on,
-.input-append .add-on {
+.input-prepend .add-on {
   display: inline-block;
   width: auto;
   height: 20px;
@@ -1434,18 +1457,18 @@ select:focus:required:invalid:focus {
   border: 1px solid #ccc;
 }
 
-.input-prepend .add-on,
 .input-append .add-on,
-.input-prepend .btn,
+.input-prepend .add-on,
-.input-append .btn {
+.input-append .btn,
+.input-prepend .btn {
   margin-left: -1px;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
 
-.input-prepend .active,
+.input-append .active,
-.input-append .active {
+.input-prepend .active {
   background-color: #a9dba9;
   border-color: #46a546;
 }
@@ -1501,7 +1524,7 @@ select:focus:required:invalid:focus {
           border-radius: 0 3px 3px 0;
 }
 
-input.search-query {
+.search-query {
   padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
@@ -1514,6 +1537,39 @@ input.search-query {
           border-radius: 14px;
 }
 
+/* Allow for input prepend/append in search forms */
+
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.form-search .input-append .search-query {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
+.form-search .input-append .btn {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .btn {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
 .form-search input,
 .form-inline input,
 .form-horizontal input,
@@ -2740,7 +2796,7 @@ button.close {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
   background-repeat: repeat-x;
   border: 1px solid #cccccc;
@@ -2764,6 +2820,7 @@ button.close {
 .btn.active,
 .btn.disabled,
 .btn[disabled] {
+  color: #333333;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
 }
@@ -2849,22 +2906,6 @@ button.close {
   line-height: 16px;
 }
 
-.btn-primary,
-.btn-primary:hover,
-.btn-warning,
-.btn-warning:hover,
-.btn-danger,
-.btn-danger:hover,
-.btn-success,
-.btn-success:hover,
-.btn-info,
-.btn-info:hover,
-.btn-inverse,
-.btn-inverse:hover {
-  color: #ffffff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-
 .btn-primary.active,
 .btn-warning.active,
 .btn-danger.active,
@@ -2880,12 +2921,14 @@ button.close {
 }
 
 .btn-primary {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #006dcc;
   *background-color: #0044cc;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
   background-repeat: repeat-x;
   border-color: #0044cc #0044cc #002a80;
@@ -2899,6 +2942,7 @@ button.close {
 .btn-primary.active,
 .btn-primary.disabled,
 .btn-primary[disabled] {
+  color: #ffffff;
   background-color: #0044cc;
   *background-color: #003bb3;
 }
@@ -2909,12 +2953,14 @@ button.close {
 }
 
 .btn-warning {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #faa732;
   *background-color: #f89406;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
   background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
   background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(top, #fbb450, #f89406);
+  background-image: linear-gradient(to bottom, #fbb450, #f89406);
   background-image: -moz-linear-gradient(top, #fbb450, #f89406);
   background-repeat: repeat-x;
   border-color: #f89406 #f89406 #ad6704;
@@ -2928,6 +2974,7 @@ button.close {
 .btn-warning.active,
 .btn-warning.disabled,
 .btn-warning[disabled] {
+  color: #ffffff;
   background-color: #f89406;
   *background-color: #df8505;
 }
@@ -2938,12 +2985,14 @@ button.close {
 }
 
 .btn-danger {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #da4f49;
   *background-color: #bd362f;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
   background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
   background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
   background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
   background-repeat: repeat-x;
   border-color: #bd362f #bd362f #802420;
@@ -2957,6 +3006,7 @@ button.close {
 .btn-danger.active,
 .btn-danger.disabled,
 .btn-danger[disabled] {
+  color: #ffffff;
   background-color: #bd362f;
   *background-color: #a9302a;
 }
@@ -2967,12 +3017,14 @@ button.close {
 }
 
 .btn-success {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #5bb75b;
   *background-color: #51a351;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
   background-image: -webkit-linear-gradient(top, #62c462, #51a351);
   background-image: -o-linear-gradient(top, #62c462, #51a351);
-  background-image: linear-gradient(top, #62c462, #51a351);
+  background-image: linear-gradient(to bottom, #62c462, #51a351);
   background-image: -moz-linear-gradient(top, #62c462, #51a351);
   background-repeat: repeat-x;
   border-color: #51a351 #51a351 #387038;
@@ -2986,6 +3038,7 @@ button.close {
 .btn-success.active,
 .btn-success.disabled,
 .btn-success[disabled] {
+  color: #ffffff;
   background-color: #51a351;
   *background-color: #499249;
 }
@@ -2996,12 +3049,14 @@ button.close {
 }
 
 .btn-info {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #49afcd;
   *background-color: #2f96b4;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
   background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
   background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: linear-gradient(top, #5bc0de, #2f96b4);
+  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
   background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
   background-repeat: repeat-x;
   border-color: #2f96b4 #2f96b4 #1f6377;
@@ -3015,6 +3070,7 @@ button.close {
 .btn-info.active,
 .btn-info.disabled,
 .btn-info[disabled] {
+  color: #ffffff;
   background-color: #2f96b4;
   *background-color: #2a85a0;
 }
@@ -3025,12 +3081,14 @@ button.close {
 }
 
 .btn-inverse {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #363636;
   *background-color: #222222;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
   background-image: -webkit-linear-gradient(top, #444444, #222222);
   background-image: -o-linear-gradient(top, #444444, #222222);
-  background-image: linear-gradient(top, #444444, #222222);
+  background-image: linear-gradient(to bottom, #444444, #222222);
   background-image: -moz-linear-gradient(top, #444444, #222222);
   background-repeat: repeat-x;
   border-color: #222222 #222222 #000000;
@@ -3044,6 +3102,7 @@ button.close {
 .btn-inverse.active,
 .btn-inverse.disabled,
 .btn-inverse[disabled] {
+  color: #ffffff;
   background-color: #222222;
   *background-color: #151515;
 }
@@ -3775,7 +3834,7 @@ input[type="submit"].btn.btn-mini {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
   background-image: -webkit-linear-gradient(top, #222222, #111111);
   background-image: -o-linear-gradient(top, #222222, #111111);
-  background-image: linear-gradient(top, #222222, #111111);
+  background-image: linear-gradient(to bottom, #222222, #111111);
   background-repeat: repeat-x;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
@@ -3828,7 +3887,7 @@ input[type="submit"].btn.btn-mini {
 
 .navbar .btn,
 .navbar .btn-group {
-  margin-top: 5px;
+  margin-top: 6px;
 }
 
 .navbar .btn-group .btn {
@@ -3855,11 +3914,12 @@ input[type="submit"].btn.btn-mini {
 .navbar-form select,
 .navbar-form .radio,
 .navbar-form .checkbox {
-  margin-top: 5px;
+  margin-top: 6px;
 }
 
 .navbar-form input,
-.navbar-form select {
+.navbar-form select,
+.navbar-form .btn {
   display: inline-block;
   margin-bottom: 0;
 }
@@ -4044,12 +4104,14 @@ input[type="submit"].btn.btn-mini {
   padding: 7px 10px;
   margin-right: 5px;
   margin-left: 5px;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #0e0e0e;
   *background-color: #040404;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
   background-image: -webkit-linear-gradient(top, #151515, #040404);
   background-image: -o-linear-gradient(top, #151515, #040404);
-  background-image: linear-gradient(top, #151515, #040404);
+  background-image: linear-gradient(to bottom, #151515, #040404);
   background-image: -moz-linear-gradient(top, #151515, #040404);
   background-repeat: repeat-x;
   border-color: #040404 #040404 #000000;
@@ -4066,6 +4128,7 @@ input[type="submit"].btn.btn-mini {
 .navbar .btn-navbar.active,
 .navbar .btn-navbar.disabled,
 .navbar .btn-navbar[disabled] {
+  color: #ffffff;
   background-color: #040404;
   *background-color: #000000;
 }
@@ -4178,7 +4241,7 @@ input[type="submit"].btn.btn-mini {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
   background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
-  background-image: linear-gradient(top, #ffffff, #f1f1f1);
+  background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
   background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
   background-repeat: repeat-x;
   border: 1px solid #e5e5e5;
@@ -4281,7 +4344,7 @@ input[type="submit"].btn.btn-mini {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
   background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
   background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
-  background-image: linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
   background-repeat: repeat-x;
   border: 1px solid #ddd;
   -webkit-border-radius: 3px;
@@ -4579,91 +4642,19 @@ input[type="submit"].btn.btn-mini {
 }
 
 .tooltip.top {
-  margin-top: -2px;
+  margin-top: -3px;
 }
 
 .tooltip.right {
-  margin-left: 2px;
+  margin-left: 3px;
 }
 
 .tooltip.bottom {
-  margin-top: 2px;
+  margin-top: 3px;
 }
 
 .tooltip.left {
-  margin-left: -2px;
+  margin-left: -3px;
-}
-
-.tooltip.top .tooltip-arrow {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-top: 10px solid #cccccc;
-  border-top: 10px solid rgba(0, 0, 0, 0.2);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent;
-}
-
-.tooltip.top .tooltip-arrow:after {
-  bottom: 1px;
-  left: -9px;
-  border-top: 9px solid #ffffff;
-  border-right: 9px solid transparent;
-  border-left: 9px solid transparent;
-}
-
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: -10px;
-  margin-top: -10px;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  border-left: 10px solid #cccccc;
-  border-left: 10px solid rgba(0, 0, 0, 0.2);
-}
-
-.tooltip.left .tooltip-arrow:after {
-  right: 1px;
-  bottom: -9px;
-  border-top: 9px solid transparent;
-  border-bottom: 9px solid transparent;
-  border-left: 9px solid #ffffff;
-}
-
-.tooltip.bottom .tooltip-arrow {
-  top: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid #cccccc;
-  border-bottom: 10px solid rgba(0, 0, 0, 0.2);
-  border-left: 10px solid transparent;
-}
-
-.tooltip.bottom .tooltip-arrow:after {
-  top: 1px;
-  left: -9px;
-  border-right: 9px solid transparent;
-  border-bottom: 9px solid #f5f5f5;
-  border-left: 9px solid transparent;
-}
-
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: -10px;
-  margin-top: -10px;
-  border-top: 10px solid transparent;
-  border-right: 10px solid #cccccc;
-  border-right: 10px solid rgba(0, 0, 0, 0.2);
-  border-bottom: 10px solid transparent;
-}
-
-.tooltip.right .tooltip-arrow:after {
-  bottom: -9px;
-  left: 1px;
-  border-top: 9px solid transparent;
-  border-right: 9px solid #ffffff;
-  border-bottom: 9px solid transparent;
 }
 
 .tooltip-inner {
@@ -4682,6 +4673,40 @@ input[type="submit"].btn.btn-mini {
   position: absolute;
   width: 0;
   height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip.top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-top-color: #000000;
+  border-width: 5px 5px 0;
+}
+
+.tooltip.right .tooltip-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  border-right-color: #000000;
+  border-width: 5px 5px 5px 0;
+}
+
+.tooltip.left .tooltip-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  border-left-color: #000000;
+  border-width: 5px 0 5px 5px;
+}
+
+.tooltip.bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-bottom-color: #000000;
+  border-width: 0 5px 5px;
 }
 
 .popover {
@@ -4690,7 +4715,7 @@ input[type="submit"].btn.btn-mini {
   left: 0;
   z-index: 1010;
   display: none;
-  width: 218px;
+  width: 238px;
   background-color: #fff;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
@@ -4721,99 +4746,14 @@ input[type="submit"].btn.btn-mini {
   margin-right: 10px;
 }
 
-.popover.top .arrow {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-top: 10px solid #cccccc;
-  border-top: 10px solid rgba(0, 0, 0, 0.2);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent;
-}
-
-.popover.top .arrow:after {
-  bottom: 1px;
-  left: -9px;
-  border-top: 9px solid #ffffff;
-  border-right: 9px solid transparent;
-  border-left: 9px solid transparent;
-}
-
-.popover.right .arrow {
-  top: 50%;
-  left: -10px;
-  margin-top: -10px;
-  border-top: 10px solid transparent;
-  border-right: 10px solid #cccccc;
-  border-right: 10px solid rgba(0, 0, 0, 0.2);
-  border-bottom: 10px solid transparent;
-}
-
-.popover.right .arrow:after {
-  bottom: -9px;
-  left: 1px;
-  border-top: 9px solid transparent;
-  border-right: 9px solid #ffffff;
-  border-bottom: 9px solid transparent;
-}
-
-.popover.bottom .arrow {
-  top: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid #cccccc;
-  border-bottom: 10px solid rgba(0, 0, 0, 0.2);
-  border-left: 10px solid transparent;
-}
-
-.popover.bottom .arrow:after {
-  top: 1px;
-  left: -9px;
-  border-right: 9px solid transparent;
-  border-bottom: 9px solid #f5f5f5;
-  border-left: 9px solid transparent;
-}
-
-.popover.left .arrow {
-  top: 50%;
-  right: -10px;
-  margin-top: -10px;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  border-left: 10px solid #cccccc;
-  border-left: 10px solid rgba(0, 0, 0, 0.2);
-}
-
-.popover.left .arrow:after {
-  right: 1px;
-  bottom: -9px;
-  border-top: 9px solid transparent;
-  border-bottom: 9px solid transparent;
-  border-left: 9px solid #ffffff;
-}
-
-.popover .arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.popover .arrow:after {
-  position: absolute;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  content: "";
-}
-
 .popover-title {
   padding: 8px 14px;
+  margin: 0;
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
   background-color: #f5f5f5;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid #dcdcdc;
   -webkit-border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
           border-radius: 5px 5px 0 0;
@@ -4829,6 +4769,81 @@ input[type="submit"].btn.btn-mini {
   margin-bottom: 0;
 }
 
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.popover .arrow:after {
+  z-index: -1;
+  content: "";
+}
+
+.popover.top .arrow {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-top-color: #ffffff;
+  border-width: 10px 10px 0;
+}
+
+.popover.top .arrow:after {
+  bottom: -1px;
+  left: -11px;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  border-width: 11px 11px 0;
+}
+
+.popover.right .arrow {
+  top: 50%;
+  left: -10px;
+  margin-top: -10px;
+  border-right-color: #ffffff;
+  border-width: 10px 10px 10px 0;
+}
+
+.popover.right .arrow:after {
+  bottom: -11px;
+  left: -1px;
+  border-right-color: rgba(0, 0, 0, 0.2);
+  border-width: 11px 11px 11px 0;
+}
+
+.popover.bottom .arrow {
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-bottom-color: #f5f5f5;
+  border-width: 0 10px 10px;
+}
+
+.popover.bottom .arrow:after {
+  top: -1px;
+  left: -11px;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  border-width: 0 11px 11px;
+}
+
+.popover.left .arrow {
+  top: 50%;
+  right: -10px;
+  margin-top: -10px;
+  border-left-color: #ffffff;
+  border-width: 10px 0 10px 10px;
+}
+
+.popover.left .arrow:after {
+  right: -1px;
+  bottom: -11px;
+  border-left-color: rgba(0, 0, 0, 0.2);
+  border-width: 11px 0 11px 11px;
+}
+
 .thumbnails {
   margin-left: -20px;
   list-style: none;
@@ -5025,7 +5040,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
   background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
   background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
-  background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
   background-repeat: repeat-x;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
@@ -5047,7 +5062,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
   background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
   background-image: -o-linear-gradient(top, #149bdf, #0480be);
-  background-image: linear-gradient(top, #149bdf, #0480be);
+  background-image: linear-gradient(to bottom, #149bdf, #0480be);
   background-image: -moz-linear-gradient(top, #149bdf, #0480be);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
@@ -5090,7 +5105,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
   background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
   background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
-  background-image: linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
 }
@@ -5110,7 +5125,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
   background-image: -webkit-linear-gradient(top, #62c462, #57a957);
   background-image: -o-linear-gradient(top, #62c462, #57a957);
-  background-image: linear-gradient(top, #62c462, #57a957);
+  background-image: linear-gradient(to bottom, #62c462, #57a957);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
 }
@@ -5130,7 +5145,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
   background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
   background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
-  background-image: linear-gradient(top, #5bc0de, #339bb9);
+  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
 }
@@ -5150,7 +5165,7 @@ a.badge:hover {
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
   background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
   background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(top, #fbb450, #f89406);
+  background-image: linear-gradient(to bottom, #fbb450, #f89406);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
 }

docs/assets/css/docs.css

@@ -598,6 +598,17 @@ form.bs-docs-example {
   line-height: 18px;
 }
 
+/* Tooltips */
+.bs-docs-tooltip-examples {
+  text-align: center;
+  margin: 0 0 10px;
+  list-style: none;
+}
+.bs-docs-tooltip-examples li {
+  display: inline;
+  padding: 0 10px;
+}
+
 /* Popovers */
 .bs-docs-example-popover {
   padding-bottom: 24px;
@@ -607,8 +618,8 @@ form.bs-docs-example {
   position: relative;
   display: block;
   float: left;
-  width: 210px;
+  width: 260px;
-  margin: 10px;
+  margin: 20px;
 }
 
 

docs/base-css.html

@@ -68,26 +68,17 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Base CSS</h1>
   <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#typography">Typography</a></li>
-        <li><a href="#code">Code</a></li>
-        <li><a href="#tables">Tables</a></li>
-        <li><a href="#forms">Forms</a></li>
-        <li><a href="#buttons">Buttons</a></li>
-        <li><a href="#icons">Icons by Glyphicons</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -103,9 +94,9 @@
 
 
 
-<!-- Typography
+    <!-- Typography
-================================================== -->
+    ================================================== -->
-<section id="typography">
+    <section id="typography">
       <div class="page-header">
         <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
       </div>
@@ -159,9 +150,9 @@
       <div class="bs-docs-example">
         <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
       </div>
-<pre class="prettyprint">
+    <pre class="prettyprint">
-&lt;em&gt;rendered as italicized text&lt;/em&gt;
+    &lt;em&gt;rendered as italicized text&lt;/em&gt;
-</pre>
+    </pre>
 
       <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
@@ -404,13 +395,13 @@
       <span class="label label-info">Heads up!</span>
       Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
     </p>
-</section>
+  </section>
 
 
 
-<!-- Code
+    <!-- Code
-================================================== -->
+    ================================================== -->
-<section id="code">
+    <section id="code">
       <div class="page-header">
         <h1>Code <small>Inline and block code snippets</small></h1>
       </div>
@@ -433,13 +424,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 </pre>
       <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
       <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
-</section>
+    </section>
 
 
 
-<!-- Tables
+    <!-- Tables
-================================================== -->
+    ================================================== -->
-<section id="tables">
+    <section id="tables">
       <div class="page-header">
         <h1>Tables <small>For, you guessed it, tabular data</small></h1>
       </div>
@@ -747,13 +738,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/table&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Forms
+    <!-- Forms
-================================================== -->
+    ================================================== -->
-<section id="forms">
+    <section id="forms">
       <div class="page-header">
         <h1>Forms</h1>
       </div>
@@ -761,6 +752,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
       <h2>Default styles</h2>
       <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
       <form class="bs-docs-example">
+        <legend>Legend</legend>
         <label>Label name</label>
         <input type="text" placeholder="Type something…">
         <p class="help-block">Example block-level help text here.</p>
@@ -831,6 +823,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
       </ul>
       <form class="bs-docs-example form-horizontal">
+        <legend>Legend</legend>
         <div class="control-group">
           <label class="control-label" for="">Email</label>
           <div class="controls">
@@ -1068,13 +1061,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;div class="input-append"&gt;
   &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &lt;/div&gt;
+</pre>
+
+      <h4>Search form</h4>
+      <form class="bs-docs-example form-search">
+        <div class="input-append">
+          <input type="text" class="span2 search-query">
+          <button type="submit" class="btn">Search</button>
+        </div>
+        <div class="input-prepend">
+          <button type="submit" class="btn">Search</button>
+          <input type="text" class="span2 search-query">
+        </div>
+      </form>
+<pre class="prettyprint linenums">
+&lt;form class="form-search"&gt;
+  &lt;input type="text" class="span2 search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
+&lt;/form&gt;
 </pre>
 
       <h3>Control sizing</h3>
       <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
       <h4>Relative sizing</h4>
-  <form class="bs-docs-example">
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
         <div class="controls docs-input-sizes">
           <input class="input-mini" type="text" placeholder=".input-mini">
           <input class="input-small" type="text" placeholder=".input-small">
@@ -1092,10 +1103,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;input class="input-xlarge" type="text"&gt;
 &lt;input class="input-xxlarge" type="text"&gt;
 </pre>
+      <p>
+        <span class="label label-info">Heads up!</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
+      </p>
 
       <h4>Grid sizing</h4>
       <p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
-  <form class="bs-docs-example">
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
         <div class="controls docs-input-sizes">
           <input class="span1" type="text" placeholder=".span1">
           <input class="span2" type="text" placeholder=".span2">
@@ -1127,6 +1141,35 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;input class="span1" type="text"&gt;
 &lt;input class="span2" type="text"&gt;
 &lt;input class="span3" type="text"&gt;
+</pre>
+
+      <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
+        <div class="controls">
+          <input class="span5" type="text" placeholder=".span5">
+        </div>
+        <div class="controls controls-row">
+          <input class="span4" type="text" placeholder=".span4">
+          <input class="span1" type="text" placeholder=".span1">
+        </div>
+        <div class="controls controls-row">
+          <input class="span3" type="text" placeholder=".span3">
+          <input class="span2" type="text" placeholder=".span2">
+        </div>
+        <div class="controls controls-row">
+          <input class="span2" type="text" placeholder=".span2">
+          <input class="span3" type="text" placeholder=".span3">
+        </div>
+        <div class="controls controls-row">
+          <input class="span1" type="text" placeholder=".span1">
+          <input class="span4" type="text" placeholder=".span4">
+        </div>
+      </form>
+<pre class="prettyprint linenums">
+&lt;div class="controls controls-row"&gt;
+  &lt;input class="span4" type="text" placeholder=".span4"&gt;
+  &lt;input class="span1" type="text" placeholder=".span1"&gt;
+&lt;/div&gt;
 </pre>
 
       <h3>Uneditable inputs</h3>
@@ -1247,13 +1290,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Buttons
+    <!-- Buttons
-================================================== -->
+    ================================================== -->
-<section id="buttons">
+    <section id="buttons">
       <div class="page-header">
         <h1>Buttons</h1>
       </div>
@@ -1368,12 +1411,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
       <h2>One class, multiple tags</h2>
       <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
-<form class="bs-docs-example">
+      <form class="bs-docs-example">
         <a class="btn" href="">Link</a>
         <button class="btn" type="submit">Button</button>
         <input class="btn" type="button" value="Input">
         <input class="btn" type="submit" value="Submit">
-</form>
+      </form>
 <pre class="prettyprint linenums">
 &lt;a class="btn" href=""&gt;Link&lt;/a&gt;
 &lt;button class="btn" type="submit"&gt;
@@ -1386,13 +1429,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 </pre>
       <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
 
-</section>
+    </section>
 
 
 
-<!-- Icons
+    <!-- Icons
-================================================== -->
+    ================================================== -->
-<section id="icons">
+    <section id="icons">
       <div class="page-header">
         <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
       </div>
@@ -1621,10 +1664,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </div>
       </form>
 
-</section>
+    </section>
 
+
+
+  </div>
 </div>
-</div>
+
 
      <!-- Footer
       ================================================== -->

docs/components.html

@@ -68,43 +68,17 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Components</h1>
   <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#dropdowns">Dropdowns</a></li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#buttonGroups">Button groups</a></li>
-            <li><a href="#buttonDropdowns">Button dropdowns</a></li>
-          </ul>
-        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Nav <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#navs">Nav, tabs, pills</a></li>
-            <li><a href="#navbar">Navbar</a></li>
-            <li><a href="#breadcrumbs">Breadcrumbs</a></li>
-            <li><a href="#pagination">Pagination</a></li>
-          </ul>
-        </li>
-        <li><a href="#labels">Labels</a></li>
-        <li><a href="#badges">Badges</a></li>
-        <li><a href="#typography">Typography</a></li>
-        <li><a href="#thumbnails">Thumbnails</a></li>
-        <li><a href="#alerts">Alerts</a></li>
-        <li><a href="#progress">Progress bars</a></li>
-        <li><a href="#misc">Misc</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
+
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -128,9 +102,9 @@
 
 
 
-<!-- Dropdowns
+    <!-- Dropdowns
-================================================== -->
+    ================================================== -->
-<section id="dropdowns">
+    <section id="dropdowns">
       <div class="page-header">
         <h1>Dropdown menus</h1>
       </div>
@@ -205,14 +179,14 @@
       <p>...</p>
 
 
-</section>
+    </section>
 
 
 
 
-<!-- Button Groups
+    <!-- Button Groups
-================================================== -->
+    ================================================== -->
-<section id="buttonGroups">
+    <section id="buttonGroups">
       <div class="page-header">
         <h1>Button groups</h1>
       </div>
@@ -290,13 +264,13 @@
 
       <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>
-</section>
+    </section>
 
 
 
-<!-- Split button dropdowns
+    <!-- Split button dropdowns
-================================================== -->
+    ================================================== -->
-<section id="buttonDropdowns">
+    <section id="buttonDropdowns">
       <div class="page-header">
         <h1>Button dropdown menus</h1>
       </div>
@@ -625,13 +599,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Nav, Tabs, & Pills
+    <!-- Nav, Tabs, & Pills
-================================================== -->
+    ================================================== -->
-<section id="navs">
+    <section id="navs">
       <div class="page-header">
         <h1>Nav: tabs, pills, and lists</small></h1>
       </div>
@@ -850,7 +824,7 @@
   &lt;li class="divider"&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
-</pre>
+    </pre>
 
 
       <hr class="bs-docs-separator">
@@ -1005,13 +979,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Navbar
+    <!-- Navbar
-================================================== -->
+    ================================================== -->
-<section id="navbar">
+    <section id="navbar">
       <div class="page-header">
         <h1>Navbar</h1>
       </div>
@@ -1307,13 +1281,13 @@
         </div><!-- /navbar -->
       </div>
 
-</section>
+    </section>
 
 
 
-<!-- Breadcrumbs
+    <!-- Breadcrumbs
-================================================== -->
+    ================================================== -->
-<section id="breadcrumbs">
+    <section id="breadcrumbs">
       <div class="page-header">
         <h1>Breadcrumbs <small></small></h1>
       </div>
@@ -1342,13 +1316,13 @@
 &lt;/ul&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Pagination
+    <!-- Pagination
-================================================== -->
+    ================================================== -->
-<section id="pagination">
+    <section id="pagination">
       <div class="page-header">
         <h1>Pagination <small>Two options for paging through content</small></h1>
       </div>
@@ -1513,13 +1487,13 @@
 &lt;/ul&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Labels
+    <!-- Labels
-================================================== -->
+    ================================================== -->
-<section id="labels">
+    <section id="labels">
       <div class="page-header">
         <h1>Inline labels <small>Label and annotate text</small></h1>
       </div>
@@ -1581,13 +1555,13 @@
           </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Badges
+    <!-- Badges
-================================================== -->
+    ================================================== -->
-<section id="badges">
+    <section id="badges">
       <div class="page-header">
         <h1>Badges <small>Indicators and unread counts</small></h1>
       </div>
@@ -1674,13 +1648,13 @@
         </tbody>
       </table>
 
-</section>
+    </section>
 
 
 
-<!-- Typographic components
+    <!-- Typographic components
-================================================== -->
+    ================================================== -->
-<section id="typography">
+    <section id="typography">
       <div class="page-header">
         <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
       </div>
@@ -1719,13 +1693,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Thumbnails
+    <!-- Thumbnails
-================================================== -->
+    ================================================== -->
-<section id="thumbnails">
+    <section id="thumbnails">
       <div class="page-header">
         <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
       </div>
@@ -1869,13 +1843,13 @@
         </li>
       </ul>
 
-</section>
+    </section>
 
 
 
-<!-- Alerts
+    <!-- Alerts
-================================================== -->
+    ================================================== -->
-<section id="alerts">
+    <section id="alerts">
       <div class="page-header">
         <h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
       </div>
@@ -1975,13 +1949,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Progress bars
+    <!-- Progress bars
-================================================== -->
+    ================================================== -->
-<section id="progress">
+    <section id="progress">
       <div class="page-header">
         <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
       </div>
@@ -2103,15 +2077,15 @@
       <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
       <p>Opera and IE do not support animations at this time.</p>
 
-</section>
+    </section>
 
 
 
 
 
-<!-- Miscellaneous
+    <!-- Miscellaneous
-================================================== -->
+    ================================================== -->
-<section id="misc">
+    <section id="misc">
       <div class="page-header">
         <h1>Miscellaneous <small>Lightweight utility components</small></h1>
       </div>
@@ -2214,7 +2188,9 @@ class="clearfix"
 }
 </pre>
 
-</section>
+    </section>
+
+
 
   </div>
 </div>

docs/extend.html

@@ -68,26 +68,32 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Extending Bootstrap</h1>
-  <p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
+  <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#builtWith">Built with Less</a></li>
-        <li><a href="#compiling">Compiling Bootstrap</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
 
-<!-- BUILT WITH LESS
+<!-- Docs nav
 ================================================== -->
-<section id="builtWith">
+<div class="row">
+  <div class="span3 bs-docs-sidebar">
+    <ul class="nav nav-list bs-docs-sidenav">
+      <li><a href="#built-with-less">Built with LESS</a></li>
+      <li><a href="#compiling">Compiling Bootstrap</a></li>
+      <li><a href="#static-assets">Use as static assets</a></li>
+    </ul>
+  </div>
+  <div class="span9">
+
+
+
+    <!-- BUILT WITH LESS
+    ================================================== -->
+    <section id="built-with-less">
       <div class="page-header">
         <h1>Built with LESS</h1>
       </div>
@@ -101,22 +107,13 @@
       <h3>Learn more</h3>
       <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
       <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
-
+    </section>
-  <h3><a href="#variables">Variables</a></h3>
-  <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
-
-  <h3><a href="#mixins">Mixins</a></h3>
-  <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
-
-  <h3>Operations</h3>
-  <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
-</section>
 
 
 
-<!-- COMPILING LESS AND BOOTSTRAP
+    <!-- COMPILING LESS AND BOOTSTRAP
-================================================== -->
+    ================================================== -->
-<section id="compiling">
+    <section id="compiling">
       <div class="page-header">
         <h1>Compiling Bootstrap with LESS</h1>
       </div>
@@ -157,7 +154,23 @@
       <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
       <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
 
-</section>
+    </section>
+
+
+
+    <!-- Static assets
+    ================================================== -->
+    <section id="static-assets">
+      <div class="page-header">
+        <h1>Use as static assets</h1>
+      </div>
+      <p>...</p>
+    </section>
+
+
+
+  </div>
+</div>
 
 
      <!-- Footer

docs/javascript.html

@@ -68,33 +68,17 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Javascript for Bootstrap</h1>
   <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#transitions">Transitions</a></li>
-        <li><a href="#modals">Modal</a></li>
-        <li><a href="#dropdowns">Dropdown</a></li>
-        <li><a href="#scrollspy">Scrollspy</a></li>
-        <li><a href="#tabs">Tab</a></li>
-        <li><a href="#tooltips">Tooltip</a></li>
-        <li><a href="#popovers">Popover</a></li>
-        <li><a href="#alerts">Alert</a></li>
-        <li><a href="#buttons">Button</a></li>
-        <li><a href="#collapse">Collapse</a></li>
-        <li><a href="#carousel">Carousel</a></li>
-        <li><a href="#typeahead">Typeahead</a></li>
-        <li><a href="#affix">Affix</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -117,10 +101,9 @@
 
 
 
-
+    <!-- Overview
-<!-- Overview
+    ================================================== -->
-================================================== -->
+    <section id="overview">
-<section id="overview">
       <div class="page-header">
         <h1>Javascript in Bootstrap</h1>
       </div>
@@ -136,13 +119,13 @@
 
 
 
-</section>
+    </section>
 
 
 
-<!-- Transitions
+    <!-- Transitions
-================================================== -->
+    ================================================== -->
-<section id="transitions">
+    <section id="transitions">
       <div class="page-header">
         <h1>Transitions <small>bootstrap-transition.js</small></h1>
       </div>
@@ -157,13 +140,13 @@
         <li>Sliding carousel panes</li>
       </ul>
 
-</section>
+    </section>
 
 
 
-<!-- Modal
+    <!-- Modal
-================================================== -->
+    ================================================== -->
-<section id="modals">
+    <section id="modals">
       <div class="page-header">
         <h1>Modals <small>bootstrap-modal.js</small></h1>
       </div>
@@ -313,7 +296,7 @@
            <td>path</td>
            <td>false</td>
            <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
-<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
+    <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
          </tr>
         </tbody>
       </table>
@@ -366,13 +349,13 @@ $('#myModal').modal({
 $('#myModal').on('hidden', function () {
   // do something…
 })</pre>
-</section>
+    </section>
 
 
 
-<!-- Dropdown
+    <!-- Dropdown
-================================================== -->
+    ================================================== -->
-<section id="dropdowns">
+    <section id="dropdowns">
       <div class="page-header">
         <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
       </div>
@@ -502,13 +485,13 @@ $('#myModal').on('hidden', function () {
       <h3>Methods</h3>
       <h4>$().dropdown()</h4>
       <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
-</section>
+    </section>
 
 
 
-<!-- ScrollSpy
+    <!-- ScrollSpy
-================================================== -->
+    ================================================== -->
-<section id="scrollspy">
+    <section id="scrollspy">
       <div class="page-header">
         <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
       </div>
@@ -617,13 +600,13 @@ $('[data-spy="scroll"]').each(function () {
         </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Tabs
+    <!-- Tabs
-================================================== -->
+    ================================================== -->
-<section id="tabs">
+    <section id="tabs">
       <div class="page-header">
         <h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
       </div>
@@ -738,12 +721,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })</pre>
-</section>
+    </section>
 
 
-<!-- Tooltips
+    <!-- Tooltips
-================================================== -->
+    ================================================== -->
-<section id="tooltips">
+    <section id="tooltips">
       <div class="page-header">
         <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
       </div>
@@ -753,10 +736,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
       <p>Hover over the links below to see tooltips:</p>
       <div class="bs-docs-example tooltip-demo">
-    <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+        <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
         </p>
       </div>
 
+      <h3>Four directions</h3>
+      <div class="bs-docs-example tooltip-demo">
+        <ul class="bs-docs-tooltip-examples">
+          <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
+          <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
+          <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
+          <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
+        </ul>
+      </div>
+
 
       <hr class="bs-docs-separator">
 
@@ -832,9 +825,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
       <h3>Markup</h3>
       <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
-<pre class="prettyprint linenums">
+    <pre class="prettyprint linenums">
-&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
+    &lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
-</pre>
+    </pre>
 
       <h3>Methods</h3>
       <h4>$().tooltip(options)</h4>
@@ -851,20 +844,19 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <h4>.tooltip('destroy')</h4>
       <p>Destroys an element's tooltip.</p>
       <pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
-</section>
+    </section>
 
 
 
-<!-- Popovers
+    <!-- Popovers
-================================================== -->
+    ================================================== -->
-<section id="popovers">
+    <section id="popovers">
       <div class="page-header">
         <h1>Popovers <small>bootstrap-popover.js</small></h1>
       </div>
 
       <h2>Examples</h2>
-  <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.</p>
+      <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
-  <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
 
       <h3>Static popover</h3>
       <p>Four options are available: top, right, bottom, and left aligned.</p>
@@ -1007,13 +999,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <h4>.popover('destroy')</h4>
       <p>Destroys an element's popover.</p>
       <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
-</section>
+    </section>
 
 
 
-<!-- Alert
+    <!-- Alert
-================================================== -->
+    ================================================== -->
-<section id="alerts">
+    <section id="alerts">
       <div class="page-header">
         <h1>Alert messages <small>bootstrap-alert.js</small></h1>
       </div>
@@ -1083,13 +1075,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 $('#my-alert').bind('closed', function () {
   // do something…
 })</pre>
-</section>
+    </section>
 
 
 
-<!-- Buttons
+    <!-- Buttons
-================================================== -->
+    ================================================== -->
-<section id="buttons">
+    <section id="buttons">
       <div class="page-header">
         <h1>Buttons <small>bootstrap-button.js</small></h1>
       </div>
@@ -1189,13 +1181,13 @@ $('#my-alert').bind('closed', function () {
 &lt;script&gt;
   $('.btn').button('complete')
 &lt;/script&gt;</pre>
-</section>
+    </section>
 
 
 
-<!-- Collapse
+    <!-- Collapse
-================================================== -->
+    ================================================== -->
-<section id="collapse">
+    <section id="collapse">
       <div class="page-header">
         <h1>Collapse <small>bootstrap-collapse.js</small></h1>
       </div>
@@ -1345,13 +1337,13 @@ $('#myCollapsible').collapse({
 $('#myCollapsible').on('hidden', function () {
   // do something…
 })</pre>
-</section>
+    </section>
 
 
 
      <!-- Carousel
-================================================== -->
+    ================================================== -->
-<section id="carousel">
+    <section id="carousel">
       <div class="page-header">
         <h1>Carousel <small>bootstrap-carousel.js</small></h1>
       </div>
@@ -1485,13 +1477,13 @@ $('.carousel').carousel({
          </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Typeahead
+    <!-- Typeahead
-================================================== -->
+    ================================================== -->
-<section id="typeahead">
+    <section id="typeahead">
       <div class="page-header">
         <h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
       </div>
@@ -1567,13 +1559,13 @@ $('.carousel').carousel({
       <h3>Methods</h3>
       <h4>.typeahead(options)</h4>
       <p>Initializes an input with a typeahead.</p>
-</section>
+    </section>
 
 
 
-<!-- Affix
+    <!-- Affix
-================================================== -->
+    ================================================== -->
-<section id="affix">
+    <section id="affix">
       <div class="page-header">
         <h1>
           Affix
@@ -1589,10 +1581,13 @@ $('.carousel').carousel({
 <pre class="prettyprint linenums">
 ...
 </pre>
-</section>
+    </section>
 
+
+
+  </div>
 </div>
-</div>
+
 
      <!-- Footer
       ================================================== -->

docs/scaffolding.html

@@ -68,26 +68,17 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Scaffolding</h1>
   <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#global">Global styles</a></li>
-        <li><a href="#gridSystem">Grid system</a></li>
-        <li><a href="#fluidGridSystem">Fluid grid system</a></li>
-        <li><a href="#gridCustomization">Customizing</a></li>
-        <li><a href="#layouts">Layouts</a></li>
-        <li><a href="#responsive">Responsive design</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -103,9 +94,9 @@
 
 
 
-<!-- Global Bootstrap settings
+    <!-- Global Bootstrap settings
-================================================== -->
+    ================================================== -->
-<section id="global">
+    <section id="global">
       <div class="page-header">
         <h1>Global styles <small>for CSS reset, typography, and links</small></h1>
       </div>
@@ -132,14 +123,14 @@
       <h2>Reset via Normalize</h2>
       <p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
 
-</section>
+    </section>
 
 
 
 
-<!-- Grid system
+    <!-- Grid system
-================================================== -->
+    ================================================== -->
-<section id="gridSystem">
+    <section id="gridSystem">
       <div class="page-header">
         <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
       </div>
@@ -237,13 +228,13 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-</section>
+    </section>
 
 
 
-<!-- Fluid grid system
+    <!-- Fluid grid system
-================================================== -->
+    ================================================== -->
-<section id="fluidGridSystem">
+    <section id="fluidGridSystem">
       <div class="page-header">
         <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
       </div>
@@ -341,13 +332,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Customizaton
+    <!-- Customizaton
-================================================== -->
+    ================================================== -->
-<section id="gridCustomization">
+    <section id="gridCustomization">
       <div class="page-header">
         <h1>Grid customization</h1>
       </div>
@@ -397,13 +388,13 @@
       <h2>Staying responsive</h2>
       <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
 
-</section>
+    </section>
 
 
 
-<!-- Layouts (Default and fluid)
+    <!-- Layouts (Default and fluid)
-================================================== -->
+    ================================================== -->
-<section id="layouts">
+    <section id="layouts">
       <div class="page-header">
         <h1>Layouts <small>Basic templates to create webpages</small></h1>
       </div>
@@ -439,14 +430,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-</section>
+    </section>
 
 
 
 
-<!-- Responsive design
+    <!-- Responsive design
-================================================== -->
+    ================================================== -->
-<section id="responsive">
+    <section id="responsive">
       <div class="page-header">
         <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
       </div>
@@ -532,9 +523,9 @@
         <thead>
           <tr>
             <th>Class</th>
-        <th>Phones <small>480px and below</small></th>
+            <th>Phones <small>767px and below</small></th>
-        <th>Tablets <small>767px and below</small></th>
+            <th>Tablets <small>979px to 768px</small></th>
-        <th>Desktops <small>768px and above</small></th>
+            <th>Desktops <small>Default</small></th>
           </tr>
         </thead>
         <tbody>
@@ -597,10 +588,13 @@
         <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
       </ul>
 
-</section>
+    </section>
 
+
+
+  </div>
 </div>
-</div>
+
 
      <!-- Footer
       ================================================== -->

docs/templates/pages/base-css.mustache

@@ -1,23 +1,14 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Base CSS{{/i}}</h1>
   <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
-        <li><a href="#code">{{_i}}Code{{/i}}</a></li>
-        <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
-        <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
-        <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
-        <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -33,9 +24,9 @@
 
 
 
-<!-- Typography
+    <!-- Typography
-================================================== -->
+    ================================================== -->
-<section id="typography">
+    <section id="typography">
       <div class="page-header">
         <h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
       </div>
@@ -94,9 +85,9 @@
       <div class="bs-docs-example">
         <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
       </div>
-<pre class="prettyprint">
+    <pre class="prettyprint">
-&lt;em&gt;rendered as italicized text&lt;/em&gt;
+    &lt;em&gt;rendered as italicized text&lt;/em&gt;
-</pre>
+    </pre>
 
       <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
 
@@ -342,13 +333,13 @@
       <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
       {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
     </p>
-</section>
+  </section>
 
 
 
-<!-- Code
+    <!-- Code
-================================================== -->
+    ================================================== -->
-<section id="code">
+    <section id="code">
       <div class="page-header">
         <h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
       </div>
@@ -371,13 +362,13 @@
 </pre>
       <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
       <p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
-</section>
+    </section>
 
 
 
-<!-- Tables
+    <!-- Tables
-================================================== -->
+    ================================================== -->
-<section id="tables">
+    <section id="tables">
       <div class="page-header">
         <h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
       </div>
@@ -685,13 +676,13 @@
 &lt;/table&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Forms
+    <!-- Forms
-================================================== -->
+    ================================================== -->
-<section id="forms">
+    <section id="forms">
       <div class="page-header">
         <h1>{{_i}}Forms{{/i}}</h1>
       </div>
@@ -699,6 +690,7 @@
       <h2>{{_i}}Default styles{{/i}}</h2>
       <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
       <form class="bs-docs-example">
+        <legend>Legend</legend>
         <label>{{_i}}Label name{{/i}}</label>
         <input type="text" placeholder="{{_i}}Type something…{{/i}}">
         <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
@@ -769,6 +761,7 @@
         <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
       </ul>
       <form class="bs-docs-example form-horizontal">
+        <legend>Legend</legend>
         <div class="control-group">
           <label class="control-label" for="">{{_i}}Email{{/i}}</label>
           <div class="controls">
@@ -1006,13 +999,31 @@
 &lt;div class="input-append"&gt;
   &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &lt;/div&gt;
+</pre>
+
+      <h4>{{_i}}Search form{{/i}}</h4>
+      <form class="bs-docs-example form-search">
+        <div class="input-append">
+          <input type="text" class="span2 search-query">
+          <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+        </div>
+        <div class="input-prepend">
+          <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+          <input type="text" class="span2 search-query">
+        </div>
+      </form>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;form class="form-search"&gt;
+  &lt;input type="text" class="span2 search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
+&lt;/form&gt;
 </pre>
 
       <h3>{{_i}}Control sizing{{/i}}</h3>
       <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
 
       <h4>{{_i}}Relative sizing{{/i}}</h4>
-  <form class="bs-docs-example">
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
         <div class="controls docs-input-sizes">
           <input class="input-mini" type="text" placeholder=".input-mini">
           <input class="input-small" type="text" placeholder=".input-small">
@@ -1030,10 +1041,13 @@
 &lt;input class="input-xlarge" type="text"&gt;
 &lt;input class="input-xxlarge" type="text"&gt;
 </pre>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
+      </p>
 
       <h4>{{_i}}Grid sizing{{/i}}</h4>
       <p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
-  <form class="bs-docs-example">
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
         <div class="controls docs-input-sizes">
           <input class="span1" type="text" placeholder=".span1">
           <input class="span2" type="text" placeholder=".span2">
@@ -1065,6 +1079,35 @@
 &lt;input class="span1" type="text"&gt;
 &lt;input class="span2" type="text"&gt;
 &lt;input class="span3" type="text"&gt;
+</pre>
+
+      <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
+      <form class="bs-docs-example" style="padding-bottom: 15px;">
+        <div class="controls">
+          <input class="span5" type="text" placeholder=".span5">
+        </div>
+        <div class="controls controls-row">
+          <input class="span4" type="text" placeholder=".span4">
+          <input class="span1" type="text" placeholder=".span1">
+        </div>
+        <div class="controls controls-row">
+          <input class="span3" type="text" placeholder=".span3">
+          <input class="span2" type="text" placeholder=".span2">
+        </div>
+        <div class="controls controls-row">
+          <input class="span2" type="text" placeholder=".span2">
+          <input class="span3" type="text" placeholder=".span3">
+        </div>
+        <div class="controls controls-row">
+          <input class="span1" type="text" placeholder=".span1">
+          <input class="span4" type="text" placeholder=".span4">
+        </div>
+      </form>
+<pre class="prettyprint linenums">
+&lt;div class="controls controls-row"&gt;
+  &lt;input class="span4" type="text" placeholder=".span4"&gt;
+  &lt;input class="span1" type="text" placeholder=".span1"&gt;
+&lt;/div&gt;
 </pre>
 
       <h3>{{_i}}Uneditable inputs{{/i}}</h3>
@@ -1185,13 +1228,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Buttons
+    <!-- Buttons
-================================================== -->
+    ================================================== -->
-<section id="buttons">
+    <section id="buttons">
       <div class="page-header">
         <h1>{{_i}}Buttons{{/i}}</h1>
       </div>
@@ -1306,12 +1349,12 @@
 
       <h2>{{_i}}One class, multiple tags{{/i}}</h2>
       <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
-<form class="bs-docs-example">
+      <form class="bs-docs-example">
         <a class="btn" href="">{{_i}}Link{{/i}}</a>
         <button class="btn" type="submit">{{_i}}Button{{/i}}</button>
         <input class="btn" type="button" value="{{_i}}Input{{/i}}">
         <input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
-</form>
+      </form>
 <pre class="prettyprint linenums">
 &lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
 &lt;button class="btn" type="submit"&gt;
@@ -1324,13 +1367,13 @@
 </pre>
       <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
 
-</section>
+    </section>
 
 
 
-<!-- Icons
+    <!-- Icons
-================================================== -->
+    ================================================== -->
-<section id="icons">
+    <section id="icons">
       <div class="page-header">
         <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
       </div>
@@ -1559,7 +1602,9 @@
         </div>
       </form>
 
-</section>
+    </section>
 
-</div>
+
-</div>
+
+  </div>{{! /span9 }}
+</div>{{! row}}

docs/templates/pages/components.mustache

@@ -1,40 +1,14 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Components{{/i}}</h1>
   <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#dropdowns">{{_i}}Dropdowns{{/i}}</a></li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
-            <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
-          </ul>
-        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Nav{{/i}} <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-            <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
-            <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
-            <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
-            <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
-          </ul>
-        </li>
-        <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
-        <li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
-        <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
-        <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
-        <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
-        <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
-        <li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
+
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -58,9 +32,9 @@
 
 
 
-<!-- Dropdowns
+    <!-- Dropdowns
-================================================== -->
+    ================================================== -->
-<section id="dropdowns">
+    <section id="dropdowns">
       <div class="page-header">
         <h1>{{_i}}Dropdown menus{{/i}}</h1>
       </div>
@@ -135,14 +109,14 @@
       <p>{{_i}}...{{/i}}</p>
 
 
-</section>
+    </section>
 
 
 
 
-<!-- Button Groups
+    <!-- Button Groups
-================================================== -->
+    ================================================== -->
-<section id="buttonGroups">
+    <section id="buttonGroups">
       <div class="page-header">
         <h1>{{_i}}Button groups{{/i}}</h1>
       </div>
@@ -220,13 +194,13 @@
 
       <h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
       <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
-</section>
+    </section>
 
 
 
-<!-- Split button dropdowns
+    <!-- Split button dropdowns
-================================================== -->
+    ================================================== -->
-<section id="buttonDropdowns">
+    <section id="buttonDropdowns">
       <div class="page-header">
         <h1>{{_i}}Button dropdown menus{{/i}}</h1>
       </div>
@@ -555,13 +529,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Nav, Tabs, & Pills
+    <!-- Nav, Tabs, & Pills
-================================================== -->
+    ================================================== -->
-<section id="navs">
+    <section id="navs">
       <div class="page-header">
         <h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1>
       </div>
@@ -780,7 +754,7 @@
   &lt;li class="divider"&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
-</pre>
+    </pre>
 
 
       <hr class="bs-docs-separator">
@@ -935,13 +909,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Navbar
+    <!-- Navbar
-================================================== -->
+    ================================================== -->
-<section id="navbar">
+    <section id="navbar">
       <div class="page-header">
         <h1>{{_i}}Navbar{{/i}}</h1>
       </div>
@@ -1237,13 +1211,13 @@
         </div><!-- /navbar -->
       </div>{{! /example }}
 
-</section>
+    </section>
 
 
 
-<!-- Breadcrumbs
+    <!-- Breadcrumbs
-================================================== -->
+    ================================================== -->
-<section id="breadcrumbs">
+    <section id="breadcrumbs">
       <div class="page-header">
         <h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
       </div>
@@ -1272,13 +1246,13 @@
 &lt;/ul&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Pagination
+    <!-- Pagination
-================================================== -->
+    ================================================== -->
-<section id="pagination">
+    <section id="pagination">
       <div class="page-header">
         <h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
       </div>
@@ -1443,13 +1417,13 @@
 &lt;/ul&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Labels
+    <!-- Labels
-================================================== -->
+    ================================================== -->
-<section id="labels">
+    <section id="labels">
       <div class="page-header">
         <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
       </div>
@@ -1511,13 +1485,13 @@
           </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Badges
+    <!-- Badges
-================================================== -->
+    ================================================== -->
-<section id="badges">
+    <section id="badges">
       <div class="page-header">
         <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
       </div>
@@ -1604,13 +1578,13 @@
         </tbody>
       </table>
 
-</section>
+    </section>
 
 
 
-<!-- Typographic components
+    <!-- Typographic components
-================================================== -->
+    ================================================== -->
-<section id="typography">
+    <section id="typography">
       <div class="page-header">
         <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
       </div>
@@ -1649,13 +1623,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Thumbnails
+    <!-- Thumbnails
-================================================== -->
+    ================================================== -->
-<section id="thumbnails">
+    <section id="thumbnails">
       <div class="page-header">
         <h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
       </div>
@@ -1799,13 +1773,13 @@
         </li>
       </ul>
 
-</section>
+    </section>
 
 
 
-<!-- Alerts
+    <!-- Alerts
-================================================== -->
+    ================================================== -->
-<section id="alerts">
+    <section id="alerts">
       <div class="page-header">
         <h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
       </div>
@@ -1905,13 +1879,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Progress bars
+    <!-- Progress bars
-================================================== -->
+    ================================================== -->
-<section id="progress">
+    <section id="progress">
       <div class="page-header">
         <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
       </div>
@@ -2033,15 +2007,15 @@
       <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
       <p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
 
-</section>
+    </section>
 
 
 
 
 
-<!-- Miscellaneous
+    <!-- Miscellaneous
-================================================== -->
+    ================================================== -->
-<section id="misc">
+    <section id="misc">
       <div class="page-header">
         <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1>
       </div>
@@ -2144,7 +2118,9 @@ class="clearfix"
 }
 </pre>
 
-</section>
+    </section>
 
-  </div>
+
-</div>
+
+  </div>{{! /span9 }}
+</div>{{! row}}

docs/templates/pages/extend.mustache

@@ -1,23 +1,29 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
-  <p class="lead">{{_i}}Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
+  <p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
-        <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
 
-<!-- BUILT WITH LESS
+<!-- Docs nav
 ================================================== -->
-<section id="builtWith">
+<div class="row">
+  <div class="span3 bs-docs-sidebar">
+    <ul class="nav nav-list bs-docs-sidenav">
+      <li><a href="#built-with-less">{{_i}}Built with LESS{{/i}}</a></li>
+      <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
+      <li><a href="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
+    </ul>
+  </div>
+  <div class="span9">
+
+
+
+    <!-- BUILT WITH LESS
+    ================================================== -->
+    <section id="built-with-less">
       <div class="page-header">
         <h1>{{_i}}Built with LESS{{/i}}</h1>
       </div>
@@ -31,22 +37,13 @@
       <h3>{{_i}}Learn more{{/i}}</h3>
       <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
       <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
-
+    </section>
-  <h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
-  <p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
-
-  <h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
-  <p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
-
-  <h3>{{_i}}Operations{{/i}}</h3>
-  <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
-</section>
 
 
 
-<!-- COMPILING LESS AND BOOTSTRAP
+    <!-- COMPILING LESS AND BOOTSTRAP
-================================================== -->
+    ================================================== -->
-<section id="compiling">
+    <section id="compiling">
       <div class="page-header">
         <h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
       </div>
@@ -87,4 +84,20 @@
       <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
       <p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
 
-</section>
+    </section>
+
+
+
+    <!-- Static assets
+    ================================================== -->
+    <section id="static-assets">
+      <div class="page-header">
+        <h1>{{_i}}Use as static assets{{/i}}</h1>
+      </div>
+      <p>...</p>
+    </section>
+
+
+
+  </div>{{! /span9 }}
+</div>{{! row}}

docs/templates/pages/javascript.mustache

@@ -1,30 +1,14 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
   <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#transitions">{{_i}}Transitions{{/i}}</a></li>
-        <li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
-        <li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
-        <li><a href="#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
-        <li><a href="#tabs">{{_i}}Tab{{/i}}</a></li>
-        <li><a href="#tooltips">{{_i}}Tooltip{{/i}}</a></li>
-        <li><a href="#popovers">{{_i}}Popover{{/i}}</a></li>
-        <li><a href="#alerts">{{_i}}Alert{{/i}}</a></li>
-        <li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
-        <li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
-        <li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
-        <li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
-        <li><a href="#affix">{{_i}}Affix{{/i}}</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -47,10 +31,9 @@
 
 
 
-
+    <!-- Overview
-<!-- Overview
+    ================================================== -->
-================================================== -->
+    <section id="overview">
-<section id="overview">
       <div class="page-header">
         <h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
       </div>
@@ -67,13 +50,13 @@
 
       {{! Thought: consider porting much of the JS readme here? }}
 
-</section>
+    </section>
 
 
 
-<!-- Transitions
+    <!-- Transitions
-================================================== -->
+    ================================================== -->
-<section id="transitions">
+    <section id="transitions">
       <div class="page-header">
         <h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
       </div>
@@ -89,13 +72,13 @@
       </ul>
 
       {{! Ideas: include docs for .fade.in, .slide.in, etc }}
-</section>
+    </section>
 
 
 
-<!-- Modal
+    <!-- Modal
-================================================== -->
+    ================================================== -->
-<section id="modals">
+    <section id="modals">
       <div class="page-header">
         <h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
       </div>
@@ -245,7 +228,7 @@
            <td>{{_i}}path{{/i}}</td>
            <td>{{_i}}false{{/i}}</td>
            <td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
-<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
+    <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
          </tr>
         </tbody>
       </table>
@@ -298,13 +281,13 @@ $('#myModal').modal({
 $('#myModal').on('hidden', function () {
   // {{_i}}do something…{{/i}}
 })</pre>
-</section>
+    </section>
 
 
 
-<!-- Dropdown
+    <!-- Dropdown
-================================================== -->
+    ================================================== -->
-<section id="dropdowns">
+    <section id="dropdowns">
       <div class="page-header">
         <h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
       </div>
@@ -434,13 +417,13 @@ $('#myModal').on('hidden', function () {
       <h3>{{_i}}Methods{{/i}}</h3>
       <h4>$().dropdown()</h4>
       <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
-</section>
+    </section>
 
 
 
-<!-- ScrollSpy
+    <!-- ScrollSpy
-================================================== -->
+    ================================================== -->
-<section id="scrollspy">
+    <section id="scrollspy">
       <div class="page-header">
         <h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
       </div>
@@ -549,13 +532,13 @@ $('[data-spy="scroll"]').each(function () {
         </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Tabs
+    <!-- Tabs
-================================================== -->
+    ================================================== -->
-<section id="tabs">
+    <section id="tabs">
       <div class="page-header">
         <h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
       </div>
@@ -670,12 +653,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })</pre>
-</section>
+    </section>
 
 
-<!-- Tooltips
+    <!-- Tooltips
-================================================== -->
+    ================================================== -->
-<section id="tooltips">
+    <section id="tooltips">
       <div class="page-header">
         <h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
       </div>
@@ -685,10 +668,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
       <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
       <div class="bs-docs-example tooltip-demo">
-    <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
+        <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
         </p>
       </div>{{! /example }}
 
+      <h3>{{_i}}Four directions{{/i}}</h3>
+      <div class="bs-docs-example tooltip-demo">
+        <ul class="bs-docs-tooltip-examples">
+          <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
+          <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
+          <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
+          <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
+        </ul>
+      </div>{{! /example }}
+
 
       <hr class="bs-docs-separator">
 
@@ -764,9 +757,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
       <h3>{{_i}}Markup{{/i}}</h3>
       <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
-<pre class="prettyprint linenums">
+    <pre class="prettyprint linenums">
-&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
+    &lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
-</pre>
+    </pre>
 
       <h3>{{_i}}Methods{{/i}}</h3>
       <h4>$().tooltip({{_i}}options{{/i}})</h4>
@@ -783,20 +776,19 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <h4>.tooltip('destroy')</h4>
       <p>{{_i}}Destroys an element's tooltip.{{/i}}</p>
       <pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
-</section>
+    </section>
 
 
 
-<!-- Popovers
+    <!-- Popovers
-================================================== -->
+    ================================================== -->
-<section id="popovers">
+    <section id="popovers">
       <div class="page-header">
         <h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
       </div>
 
       <h2>{{_i}}Examples{{/i}}</h2>
-  <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.{{/i}}</p>
+      <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
-  <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
 
       <h3>{{_i}}Static popover{{/i}}</h3>
       <p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
@@ -939,13 +931,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <h4>.popover('destroy')</h4>
       <p>{{_i}}Destroys an element's popover.{{/i}}</p>
       <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
-</section>
+    </section>
 
 
 
-<!-- Alert
+    <!-- Alert
-================================================== -->
+    ================================================== -->
-<section id="alerts">
+    <section id="alerts">
       <div class="page-header">
         <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
       </div>
@@ -1015,13 +1007,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
 })</pre>
-</section>
+    </section>
 
 
 
-<!-- Buttons
+    <!-- Buttons
-================================================== -->
+    ================================================== -->
-<section id="buttons">
+    <section id="buttons">
       <div class="page-header">
         <h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
       </div>
@@ -1121,13 +1113,13 @@ $('#my-alert').bind('closed', function () {
 &lt;script&gt;
   $('.btn').button('complete')
 &lt;/script&gt;</pre>
-</section>
+    </section>
 
 
 
-<!-- Collapse
+    <!-- Collapse
-================================================== -->
+    ================================================== -->
-<section id="collapse">
+    <section id="collapse">
       <div class="page-header">
         <h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
       </div>
@@ -1277,13 +1269,13 @@ $('#myCollapsible').collapse({
 $('#myCollapsible').on('hidden', function () {
   // {{_i}}do something…{{/i}}
 })</pre>
-</section>
+    </section>
 
 
 
      <!-- Carousel
-================================================== -->
+    ================================================== -->
-<section id="carousel">
+    <section id="carousel">
       <div class="page-header">
         <h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
       </div>
@@ -1417,13 +1409,13 @@ $('.carousel').carousel({
          </tr>
         </tbody>
       </table>
-</section>
+    </section>
 
 
 
-<!-- Typeahead
+    <!-- Typeahead
-================================================== -->
+    ================================================== -->
-<section id="typeahead">
+    <section id="typeahead">
       <div class="page-header">
         <h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
       </div>
@@ -1499,13 +1491,13 @@ $('.carousel').carousel({
       <h3>{{_i}}Methods{{/i}}</h3>
       <h4>.typeahead({{_i}}options{{/i}})</h4>
       <p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
-</section>
+    </section>
 
 
 
-<!-- Affix
+    <!-- Affix
-================================================== -->
+    ================================================== -->
-<section id="affix">
+    <section id="affix">
       <div class="page-header">
         <h1>
           {{_i}}Affix{{/i}}
@@ -1521,7 +1513,9 @@ $('.carousel').carousel({
 <pre class="prettyprint linenums">
 ...
 </pre>
-</section>
+    </section>
 
-</div>
+
-</div>
+
+  </div>{{! /span9 }}
+</div>{{! row}}

docs/templates/pages/scaffolding.mustache

@@ -1,23 +1,14 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Scaffolding{{/i}}</h1>
   <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
-        <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
-        <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
-        <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
-        <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
-        <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
-      </ul>
-    </div>
-  </div>
 </header>
 
 
+
+<!-- Docs nav
+================================================== -->
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -33,9 +24,9 @@
 
 
 
-<!-- Global Bootstrap settings
+    <!-- Global Bootstrap settings
-================================================== -->
+    ================================================== -->
-<section id="global">
+    <section id="global">
       <div class="page-header">
         <h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
       </div>
@@ -62,14 +53,14 @@
       <h2>{{_i}}Reset via Normalize{{/i}}</h2>
       <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
 
-</section>
+    </section>
 
 
 
 
-<!-- Grid system
+    <!-- Grid system
-================================================== -->
+    ================================================== -->
-<section id="gridSystem">
+    <section id="gridSystem">
       <div class="page-header">
         <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
       </div>
@@ -167,13 +158,13 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-</section>
+    </section>
 
 
 
-<!-- Fluid grid system
+    <!-- Fluid grid system
-================================================== -->
+    ================================================== -->
-<section id="fluidGridSystem">
+    <section id="fluidGridSystem">
       <div class="page-header">
         <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
       </div>
@@ -271,13 +262,13 @@
 &lt;/div&gt;
 </pre>
 
-</section>
+    </section>
 
 
 
-<!-- Customizaton
+    <!-- Customizaton
-================================================== -->
+    ================================================== -->
-<section id="gridCustomization">
+    <section id="gridCustomization">
       <div class="page-header">
         <h1>{{_i}}Grid customization{{/i}}</h1>
       </div>
@@ -327,13 +318,13 @@
       <h2>{{_i}}Staying responsive{{/i}}</h2>
       <p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
 
-</section>
+    </section>
 
 
 
-<!-- Layouts (Default and fluid)
+    <!-- Layouts (Default and fluid)
-================================================== -->
+    ================================================== -->
-<section id="layouts">
+    <section id="layouts">
       <div class="page-header">
         <h1>{{_i}}Layouts <small>Basic templates to create webpages</small>{{/i}}</h1>
       </div>
@@ -369,14 +360,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-</section>
+    </section>
 
 
 
 
-<!-- Responsive design
+    <!-- Responsive design
-================================================== -->
+    ================================================== -->
-<section id="responsive">
+    <section id="responsive">
       <div class="page-header">
         <h1>{{_i}}Responsive design <small>Media queries for various devices and resolutions</small>{{/i}}</h1>
       </div>
@@ -466,9 +457,9 @@
         <thead>
           <tr>
             <th>{{_i}}Class{{/i}}</th>
-        <th>{{_i}}Phones <small>480px and below</small>{{/i}}</th>
+            <th>{{_i}}Phones <small>767px and below</small>{{/i}}</th>
-        <th>{{_i}}Tablets <small>767px and below</small>{{/i}}</th>
+            <th>{{_i}}Tablets <small>979px to 768px</small>{{/i}}</th>
-        <th>{{_i}}Desktops <small>768px and above</small>{{/i}}</th>
+            <th>{{_i}}Desktops <small>Default</small>{{/i}}</th>
           </tr>
         </thead>
         <tbody>
@@ -531,7 +522,9 @@
         <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
 
-</section>
+    </section>
 
-</div>
+
-</div>
+
+  </div>{{! /span9 }}
+</div>{{! row}}

less/buttons.less

@@ -15,12 +15,10 @@
   font-size: 13px;
   line-height: 20px;
   *line-height: 20px;
-  color: @grayDark;
   text-align: center;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btnBackground, @btnBackgroundHighlight);
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: 1px solid @btnBorder;
   *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken(@btnBorder, 10%);
@@ -105,23 +103,6 @@
 // Alternate buttons
 // --------------------------------------------------
 
-// Set text color
-// -------------------------
-.btn-primary,
-.btn-primary:hover,
-.btn-warning,
-.btn-warning:hover,
-.btn-danger,
-.btn-danger:hover,
-.btn-success,
-.btn-success:hover,
-.btn-info,
-.btn-info:hover,
-.btn-inverse,
-.btn-inverse:hover {
-  color: @white;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-}
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
 .btn-warning.active,

less/forms.less

@@ -22,7 +22,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @baseLineHeight * 1.5;
+  margin-bottom: @baseLineHeight;
   font-size: @baseFontSize * 1.5;
   line-height: @baseLineHeight * 2;
   color: @grayDark;
@@ -290,8 +290,18 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
+// Grid sizes
 #grid > .input(@gridColumnWidth, @gridGutterWidth);
 
+// Control row for multiple inputs per line
+.controls-row {
+  .clearfix(); // Clear the float from controls
+}
+.controls-row [class*="span"] {
+  float: left; // Float to collapse white-space for proper grid alignment
+}
+
+
 
 
 // DISABLED STATE
@@ -389,8 +399,8 @@ select:focus:required:invalid {
 // ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
+.input-append,
-.input-append {
+.input-prepend {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap; // Prevent span and input from separating
@@ -479,15 +489,34 @@ select:focus:required:invalid {
 // SEARCH FORM
 // -----------
 
-input.search-query {
+.search-query {
   padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
   padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0; // remove the default margin on all inputs
+  margin-bottom: 0; // Remove the default margin on all inputs
   .border-radius(14px);
 }
 
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  .border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+  .border-radius(14px 0 0 14px)
+}
+.form-search .input-append .btn {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .search-query {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .btn {
+  .border-radius(14px 0 0 14px)
+}
+
+
 
 
 // HORIZONTAL & VERTICAL FORMS

less/mixins.less

@@ -389,7 +389,9 @@
 }
 
 // Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor) {
+.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: @textColor;
+  text-shadow: @textShadow;
   #gradient > .vertical(@primaryColor, @secondaryColor);
   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
@@ -481,14 +483,15 @@
 
 // Button backgrounds
 // ------------------
-.buttonBackground(@startColor, @endColor) {
+.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  .gradientBar(@startColor, @endColor);
+  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
   *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   .reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
+    color: @textColor;
     background-color: @endColor;
     *background-color: darken(@endColor, 5%);
   }
@@ -508,75 +511,7 @@
   margin-top: (@navbarHeight - @elementHeight) / 2;
 }
 
-// Popover arrows
+
-// -------------------------
-// For tipsies and popovers
-#popoverArrow {
-  .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    bottom: -@arrowWidth;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-top: @arrowWidth solid #ccc;
-    border-top: @arrowWidth solid @color;
-    &:after {
-      border-left: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid transparent;
-      border-top: @arrowWidth - 1 solid #fff;
-      bottom: 1px;
-      left: -@arrowWidth + 1;
-    }
-  }
-  .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: 50%;
-    left: -@arrowWidth;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid #ccc;
-    border-right: @arrowWidth solid @color;
-    &:after {
-      border-top: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid #fff;
-      bottom: -@arrowWidth + 1;
-      left: 1px;
-    }
-  }
-  .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: -@arrowWidth;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid #ccc;
-    border-bottom: @arrowWidth solid @color;
-    &:after {
-      border-left: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid #f5f5f5;
-      top: 1px;
-      left: -@arrowWidth + 1;
-    }
-  }
-  .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: 50%;
-    right: -@arrowWidth;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid #ccc;
-    border-left: @arrowWidth solid @color;
-    &:after {
-      border-top: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid transparent;
-      border-left: @arrowWidth - 1 solid #fff;
-      bottom: -@arrowWidth + 1;
-      right: 1px;
-    }
-  }
-}
 
 // Grid System
 // -----------
@@ -721,6 +656,11 @@
       margin-left: 0; // override margin-left from core grid system
     }
 
+    // Space grid-sized controls properly if multiple per line
+    .controls-row [class*="span"] + [class*="span"] {
+      margin-left: @gridGutterWidth;
+    }
+
     // generate .spanX
     .spanX (@gridColumns);
 

less/navbar.less

@@ -72,7 +72,7 @@
   // Buttons in navbar
   .btn,
   .btn-group {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
+    .navbarVerticalAlign(28px); // Vertically center in navbar
   }
   .btn-group .btn {
     margin: 0; // then undo the margin here so we don't accidentally double it
@@ -87,10 +87,11 @@
   select,
   .radio,
   .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
+    .navbarVerticalAlign(28px); // Vertically center in navbar
   }
   input,
-  select {
+  select,
+  .btn {
     display: inline-block;
     margin-bottom: 0;
   }

less/popovers.less

@@ -9,7 +9,7 @@
   left: 0;
   z-index: @zindexPopover;
   display: none;
-  width: 218px;
+  width: 238px;
   background-color: #fff;
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
@@ -25,34 +25,16 @@
   &.bottom  { margin-top: 10px; }
   &.left    { margin-right: 10px; }
 
-  // Call the mixin for the arrows
-  &.top .arrow    { #popoverArrow > .top(); }
-  &.right .arrow  { #popoverArrow > .right(); }
-  &.bottom .arrow { #popoverArrow > .bottom(); }
-  &.left .arrow   { #popoverArrow > .left();  }
-
-  // Common arrow styles
-  .arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    &:after {
-      position: absolute;
-      display: inline-block;
-      width: 0;
-      height: 0;
-      content: "";
-    }
-  }
 }
 
 .popover-title {
+  margin: 0; // reset heading margin
   padding: 8px 14px;
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
-  background-color: #f5f5f5;
+  background-color: @popoverTitleBackground;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid darken(@popoverTitleBackground, 10%);
   .border-radius(5px 5px 0 0);
 }
 
@@ -62,3 +44,73 @@
     margin-bottom: 0;
   }
 }
+
+// Arrows
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow:after {
+  content: "";
+  z-index: -1;
+}
+
+.popover {
+  &.top .arrow {
+    bottom: -@popoverArrowWidth;
+    left: 50%;
+    margin-left: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth @popoverArrowWidth 0;
+    border-top-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
+      border-top-color: @popoverArrowOuterColor;
+      bottom: -1px;
+      left: -@popoverArrowOuterWidth;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -@popoverArrowWidth;
+    margin-top: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
+    border-right-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
+      border-right-color: @popoverArrowOuterColor;
+      bottom: -@popoverArrowOuterWidth;
+      left: -1px;
+    }
+  }
+  &.bottom .arrow {
+    top: -@popoverArrowWidth;
+    left: 50%;
+    margin-left: -@popoverArrowWidth;
+    border-width: 0 @popoverArrowWidth @popoverArrowWidth;
+    border-bottom-color: @popoverTitleBackground;
+    &:after {
+      border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
+      border-bottom-color: @popoverArrowOuterColor;
+      top: -1px;
+      left: -@popoverArrowOuterWidth;
+    }
+  }
+  &.left .arrow {
+    top: 50%;
+    right: -@popoverArrowWidth;
+    margin-top: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
+    border-left-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
+      border-left-color: @popoverArrowOuterColor;
+      bottom: -@popoverArrowOuterWidth;
+      right: -1px;
+    }
+  }
+}

less/responsive-767px-max.less

@@ -51,6 +51,9 @@
   .thumbnails {
     margin-left: 0;
   }
+  .thumbnails > li {
+    float: none;
+  }
   // Make all grid-sized elements block level again
   [class*="span"],
   .row-fluid [class*="span"] {

less/scaffolding.less

@@ -4,7 +4,7 @@
 
 
 // Body reset
-// ----------
+// -------------------------
 
 body {
   margin: 0;
@@ -17,7 +17,7 @@ body {
 
 
 // Links
-// -----
+// -------------------------
 
 a {
   color: @linkColor;

less/tooltip.less

@@ -3,6 +3,7 @@
 // --------------------------------------------------
 
 
+// Base class
 .tooltip {
   position: absolute;
   z-index: @zindexTooltip;
@@ -12,26 +13,58 @@
   font-size: 11px;
   .opacity(0);
   &.in     { .opacity(80); }
-  &.top    { margin-top:  -2px; }
+  &.top    { margin-top:  -3px; }
-  &.right  { margin-left:  2px; }
+  &.right  { margin-left:  3px; }
-  &.bottom { margin-top:   2px; }
+  &.bottom { margin-top:   3px; }
-  &.left   { margin-left: -2px; }
+  &.left   { margin-left: -3px; }
-  &.top .tooltip-arrow    { #popoverArrow > .top(); }
-  &.left .tooltip-arrow   { #popoverArrow > .left(); }
-  &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
-  &.right .tooltip-arrow  { #popoverArrow > .right(); }
 }
+
+// Wrapper for the tooltip content
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: @white;
+  color: @tooltipColor;
   text-align: center;
   text-decoration: none;
-  background-color: @black;
+  background-color: @tooltipBackground;
   .border-radius(4px);
 }
+
+// Arrows
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
+    border-top-color: @tooltipArrowColor;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
+    border-right-color: @tooltipArrowColor;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
+    border-left-color: @tooltipArrowColor;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -@tooltipArrowWidth;
+    border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
+    border-bottom-color: @tooltipArrowColor;
+  }
 }

less/variables.less

@@ -198,6 +198,22 @@
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
 
 
+// Tooltips and popovers
+// -------------------------
+@tooltipColor:            #fff;
+@tooltipBackground:       #000;
+@tooltipArrowWidth:       5px;
+@tooltipArrowColor:       @tooltipBackground;
+
+@popoverArrowWidth:       10px;
+@popoverArrowColor:       #fff;
+@popoverTitleBackground:  #f5f5f5;
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
+@popoverArrowOuterColor:  rgba(0,0,0,.2);
+
+
 
 // GRID
 // --------------------------------------------------