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

author: Jacob Thornton <[email protected]> 2012-01-29 13:16:02 -0800
committer: Jacob Thornton <[email protected]> 2012-01-29 13:16:02 -0800
commit: 910e78d26ad476d11331e8bb9b0233e0b2ba21e3 (patch)
tree: 89c22731c23c1808bf92db1ceb670ca2cd3c7677 /docs
parent: 49d565a6da38359a776f83f31a1f1ccd658c88a7 (diff)
parent: 9fa8bde44d9bb6f26b16c7633a01bbe5ce7b20a4 (diff)
download: bootstrap-910e78d26ad476d11331e8bb9b0233e0b2ba21e3.tar.xz
bootstrap-910e78d26ad476d11331e8bb9b0233e0b2ba21e3.zip
19 files changed, 930 insertions, 716 deletions
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 631c904e7..44e0125c1 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -77,6 +77,9 @@
     width: auto;
     padding: 0 20px;
   }
+  .row-fluid {
+    width: 100%;
+  }
   .row {
     margin-left: 0;
   }
@@ -89,81 +92,122 @@
 }
 @media (min-width: 768px) and (max-width: 940px) {
   .container {
-    width: 748px;
-    padding-left: 10px;
-    padding-right: 10px;
+    width: 724px;
+    padding-left: 20px;
+    padding-right: 20px;
   }
   .span1 {
-    width: 44px;
+    width: 42px;
   }
   .span2 {
-    width: 108px;
+    width: 104px;
   }
   .span3 {
-    width: 172px;
+    width: 166px;
   }
   .span4 {
-    width: 236px;
+    width: 228px;
   }
   .span5 {
-    width: 300px;
+    width: 290px;
   }
   .span6 {
-    width: 364px;
+    width: 352px;
   }
   .span7 {
-    width: 428px;
+    width: 414px;
   }
   .span8 {
-    width: 492px;
+    width: 476px;
   }
   .span9 {
-    width: 556px;
+    width: 538px;
   }
   .span10 {
-    width: 620px;
+    width: 600px;
   }
   .span11 {
-    width: 684px;
+    width: 662px;
   }
   .span12 {
-    width: 748px;
+    width: 724px;
   }
   .offset1 {
-    margin-left: 84px;
+    margin-left: 82px;
   }
   .offset2 {
-    margin-left: 148px;
+    margin-left: 144px;
   }
   .offset3 {
-    margin-left: 212px;
+    margin-left: 206px;
   }
   .offset4 {
-    margin-left: 276px;
+    margin-left: 268px;
   }
   .offset5 {
-    margin-left: 340px;
+    margin-left: 330px;
   }
   .offset6 {
-    margin-left: 404px;
+    margin-left: 392px;
   }
   .offset7 {
-    margin-left: 468px;
+    margin-left: 454px;
   }
   .offset8 {
-    margin-left: 532px;
+    margin-left: 516px;
   }
   .offset9 {
-    margin-left: 596px;
+    margin-left: 578px;
   }
   .offset10 {
-    margin-left: 660px;
+    margin-left: 640px;
   }
   .offset11 {
-    margin-left: 724px;
+    margin-left: 702px;
+  }
+  .row-fluid {
+    width: 102.76243093919337%;
+    margin-left: -2.762430939%;
+  }
+  .row-fluid [class*="span"] {
+    float: left;
+    margin-left: 2.762430939%;
+  }
+  .row-fluid .span1 {
+    width: 5.6451612899588115%;
+  }
+  .row-fluid .span2 {
+    width: 13.978494622708812%;
+  }
+  .row-fluid .span3 {
+    width: 22.31182795545881%;
+  }
+  .row-fluid .span4 {
+    width: 30.64516128820881%;
+  }
+  .row-fluid .span5 {
+    width: 38.97849462095881%;
+  }
+  .row-fluid .span6 {
+    width: 47.311827953708814%;
   }
-  .offset12 {
-    margin-left: 788px;
+  .row-fluid .span7 {
+    width: 55.645161286458816%;
+  }
+  .row-fluid .span8 {
+    width: 63.97849461920882%;
+  }
+  .row-fluid .span9 {
+    width: 72.31182795195882%;
+  }
+  .row-fluid .span10 {
+    width: 80.64516128470882%;
+  }
+  .row-fluid .span11 {
+    width: 88.97849461745884%;
+  }
+  .row-fluid .span12 {
+    width: 97.31182795020881%;
   }
 }
 @media (max-width: 940px) {
@@ -172,25 +216,26 @@
   }
   .navbar-fixed-top {
     position: static;
-    margin-bottom: 36px;
+    margin-bottom: 18px;
   }
   .navbar-inner {
-    padding: 10px;
+    padding: 5px;
     background-image: none;
   }
   .navbar .container {
     padding: 0;
   }
   .navbar .brand {
-    float: none;
-    display: block;
-    padding-left: 15px;
-    padding-right: 15px;
-    margin: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .navbar .nav-collapse {
+    clear: left;
   }
   .navbar .nav {
     float: none;
-    margin: 9px 0;
+    margin: 0 0 9px;
   }
   .navbar .nav > li {
     float: none;
@@ -217,8 +262,10 @@
   }
   .navbar .dropdown-menu {
     position: static;
-    display: block;
+    top: auto;
+    left: auto;
     float: none;
+    display: block;
     max-width: none;
     margin: 0 15px;
     padding: 0;
@@ -263,60 +310,133 @@
     height: 0;
   }
 }
-/*
-@media (min-width: 1210px) {
-
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-
+@media (min-width: 1200px) {
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
   .container {
-    width: @siteWidth;
+    width: 1170px;
   }
   .row {
-    margin-left: @gridGutterWidth * -1;
+    margin-left: -30px;
   }
   [class*="span"] {
-    margin-left: @gridGutterWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
+    margin-left: 30px;
+  }
+  .span1 {
+    width: 70px;
+  }
+  .span2 {
+    width: 170px;
+  }
+  .span3 {
+    width: 270px;
+  }
+  .span4 {
+    width: 370px;
+  }
+  .span5 {
+    width: 470px;
+  }
+  .span6 {
+    width: 570px;
+  }
+  .span7 {
+    width: 670px;
+  }
+  .span8 {
+    width: 770px;
+  }
+  .span9 {
+    width: 870px;
+  }
+  .span10 {
+    width: 970px;
+  }
+  .span11 {
+    width: 1070px;
+  }
+  .span12 {
+    width: 1170px;
+  }
+  .offset1 {
+    margin-left: 130px;
+  }
+  .offset2 {
+    margin-left: 230px;
+  }
+  .offset3 {
+    margin-left: 330px;
+  }
+  .offset4 {
+    margin-left: 430px;
+  }
+  .offset5 {
+    margin-left: 530px;
+  }
+  .offset6 {
+    margin-left: 630px;
+  }
+  .offset7 {
+    margin-left: 730px;
+  }
+  .offset8 {
+    margin-left: 830px;
+  }
+  .offset9 {
+    margin-left: 930px;
+  }
+  .offset10 {
+    margin-left: 1030px;
+  }
+  .offset11 {
+    margin-left: 1130px;
+  }
+  .row-fluid {
+    width: 102.56143440326584%;
+    margin-left: -2.56%;
+  }
+  .row-fluid [class*="span"] {
+    float: left;
+    margin-left: 2.56%;
+  }
+  .row-fluid .span1 {
+    width: 5.832601732615312%;
+  }
+  .row-fluid .span2 {
+    width: 14.16126839928198%;
+  }
+  .row-fluid .span3 {
+    width: 22.489935065948643%;
+  }
+  .row-fluid .span4 {
+    width: 30.818601732615313%;
+  }
+  .row-fluid .span5 {
+    width: 39.14726839928198%;
+  }
+  .row-fluid .span6 {
+    width: 47.47593506594863%;
+  }
+  .row-fluid .span7 {
+    width: 55.8046017326153%;
+  }
+  .row-fluid .span8 {
+    width: 64.13326839928197%;
+  }
+  .row-fluid .span9 {
+    width: 72.46193506594864%;
+  }
+  .row-fluid .span10 {
+    width: 80.7906017326153%;
+  }
+  .row-fluid .span11 {
+    width: 89.11926839928198%;
+  }
+  .row-fluid .span12 {
+    width: 97.44793506594864%;
+  }
 }
-*/
-\ No newline at end of file
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e928bb6d1..675446f62 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -126,7 +126,7 @@ a:hover {
   margin-left: 20px;
 }
 .span1 {
-  width: 60px;
+  width: 59.99999999999999px;
 }
 .span2 {
   width: 140px;
@@ -194,6 +194,50 @@ a:hover {
 .offset11 {
   margin-left: 900px;
 }
+.row-fluid {
+  width: 102.12765957421277%;
+  margin-left: -2.127659574%;
+}
+.row-fluid [class*="span"] {
+  float: left;
+  margin-left: 2.127659574%;
+}
+.row-fluid .span1 {
+  width: 6.249999999619791%;
+}
+.row-fluid .span2 {
+  width: 14.58333333211979%;
+}
+.row-fluid .span3 {
+  width: 22.91666666461979%;
+}
+.row-fluid .span4 {
+  width: 31.24999999711979%;
+}
+.row-fluid .span5 {
+  width: 39.58333332961979%;
+}
+.row-fluid .span6 {
+  width: 47.91666666211979%;
+}
+.row-fluid .span7 {
+  width: 56.24999999461979%;
+}
+.row-fluid .span8 {
+  width: 64.58333332711977%;
+}
+.row-fluid .span9 {
+  width: 72.91666665961978%;
+}
+.row-fluid .span10 {
+  width: 81.24999999211977%;
+}
+.row-fluid .span11 {
+  width: 89.58333332461977%;
+}
+.row-fluid .span12 {
+  width: 97.91666665711978%;
+}
 .container {
   width: 940px;
   margin-left: auto;
@@ -207,42 +251,18 @@ a:hover {
 .container:after {
   clear: both;
 }
-.fluid-container {
-  position: relative;
-  min-width: 940px;
+.container-fluid {
   padding-left: 20px;
   padding-right: 20px;
   *zoom: 1;
 }
-.fluid-container:before, .fluid-container:after {
+.container-fluid:before, .container-fluid:after {
   display: table;
   content: "";
 }
-.fluid-container:after {
+.container-fluid:after {
   clear: both;
 }
-.fluid-sidebar {
-  width: 220px;
-  margin: 0 20px 18px;
-}
-.sidebar-left {
-  padding-left: 260px;
-}
-.sidebar-right {
-  padding-right: 260px;
-}
-.sidebar-left .fluid-sidebar {
-  float: left;
-  margin-left: -240px;
-}
-.sidebar-right .fluid-sidebar {
-  float: right;
-  margin-right: -240px;
-}
-.fluid-content {
-  float: left;
-  width: 100%;
-}
 p {
   margin: 0 0 9px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -596,6 +616,9 @@ input[type="hidden"] {
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
   margin-left: 10px;
 }
+.controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child {
+  padding-top: 5px;
+}
 input, textarea {
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -940,9 +963,20 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   display: inline-block;
   margin-bottom: 0;
 }
-.form-search label, .form-inline label {
+.form-search label,
+.form-inline label,
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend {
   display: inline-block;
 }
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on,
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on {
+  vertical-align: middle;
+}
 .control-group {
   margin-bottom: 9px;
 }
@@ -1999,6 +2033,7 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .alert .close {
   position: relative;
+  top: -2px;
   right: -21px;
   line-height: 18px;
 }
@@ -2292,9 +2327,11 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .navbar {
   overflow: visible;
+  margin-bottom: 18px;
 }
 .navbar-inner {
-  background-color: #222222;
+  padding-left: 20px;
+  padding-right: 20px;
   background-color: #2c2c2c;
   background-image: -moz-linear-gradient(top, #333333, #222222);
   background-image: -ms-linear-gradient(top, #333333, #222222);
@@ -2304,6 +2341,9 @@ button.btn.small, input[type="submit"].btn.small {
   background-image: linear-gradient(top, #333333, #222222);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
@@ -2312,8 +2352,8 @@ button.btn.small, input[type="submit"].btn.small {
   display: none;
   float: right;
   padding: 7px 10px;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
   background-color: #2c2c2c;
   background-image: -moz-linear-gradient(top, #333333, #222222);
   background-image: -ms-linear-gradient(top, #333333, #222222);
@@ -2355,6 +2395,9 @@ button.btn.small, input[type="submit"].btn.small {
 .btn-navbar .i-bar + .i-bar {
   margin-top: 3px;
 }
+.nav-collapse.collapse {
+  height: auto !important;
+}
 .navbar .brand:hover {
   text-decoration: none;
 }
@@ -2445,16 +2488,6 @@ button.btn.small, input[type="submit"].btn.small {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
   outline: 0;
 }
-.navbar-static {
-  margin-bottom: 18px;
-}
-.navbar-static .navbar-inner {
-  padding-left: 20px;
-  padding-right: 20px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
 .navbar-fixed-top {
   position: fixed;
   top: 0;
@@ -2462,6 +2495,13 @@ button.btn.small, input[type="submit"].btn.small {
   left: 0;
   z-index: 1030;
 }
+.navbar-fixed-top .navbar-inner {
+  padding-left: 0;
+  padding-right: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
 .navbar .nav {
   position: relative;
   left: 0;
@@ -2667,12 +2707,17 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .pager a {
   display: inline-block;
-  padding: 6px 15px;
-  background-color: #f5f5f5;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
 }
+.pager a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
 .pager .next a {
   float: right;
 }
@@ -2981,6 +3026,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;
@@ -2996,16 +3043,16 @@ a.thumbnail:hover {
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.label.important {
+.label-important {
   background-color: #b94a48;
 }
-.label.warning {
+.label-warning {
   background-color: #f89406;
 }
-.label.success {
+.label-success {
   background-color: #468847;
 }
-.label.info {
+.label-info {
   background-color: #3a87ad;
 }
 @-webkit-keyframes progress-bar-stripes {
@@ -3080,7 +3127,7 @@ a.thumbnail:hover {
   -o-transition: width 0.6s ease;
   transition: width 0.6s ease;
 }
-.progress.striped .bar {
+.progress-striped .bar {
   background-color: #62c462;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3098,7 +3145,7 @@ a.thumbnail:hover {
   -moz-animation: progress-bar-stripes 2s linear infinite;
   animation: progress-bar-stripes 2s linear infinite;
 }
-.progress.danger .bar {
+.progress-danger .bar {
   background-color: #dd514c;
   background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
   background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
@@ -3109,7 +3156,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
 }
-.progress.danger.striped .bar {
+.progress-danger.progress-striped .bar {
   background-color: #ee5f5b;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3118,7 +3165,7 @@ a.thumbnail:hover {
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
-.progress.success .bar {
+.progress-success .bar {
   background-color: #5eb95e;
   background-image: -moz-linear-gradient(top, #62c462, #57a957);
   background-image: -ms-linear-gradient(top, #62c462, #57a957);
@@ -3129,7 +3176,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
 }
-.progress.success.striped .bar {
+.progress-success.progress-striped .bar {
   background-color: #62c462;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3138,7 +3185,7 @@ a.thumbnail:hover {
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
-.progress.info .bar {
+.progress-info .bar {
   background-color: #4bb1cf;
   background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
   background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
@@ -3149,7 +3196,7 @@ a.thumbnail:hover {
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
 }
-.progress.info.striped .bar {
+.progress-info.progress-striped .bar {
   background-color: #5bc0de;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3162,7 +3209,8 @@ a.thumbnail:hover {
   margin-bottom: 18px;
 }
 .accordion-group {
-  background-color: #f5f5f5;
+  margin-bottom: 2px;
+  border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -3174,9 +3222,6 @@ a.thumbnail:hover {
   display: block;
   padding: 8px 15px;
 }
-.accordion-body {
-  margin-bottom: 2px;
-}
 .accordion-inner {
   padding: 9px 15px;
   border-top: 1px solid #e5e5e5;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b06065365..74b548628 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -106,35 +106,6 @@ hr.soften {
 }
 
 
-/* Benefits list in masthead */
-.benefits {
-  display: none;
-  width: 260px;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-.benefits ul {
-  list-style: none;
-  margin: 0;
-}
-.benefits li {
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 35px;
-  color: #555;
-}
-.benefits li + li {
-  border-top: 1px solid #f5f5f5;
-}
-.benefits h4 {
-  color: #555;
-}
-.benefits span {
-  padding-right: 5px;
-  color: #999;
-}
-
 /* Specific jumbotrons
 ------------------------- */
 /* supporting docs pages */
@@ -175,7 +146,6 @@ hr.soften {
   margin: 0;
   padding-top:    11px;
   padding-bottom: 11px;
-  font-size: 13px;
   border-left: 1px solid #f5f5f5;
   border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
@@ -500,6 +470,30 @@ hr.soften {
 
 
 
+/* Color swatches on LESS docs page
+-------------------------------------------------- */
+/* Sets the width of the td */
+.swatch-col {
+  width: 30px;
+}
+/* Le swatch */
+.swatch {
+  display: inline-block;
+  width: 30px;
+  height: 20px;
+  margin: -6px 0;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+/* For white swatches, give a border */
+.swatch-bordered {
+  width: 28px;
+  height: 18px;
+  border: 1px solid #eee;
+}
+
+
 /* Misc
 -------------------------------------------------- */
 
@@ -522,6 +516,7 @@ h2 + .row {
 /* Example sites showcase */
 .example-sites img {
   max-width: 100%;
+  margin: 0 auto;
 }
 .marketing-byline {
   margin: -18px 0 27px;
@@ -548,19 +543,6 @@ form.well {
   margin: 18px 0;
 }
 
-/* Form docs for horizontal forms */
-.form-docs {
-  padding-left: 10px;
-}
-.form-docs h3,
-.form-docs p,
-.form-docs li {
-  color: #777;
-}
-.form-docs hr {
-  margin: 18px 0;
-}
-
 /* Fake the :focus state to demo it */
 .focused {
   border-color: rgba(82,168,236,.8);
@@ -646,6 +628,10 @@ form.well {
     padding: 10px 14px;
     margin: 0 auto 10px;
   }
+  /* Masthead (home page jumbotron) */
+  .masthead {
+    padding-top: 0;
+  }
 
   /* Don't space out quick links so much */
   .quick-links {
@@ -669,8 +655,9 @@ form.well {
     display: block;
     max-width: 300px;
     margin: 0 auto 18px;
+    text-align: center;
   }
-  .example-sites img {
+  .example-sites .thumbnail > img {
     max-width: 270px;
   }
 
@@ -689,17 +676,8 @@ form.well {
     left: auto;
   }
 
-  /* Forms docs */
-  .form-docs {
-    padding-left: 0; /* down from 10px */
-  }
 }
 
-@media (min-width: 940px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-  }
-}
 
 @media (max-width: 768px) {
 
@@ -726,7 +704,7 @@ form.well {
   .subnav .nav > li > a {
     border: 0;
   }
-  .subnav .nav > li + li a {
+  .subnav .nav > li + li > a {
     border-top: 1px solid #e5e5e5;
   }
 
@@ -792,15 +770,26 @@ form.well {
 
 }
 
+
 @media (max-width: 940px) {
 
   /* Unfloat brand */
   .navbar-fixed-top .brand {
-    float: none;
+    float: left;
     margin-left: 0;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 
 }
 
+
+/* LARGE DESKTOP SCREENS */
+@media (min-width: 1210px) {
+
+  /* Update subnav container */
+  .subnav-fixed .nav {
+    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+  }
+
+}
diff --git a/docs/base-css.html b/docs/base-css.html
index c68391261..0b2c4547e 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -952,22 +952,20 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>What's included</h3>
-        <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
-        <ul>
-          <li>text inputs (text, password, email, etc)</li>
-          <li>checkbox</li>
-          <li>radio</li>
-          <li>select</li>
-          <li>multiple select</li>
-          <li>file input</li>
-          <li>textarea</li>
-        </ul>
-        <hr>
-        <h3>New defaults with v2.0</h3>
-        <p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
-      </div>
+      <h3>What's included</h3>
+      <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
+      <ul>
+        <li>text inputs (text, password, email, etc)</li>
+        <li>checkbox</li>
+        <li>radio</li>
+        <li>select</li>
+        <li>multiple select</li>
+        <li>file input</li>
+        <li>textarea</li>
+      </ul>
+      <hr>
+      <h3>New defaults with v2.0</h3>
+      <p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
     </div>
   </div>
 
@@ -1047,19 +1045,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>Redesigned browser states</h3>
-        <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
-        <hr>
-        <h3>Form validation</h3>
-        <p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
+      <h3>Redesigned browser states</h3>
+      <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
+      <hr>
+      <h3>Form validation</h3>
+      <p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
 <pre class="prettyprint linenums">
 &lt;fieldset
   class="control-group error"&gt;
   …
 &lt;/fieldset&gt;
 </pre>
-      </div>
     </div>
   </div>
 
@@ -1152,14 +1148,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>Prepend &amp; append inputs</h3>
-        <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
-        <hr>
-        <h3>Checkboxes and radios</h3>
-        <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
-        <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
-      </div>
+      <h3>Prepend &amp; append inputs</h3>
+      <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
+      <hr>
+      <h3>Checkboxes and radios</h3>
+      <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
+      <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
+      <hr>
+      <h4>Inline forms and append/prepend</h4>
+      <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
     </div>
   </div><!-- /row -->
 </section>
@@ -1410,7 +1407,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     </div>
   </div>
   <div class="alert alert-info">
-    <strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.
+    <strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.
   </div>
 
   <br>
@@ -1497,7 +1494,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
-              <input class="span32" id="iconInput" size="16" type="text">
+              <input class="span2" id="iconInput" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/components.html b/docs/components.html
index a2fac7360..63a4b3dd0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -467,7 +467,7 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">List header</li>
-          <li class="active"><a href="#"><i class="icon home"></i> Home</a></li>
+          <li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
           <li><a href="#"><i class="icon book"></i> Library</a></li>
           <li><a href="#"><i class="icon pencil"></i> Applications</a></li>
           <li class="nav-header">Another list header</li>
@@ -659,43 +659,50 @@
   </div>
   <h2>Static navbar example</h2>
   <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
-  <div class="navbar navbar-static">
+  <div class="navbar">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+        </a>
         <a class="brand" href="#">Project name</a>
-        <ul class="nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-        <form class="navbar-search pull-left" action="">
-          <input type="text" class="search-query span2" placeholder="Search">
-        </form>
-        <ul class="nav pull-right">
-          <li><a href="#">Link</a></li>
-          <li class="vertical-divider"></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">Link</a></li>
+            <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
       </div>
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
@@ -705,7 +712,7 @@
       <h3>Navbar scaffolding</h3>
       <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
     &lt;div class="container"&gt;
       ...
@@ -713,7 +720,7 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
+      <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
@@ -733,7 +740,37 @@
   &lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+      <h3>Optional responsive variation</h3>
+      <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container"&gt;
+      
+      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
+      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+      &lt;/a&gt;
+      
+      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
+
+      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
+      &lt;div class="nav-collapse"&gt;
+        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+      <div class="alert alert-info">
+        <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+      </div>
+
+    </div><!-- /.span -->
     <div class="span4">
       <h3>Nav links</h3>
       <p>Nav items are simple to add via unordered lists.</p>
@@ -763,9 +800,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
-    </div>
-  </div>
+      <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
 
 </section>
 
@@ -970,34 +1007,34 @@
       </tr>
       <tr>
         <td>
-          <span class="label success">New</span>
+          <span class="label label-success">New</span>
         </td>
         <td>
-          <code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;New&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label warning">Warning</span>
+          <span class="label label-warning">Warning</span>
         </td>
         <td>
-          <code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
+          <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label important">Important</span>
+          <span class="label label-important">Important</span>
         </td>
         <td>
-          <code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
+          <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label info">Info</span>
+          <span class="label label-info">Info</span>
         </td>
         <td>
-          <code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
+          <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
         </td>
       </tr>
     </tbody>
@@ -1020,22 +1057,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -1046,7 +1083,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>Thumbnail label</h5>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1056,7 +1093,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>Thumbnail label</h5>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1091,7 +1128,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1102,7 +1139,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
       &lt;h5&gt;Thumbnail label&lt;/h5&gt;
       &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
     &lt;/div&gt;
@@ -1117,32 +1154,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>
@@ -1270,12 +1307,12 @@
     <div class="span4">
       <h3>Striped</h3>
       <p>Uses a gradient to create a striped effect.</p>
-      <div class="progress info striped">
+      <div class="progress progress-info progress-striped">
         <div class="bar" style="width: 20%;"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress info
-     striped"&gt;
+&lt;div class="progress progress-info
+     progress-striped"&gt;
   &lt;div class="bar"
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1284,12 +1321,12 @@
     <div class="span4">
       <h3>Animated</h3>
       <p>Takes the striped example and animates it.</p>
-      <div class="progress danger active striped">
+      <div class="progress progress-danger progress-striped active">
         <div class="bar" style="width: 45%"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress danger
-     striped active"&gt;
+&lt;div class="progress progress-danger
+     progress-striped active"&gt;
   &lt;div class="bar"
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1301,18 +1338,18 @@
   <div class="row">
     <div class="span4">
       <h3>Additional colors</h3>
-      <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
+      <p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
       <ul>
-        <li><code>.info</code></li>
-        <li><code>.success</code></li>
-        <li><code>.danger</code></li>
+        <li><code>.progress-info</code></li>
+        <li><code>.progress-success</code></li>
+        <li><code>.progress-danger</code></li>
       </ul>
       <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
     </div>
     <div class="span4">
       <h3>Behavior</h3>
       <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
-      <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
+      <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
     </div>
     <div class="span4">
       <h3>Browser support</h3>
@@ -1361,10 +1398,6 @@
 </section>
 
 
-
-
-
-
      <!-- Footer
       ================================================== -->
       <footer class="footer">
diff --git a/docs/download.html b/docs/download.html
index 5bcce7ced..832b07ce6 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -135,12 +135,8 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
-      <!--
       <h3>Responsive</h3>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 480px</label>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 768px</label>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
-      -->
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> Responsive layouts</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/docs/examples.html b/docs/examples.html
index 70a1a54dd..7d79fc0a0 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -82,20 +82,50 @@
 </header>
 
 
-
-<!-- EXAMPLES
-================================================== -->
-<section id="examples">
-  <div class="page-header">
-    <h1>Examples from 1.x</h1>
-  </div>
-
-<p><a href="../examples/container-app.html">Container app</a></p>
-<p><a href="../examples/fluid.html">Fluid layout</a></p>
-<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
-<p><a href="../examples/hero.html">Hero marketing site</a></p>
-
-</section>
+<ul class="thumbnails bootstrap-examples">
+  <li class="span4">
+    <a href="../examples/hero.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Basic marketing site</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid-reverse.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout reversed</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/container-app.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Container application</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fullscreen</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Simple layout</h3>
+    <p></p>
+  </li>
+</ul>
 
 
      <!-- Footer
diff --git a/docs/index.html b/docs/index.html
index 3ecc7718f..e20d08bcd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -82,18 +82,6 @@
               <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">View project on GitHub</a>
               <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap</a>
             </p>
-            <div class="benefits">
-              <h4>Feature highlights</h4>
-              <ul>
-                <li><span>&#10004;</span> Built on LESS</li>
-                <li><span>&#10004;</span> Complete style guide docs</li>
-                <li><span>&#10004;</span> Fully responsive design</li>
-                <li><span>&#10004;</span> Small footprint (10kb gzipped)</li>
-                <li><span>&#10004;</span> Support for IE7 and up</li>
-                <li><span>&#10004;</span> Custom jQuery plugins</li>
-                <li><span>&#10004;</span> Dozens of components</li>
-              </ul>
-            </div>
           </div>
 
           <ul class="quick-links">
diff --git a/docs/less.html b/docs/less.html
index 497a9dfe3..5935c9125 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -134,168 +134,146 @@
 ================================================== -->
 <section id="variables">
   <div class="page-header">
-    <h1>Bootstrap variables <small></small></h1>
+    <h1>Bootstrap variables <small>LESS variables, their values, and usage guidelines</small></h1>
   </div>
 
-  <h3>Hyperlinks</h3>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th class="span2">Variable</th>
-        <th>Value</th>
-        <th>Usage</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@linkColor</code></td>
-        <td>#08c</td>
-        <td>Default link text color</td>
-      </tr>
-      <tr>
-        <td><code>@linkColorHover</code></td>
-        <td><code>darken(@linkColor, 15%)</code></td>
-        <td>Default link text hover color</td>
-      </tr>
-    </tbody>
-  </table>
-
   <div class="row">
     <div class="span6">
-      <h3>Grayscale colors</h3>
+      <h3>Hyperlinks</h3>
       <table class="table table-bordered table-striped">
-        <thead>
+        <tbody>
           <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
+            <td class="span2"><code>@linkColor</code></td>
+            <td>#08c</td>
+            <td>Default link text color</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
-        </thead>
+          <tr>
+            <td><code>@linkColorHover</code></td>
+            <td><code>darken(@linkColor, 15%)</code></td>
+            <td>Default link text hover color</td>
+            <td><span class="swatch" style="background-color: #005580;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Grid system</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@gridColumns</code></td>
+            <td>12</td>
+          </tr>
+          <tr>
+            <td><code>@gridColumnWidth</code></td>
+            <td>60px</td>
+          </tr>
+          <tr>
+            <td><code>@gridGutterWidth</code></td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td><code>@siteWidth</code></td>
+            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Typography</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@baseFontSize</code></td>
+            <td>13px</td>
+          </tr>
+          <tr>
+            <td><code>@baseFontFamily</code></td>
+            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@baseLineHeight</code></td>
+            <td>18px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3>Grayscale colors</h3>
+      <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td><code>@black</code></td>
+            <td class="span2"><code>@black</code></td>
             <td>#000</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDarker</code></td>
             <td>#222</td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDark</code></td>
             <td>#333</td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@gray</code></td>
             <td>#555</td>
+            <td><span class="swatch" style="background-color: #555;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLight</code></td>
             <td>#999</td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLighter</code></td>
             <td>#eee</td>
+            <td><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
             <td><code>@white</code></td>
             <td>#fff</td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h3>Accent colors</h3>
       <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
         <tbody>
           <tr>
-            <td><code>@blue</code></td>
+            <td class="span2"><code>@blue</code></td>
             <td>#049cdb</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
           </tr>
           <tr>
             <td><code>@green</code></td>
             <td>#46a546</td>
+            <td><span class="swatch" style="background-color: #46a546;"></span></td>
           </tr>
           <tr>
             <td><code>@red</code></td>
             <td>#9d261d</td>
+            <td><span class="swatch" style="background-color: #9d261d;"></span></td>
           </tr>
           <tr>
             <td><code>@yellow</code></td>
             <td>#ffc40d</td>
+            <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
           </tr>
           <tr>
             <td><code>@orange</code></td>
             <td>#f89406</td>
+            <td><span class="swatch" style="background-color: #f89406;"></span></td>
           </tr>
           <tr>
             <td><code>@pink</code></td>
             <td>#c3325f</td>
+            <td><span class="swatch" style="background-color: #c3325f;"></span></td>
           </tr>
           <tr>
             <td><code>@purple</code></td>
             <td>#7a43b6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span6">
-      <h3>Grid system</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="span6">
-      <h3>Typography</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">Variable</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@baseFontSize</code></td>
-            <td>13px</td>
-          </tr>
-          <tr>
-            <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td><code>@baseLineHeight</code></td>
-            <td>18px</td>
+            <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -311,6 +289,7 @@
           <tr>
             <td class="span3"><code>@primaryButtonBackground</code></td>
             <td><code>@linkColor</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -320,6 +299,7 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -329,26 +309,32 @@
           <tr>
             <td class="span3"><code>@navbarHeight</code></td>
             <td>40px</td>
+            <td class="swatch-col"></td>
           </tr>
           <tr>
             <td><code>@navbarBackground</code></td>
             <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarBackgroundHighlight</code></td>
             <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarText</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColor</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColorHover</code></td>
             <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -360,50 +346,42 @@
           <tr>
             <td class="span3"><code>@warningText</code></td>
             <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
             <td>#c09853</td>
-          </tr>
-          <tr>
-            <td><code>@warningBorder</code></td>
-            <td>#f3edd2</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
           </tr>
           <tr>
             <td><code>@errorText</code></td>
             <td>#b94a48</td>
+            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
           </tr>
           <tr>
             <td><code>@errorBackground</code></td>
             <td>#f2dede</td>
-          </tr>
-          <tr>
-            <td><code>@errorBorder</code></td>
-            <td>#e9c7c7</td>
+            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
           </tr>
           <tr>
             <td><code>@successText</code></td>
             <td>#468847</td>
+            <td><span class="swatch" style="background-color: #468847;"></span></td>
           </tr>
           <tr>
             <td><code>@successBackground</code></td>
             <td>#dff0d8</td>
-          </tr>
-          <tr>
-            <td><code>@successBorder</code></td>
-            <td>#cfe8c4</td>
+            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
           </tr>
           <tr>
             <td><code>@infoText</code></td>
             <td>#3a87ad</td>
+            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
           </tr>
           <tr>
             <td><code>@infoBackground</code></td>
             <td>#d9edf7</td>
-          </tr>
-          <tr>
-            <td><code>@infoBorder</code></td>
-            <td>#bfe1f2</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
           </tr>
         </tbody>
       </table>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 14da044bb..b00f5630b 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -124,7 +124,6 @@
   <div class="row show-grid">
     <div class="span12">12</div>
   </div>
-
   <div class="row">
     <div class="span4">
       <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
@@ -390,7 +389,7 @@
   @media (min-width: 768px) and (max-width: 940px) { ... }
 
   // Large desktop
-  @media (min-width: 1210px) { .. }
+  @media (min-width: 1200px) { .. }
 </pre>
     </div>
   </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6cbb111ac..2b9a459c8 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -880,22 +880,20 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}What's included{{/i}}</h3>
-        <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
-        <ul>
-          <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
-          <li>{{_i}}checkbox{{/i}}</li>
-          <li>{{_i}}radio{{/i}}</li>
-          <li>{{_i}}select{{/i}}</li>
-          <li>{{_i}}multiple select{{/i}}</li>
-          <li>{{_i}}file input{{/i}}</li>
-          <li>{{_i}}textarea{{/i}}</li>
-        </ul>
-        <hr>
-        <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
-        <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
-      </div>
+      <h3>{{_i}}What's included{{/i}}</h3>
+      <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
+      <ul>
+        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
+        <li>{{_i}}checkbox{{/i}}</li>
+        <li>{{_i}}radio{{/i}}</li>
+        <li>{{_i}}select{{/i}}</li>
+        <li>{{_i}}multiple select{{/i}}</li>
+        <li>{{_i}}file input{{/i}}</li>
+        <li>{{_i}}textarea{{/i}}</li>
+      </ul>
+      <hr>
+      <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
     </div>
   </div>
 
@@ -975,19 +973,17 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}Redesigned browser states{{/i}}</h3>
-        <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
-        <hr>
-        <h3>{{_i}}Form validation{{/i}}</h3>
-        <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
+      <h3>{{_i}}Redesigned browser states{{/i}}</h3>
+      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Form validation{{/i}}</h3>
+      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;fieldset
   class="control-group error"&gt;
   …
 &lt;/fieldset&gt;
 </pre>
-      </div>
     </div>
   </div>
 
@@ -1080,14 +1076,15 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
-        <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
-        <hr>
-        <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
-        <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
-        <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
-      </div>
+      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
+      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
+      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
+      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
     </div>
   </div><!-- /row -->
 </section>
@@ -1338,7 +1335,7 @@
     </div>
   </div>
   <div class="alert alert-info">
-    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.{{/i}}
+    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
   </div>
 
   <br>
@@ -1425,7 +1422,7 @@
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
-              <input class="span32" id="iconInput" size="16" type="text">
+              <input class="span2" id="iconInput" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 363ed1ba1..75ca3eb7e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -395,7 +395,7 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">{{_i}}List header{{/i}}</li>
-          <li class="active"><a href="#"><i class="icon home"></i> {{_i}}Home{{/i}}</a></li>
+          <li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
           <li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
           <li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
@@ -587,43 +587,50 @@
   </div>
   <h2>{{_i}}Static navbar example{{/i}}</h2>
   <p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
-  <div class="navbar navbar-static">
+  <div class="navbar">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+        </a>
         <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
-        <ul class="nav">
-          <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
-        <form class="navbar-search pull-left" action="">
-          <input type="text" class="search-query span2" placeholder="Search">
-        </form>
-        <ul class="nav pull-right">
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="vertical-divider"></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
       </div>
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
@@ -633,7 +640,7 @@
       <h3>{{_i}}Navbar scaffolding{{/i}}</h3>
       <p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
     &lt;div class="container"&gt;
       ...
@@ -641,7 +648,7 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
+      <p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
@@ -661,7 +668,37 @@
   &lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+      <h3>{{_i}}Optional responsive variation{{/i}}</h3>
+      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container"&gt;
+      
+      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
+      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+      &lt;/a&gt;
+      
+      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+      &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
+
+      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
+      &lt;div class="nav-collapse"&gt;
+        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+      <div class="alert alert-info">
+        <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+      </div>
+
+    </div><!-- /.span -->
     <div class="span4">
       <h3>{{_i}}Nav links{{/i}}</h3>
       <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
@@ -691,9 +728,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
-  </div>
+      <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
 
 </section>
 
@@ -898,34 +935,34 @@
       </tr>
       <tr>
         <td>
-          <span class="label success">{{_i}}New{{/i}}</span>
+          <span class="label label-success">{{_i}}New{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label warning">{{_i}}Warning{{/i}}</span>
+          <span class="label label-warning">{{_i}}Warning{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label important">{{_i}}Important{{/i}}</span>
+          <span class="label label-important">{{_i}}Important{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label info">{{_i}}Info{{/i}}</span>
+          <span class="label label-info">{{_i}}Info{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
     </tbody>
@@ -948,22 +985,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -974,7 +1011,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</h5>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -984,7 +1021,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</h5>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -1019,7 +1056,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1030,7 +1067,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
       &lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
       &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
     &lt;/div&gt;
@@ -1045,32 +1082,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>
@@ -1198,12 +1235,12 @@
     <div class="span4">
       <h3>{{_i}}Striped{{/i}}</h3>
       <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
-      <div class="progress info striped">
+      <div class="progress progress-info progress-striped">
         <div class="bar" style="width: 20%;"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress info
-     striped"&gt;
+&lt;div class="progress progress-info
+     progress-striped"&gt;
   &lt;div class="bar"
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1212,12 +1249,12 @@
     <div class="span4">
       <h3>{{_i}}Animated{{/i}}</h3>
       <p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
-      <div class="progress danger active striped">
+      <div class="progress progress-danger progress-striped active">
         <div class="bar" style="width: 45%"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress danger
-     striped active"&gt;
+&lt;div class="progress progress-danger
+     progress-striped active"&gt;
   &lt;div class="bar"
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1229,18 +1266,18 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Additional colors{{/i}}</h3>
-      <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
+      <p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
       <ul>
-        <li><code>.info</code></li>
-        <li><code>.success</code></li>
-        <li><code>.danger</code></li>
+        <li><code>.progress-info</code></li>
+        <li><code>.progress-success</code></li>
+        <li><code>.progress-danger</code></li>
       </ul>
       <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Behavior{{/i}}</h3>
       <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
-      <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
+      <p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Browser support{{/i}}</h3>
@@ -1287,7 +1324,3 @@
     </div><!--/span-->
   </div><!--/row-->
 </section>
-
-
-
-
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index dccc5fbb6..34f8130ac 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -63,12 +63,8 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
-      <!--
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-      -->
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 3c102bef2..850ac0fa6 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -10,17 +10,47 @@
 </header>
 
 
-
-<!-- EXAMPLES
-================================================== -->
-<section id="examples">
-  <div class="page-header">
-    <h1>{{_i}}Examples from 1.x{{/i}}</h1>
-  </div>
-
-<p><a href="../examples/container-app.html">Container app</a></p>
-<p><a href="../examples/fluid.html">Fluid layout</a></p>
-<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
-<p><a href="../examples/hero.html">Hero marketing site</a></p>
-
-</section>
+<ul class="thumbnails bootstrap-examples">
+  <li class="span4">
+    <a href="../examples/hero.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Basic marketing site</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid-reverse.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout reversed</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/container-app.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Container application</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fullscreen</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Simple layout</h3>
+    <p></p>
+  </li>
+</ul>
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 7a98afa07..d49f95f9b 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -10,18 +10,6 @@
               <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
               <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
             </p>
-            <div class="benefits">
-              <h4>{{_i}}Feature highlights{{/i}}</h4>
-              <ul>
-                <li><span>&#10004;</span> {{_i}}Built on LESS{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Complete style guide docs{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Fully responsive design{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Small footprint (10kb gzipped){{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Support for IE7 and up{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Custom jQuery plugins{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Dozens of components{{/i}}</li>
-              </ul>
-            </div>
           </div>
 
           <ul class="quick-links">
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ad6688e1e..82b921d24 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -62,168 +62,146 @@
 ================================================== -->
 <section id="variables">
   <div class="page-header">
-    <h1>{{_i}}Bootstrap variables <small></small>{{/i}}</h1>
+    <h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
   </div>
 
-  <h3>{{_i}}Hyperlinks{{/i}}</h3>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th class="span2">{{_i}}Variable{{/i}}</th>
-        <th>{{_i}}Value{{/i}}</th>
-        <th>{{_i}}Usage{{/i}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@linkColor</code></td>
-        <td>#08c</td>
-        <td>{{_i}}Default link text color{{/i}}</td>
-      </tr>
-      <tr>
-        <td><code>@linkColorHover</code></td>
-        <td><code>darken(@linkColor, 15%)</code></td>
-        <td>{{_i}}Default link text hover color{{/i}}</td>
-      </tr>
-    </tbody>
-  </table>
-
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <h3>{{_i}}Hyperlinks{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
+        <tbody>
           <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
+            <td class="span2"><code>@linkColor</code></td>
+            <td>#08c</td>
+            <td>{{_i}}Default link text color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
-        </thead>
+          <tr>
+            <td><code>@linkColorHover</code></td>
+            <td><code>darken(@linkColor, 15%)</code></td>
+            <td>{{_i}}Default link text hover color{{/i}}</td>
+            <td><span class="swatch" style="background-color: #005580;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Grid system{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@gridColumns</code></td>
+            <td>12</td>
+          </tr>
+          <tr>
+            <td><code>@gridColumnWidth</code></td>
+            <td>60px</td>
+          </tr>
+          <tr>
+            <td><code>@gridGutterWidth</code></td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td><code>@siteWidth</code></td>
+            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Typography{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@baseFontSize</code></td>
+            <td>13px</td>
+          </tr>
+          <tr>
+            <td><code>@baseFontFamily</code></td>
+            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@baseLineHeight</code></td>
+            <td>18px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td><code>@black</code></td>
+            <td class="span2"><code>@black</code></td>
             <td>#000</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDarker</code></td>
             <td>#222</td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDark</code></td>
             <td>#333</td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@gray</code></td>
             <td>#555</td>
+            <td><span class="swatch" style="background-color: #555;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLight</code></td>
             <td>#999</td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLighter</code></td>
             <td>#eee</td>
+            <td><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
             <td><code>@white</code></td>
             <td>#fff</td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h3>{{_i}}Accent colors{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
         <tbody>
           <tr>
-            <td><code>@blue</code></td>
+            <td class="span2"><code>@blue</code></td>
             <td>#049cdb</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
           </tr>
           <tr>
             <td><code>@green</code></td>
             <td>#46a546</td>
+            <td><span class="swatch" style="background-color: #46a546;"></span></td>
           </tr>
           <tr>
             <td><code>@red</code></td>
             <td>#9d261d</td>
+            <td><span class="swatch" style="background-color: #9d261d;"></span></td>
           </tr>
           <tr>
             <td><code>@yellow</code></td>
             <td>#ffc40d</td>
+            <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
           </tr>
           <tr>
             <td><code>@orange</code></td>
             <td>#f89406</td>
+            <td><span class="swatch" style="background-color: #f89406;"></span></td>
           </tr>
           <tr>
             <td><code>@pink</code></td>
             <td>#c3325f</td>
+            <td><span class="swatch" style="background-color: #c3325f;"></span></td>
           </tr>
           <tr>
             <td><code>@purple</code></td>
             <td>#7a43b6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span6">
-      <h3>{{_i}}Grid system{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="span6">
-      <h3>{{_i}}Typography{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@baseFontSize</code></td>
-            <td>13px</td>
-          </tr>
-          <tr>
-            <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td><code>@baseLineHeight</code></td>
-            <td>18px</td>
+            <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -239,6 +217,7 @@
           <tr>
             <td class="span3"><code>@primaryButtonBackground</code></td>
             <td><code>@linkColor</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -248,6 +227,7 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -257,26 +237,32 @@
           <tr>
             <td class="span3"><code>@navbarHeight</code></td>
             <td>40px</td>
+            <td class="swatch-col"></td>
           </tr>
           <tr>
             <td><code>@navbarBackground</code></td>
             <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarBackgroundHighlight</code></td>
             <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarText</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColor</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColorHover</code></td>
             <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -288,50 +274,42 @@
           <tr>
             <td class="span3"><code>@warningText</code></td>
             <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
             <td>#c09853</td>
-          </tr>
-          <tr>
-            <td><code>@warningBorder</code></td>
-            <td>#f3edd2</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
           </tr>
           <tr>
             <td><code>@errorText</code></td>
             <td>#b94a48</td>
+            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
           </tr>
           <tr>
             <td><code>@errorBackground</code></td>
             <td>#f2dede</td>
-          </tr>
-          <tr>
-            <td><code>@errorBorder</code></td>
-            <td>#e9c7c7</td>
+            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
           </tr>
           <tr>
             <td><code>@successText</code></td>
             <td>#468847</td>
+            <td><span class="swatch" style="background-color: #468847;"></span></td>
           </tr>
           <tr>
             <td><code>@successBackground</code></td>
             <td>#dff0d8</td>
-          </tr>
-          <tr>
-            <td><code>@successBorder</code></td>
-            <td>#cfe8c4</td>
+            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
           </tr>
           <tr>
             <td><code>@infoText</code></td>
             <td>#3a87ad</td>
+            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
           </tr>
           <tr>
             <td><code>@infoBackground</code></td>
             <td>#d9edf7</td>
-          </tr>
-          <tr>
-            <td><code>@infoBorder</code></td>
-            <td>#bfe1f2</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
           </tr>
         </tbody>
       </table>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index cf672cc6e..239d15265 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -52,7 +52,6 @@
   <div class="row show-grid">
     <div class="span12">12</div>
   </div>
-
   <div class="row">
     <div class="span4">
       <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
@@ -318,7 +317,7 @@
   @media (min-width: 768px) and (max-width: 940px) { ... }
 
   // {{_i}}Large desktop{{/i}}
-  @media (min-width: 1210px) { .. }
+  @media (min-width: 1200px) { .. }
 </pre>
     </div>
   </div>
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1c..95587456a 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
     <li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
     <li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
   </ul>
+  <h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
+  <ul>
+    <li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
+    <li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
+    <li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
+    <li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
+    <li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
+    <li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
+  </ul>
   <h3>{{_i}}Dropdown menus{{/i}}</h3>
   <ul>
     <li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index c0778d9d0..d7ad30f56 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -186,6 +186,15 @@
     <li>Pills were restyled to be less rounded by default</li>
     <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
   </ul>
+  <h3>Navbar (formerly topbar)</h3>
+  <ul>
+    <li>Base class changed from <code>.topbar</code> to <code>.navbar</code></li>
+    <li>Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed)</li>
+    <li>Added vertical dividers to top-level nav</li>
+    <li>Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.</li>
+    <li>Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.</li>
+    <li>Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.</li>
+  </ul>
   <h3>Dropdown menus</h3>
   <ul>
     <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
author	Jacob Thornton <[email protected]>	2012-01-29 13:16:02 -0800
committer	Jacob Thornton <[email protected]>	2012-01-29 13:16:02 -0800
commit	910e78d26ad476d11331e8bb9b0233e0b2ba21e3 (patch)
tree	89c22731c23c1808bf92db1ceb670ca2cd3c7677 /docs
parent	49d565a6da38359a776f83f31a1f1ccd658c88a7 (diff)
parent	9fa8bde44d9bb6f26b16c7633a01bbe5ce7b20a4 (diff)
download	bootstrap-910e78d26ad476d11331e8bb9b0233e0b2ba21e3.tar.xz bootstrap-910e78d26ad476d11331e8bb9b0233e0b2ba21e3.zip