2.0.1

Conflicts:
	docs/assets/bootstrap.zip

Makefile

@@ -10,6 +10,7 @@ WATCHR ?= `which watchr`
 #
 
 docs: bootstrap
+	rm docs/assets/bootstrap.zip
 	zip -r docs/assets/bootstrap.zip bootstrap
 	rm -r bootstrap
 	lessc ${BOOTSTRAP_LESS} > ${BOOTSTRAP}
@@ -32,18 +33,24 @@ bootstrap:
 	cp img/* bootstrap/img/
 	lessc ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
 	lessc --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
-	lessc ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap.responsive
-	lessc --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap.min.responsive
+	lessc ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
+	lessc --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
 	cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
 	uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js
 
 #
-# WATCH LESS FILES
+# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O  )
 #
 
-gh-pages:
+gh-pages: docs
+	rm -f ../bootstrap-gh-pages/assets/bootstrap.zip
+	node docs/build production
 	cp -r docs/* ../bootstrap-gh-pages
 
+#
+# WATCH LESS FILES
+#
+
 watch:
 	echo "Watching less files..."; \
 	watchr -e "watch('less/.*\.less') { system 'make' }"

README.md

@@ -9,7 +9,7 @@ To get started -- checkout http://twitter.github.com/bootstrap!
 Versioning
 ----------
 
-For transparency and insight into our release cycle, and for striving to maintain backwards compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
+For transparency and insight into our release cycle, and for striving to maintain backward compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible.
 
 Releases will be numbered with the follow format:
 
@@ -17,8 +17,8 @@ Releases will be numbered with the follow format:
 
 And constructed with the following guidelines:
 
-* Breaking backwards compatibility bumps the major
-* New additions without breaking backwards compatibility bumps the minor
+* Breaking backward compatibility bumps the major
+* New additions without breaking backward compatibility bumps the minor
 * Bug fixes and misc changes bump the patch
 
 For more information on SemVer, please visit http://semver.org/.
@@ -48,18 +48,24 @@ twitter-bootstrap@googlegroups.com
 http://groups.google.com/group/twitter-bootstrap
 
 
+IRC
+---
+
+Server: irc.freenode.net
+
+Channel: ##twitter-bootstrap (the double ## is not a typo)
+
+
 Developers
 ----------
 
 We have included a makefile with convenience methods for working with the Bootstrap library.
 
 + **build** - `make`
-This will run the less compiler on the bootstrap lib and regenerate the docs dir.
-The lessc compiler is required for this command to run.
+Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
 
 + **watch** - `make watch`
-This is a convenience method for watching your less files and automatically building them whenever you save.
-Watchr is required for this command to run.
+This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
 
 
 Authors

docs/assets/css/bootstrap-responsive.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.0
+ * Bootstrap Responsive v2.0.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -7,6 +7,16 @@
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before, .clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
 .hidden {
   display: none;
   visibility: hidden;
@@ -25,7 +35,7 @@
   .uneditable-input {
     display: block;
     width: 100%;
-    height: 28px;
+    min-height: 28px;
     /* Make inputs at least the height of their button counterpart */
   
     /* Makes inputs behave like true block-level elements */
@@ -84,7 +94,7 @@
     position: static;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .container {
     width: auto;
     padding: 0 20px;
@@ -102,7 +112,7 @@
     margin: 0;
   }
 }
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
   .row {
     margin-left: -20px;
     *zoom: 1;
@@ -205,40 +215,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.801104972%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.364640883%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 22.928176794%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.491712705%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.055248616%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.618784527%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.182320438000005%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.74585634900001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.30939226%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.87292817100001%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.436464082%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 99.999999993%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {
@@ -278,7 +288,7 @@
     width: 714px;
   }
 }
-@media (max-width: 980px) {
+@media (max-width: 979px) {
   body {
     padding-top: 0;
   }
@@ -314,6 +324,10 @@
   .navbar .nav > .divider-vertical {
     display: none;
   }
+  .navbar .nav .nav-header {
+    color: #999999;
+    text-shadow: none;
+  }
   .navbar .nav > li > a, .navbar .dropdown-menu a {
     padding: 6px 15px;
     font-weight: bold;
@@ -486,40 +500,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.982905983%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.529914530000001%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 23.076923077%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.623931624%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.170940171000005%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.717948718%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.264957265%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.81196581200001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.358974359%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.905982906%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.45299145300001%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 100%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {

docs/assets/css/bootstrap.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.0
+ * Bootstrap v2.0.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -33,7 +33,7 @@ html {
   -ms-text-size-adjust: 100%;
 }
 a:focus {
-  outline: thin dotted;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -94,6 +94,16 @@ textarea {
   overflow: auto;
   vertical-align: top;
 }
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before, .clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
 body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -212,40 +222,40 @@ a:hover {
 .row-fluid > [class*="span"]:first-child {
   margin-left: 0;
 }
-.row-fluid .span1 {
+.row-fluid > .span1 {
   width: 6.382978723%;
 }
-.row-fluid .span2 {
+.row-fluid > .span2 {
   width: 14.89361702%;
 }
-.row-fluid .span3 {
+.row-fluid > .span3 {
   width: 23.404255317%;
 }
-.row-fluid .span4 {
+.row-fluid > .span4 {
   width: 31.914893614%;
 }
-.row-fluid .span5 {
+.row-fluid > .span5 {
   width: 40.425531911%;
 }
-.row-fluid .span6 {
+.row-fluid > .span6 {
   width: 48.93617020799999%;
 }
-.row-fluid .span7 {
+.row-fluid > .span7 {
   width: 57.446808505%;
 }
-.row-fluid .span8 {
+.row-fluid > .span8 {
   width: 65.95744680199999%;
 }
-.row-fluid .span9 {
+.row-fluid > .span9 {
   width: 74.468085099%;
 }
-.row-fluid .span10 {
+.row-fluid > .span10 {
   width: 82.97872339599999%;
 }
-.row-fluid .span11 {
+.row-fluid > .span11 {
   width: 91.489361693%;
 }
-.row-fluid .span12 {
+.row-fluid > .span12 {
   width: 99.99999998999999%;
 }
 .container {
@@ -374,7 +384,7 @@ ol {
 li {
   line-height: 18px;
 }
-ul.unstyled {
+ul.unstyled, ol.unstyled {
   margin-left: 0;
   list-style: none;
 }
@@ -393,7 +403,7 @@ dd {
 hr {
   margin: 18px 0;
   border: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #ffffff;
 }
 strong {
@@ -488,13 +498,20 @@ pre {
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
+  word-wrap: break-word;
 }
 pre.prettyprint {
   margin-bottom: 18px;
 }
 pre code {
   padding: 0;
+  color: inherit;
   background-color: transparent;
+  border: 0;
+}
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
 }
 form {
   margin: 0 0 18px;
@@ -515,16 +532,25 @@ legend {
   border: 0;
   border-bottom: 1px solid #eee;
 }
+legend small {
+  font-size: 13.5px;
+  color: #999999;
+}
 label,
 input,
 button,
 select,
 textarea {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   font-weight: normal;
   line-height: 18px;
 }
+input,
+button,
+select,
+textarea {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 label {
   display: block;
   margin-bottom: 5px;
@@ -563,11 +589,19 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
   /* IE7 */
 
   line-height: normal;
-  border: 0;
   cursor: pointer;
-  border-radius: 0 \0/;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  border: 0 \9;
+  /* IE9 and down */
+
+}
+input[type="image"] {
+  border: 0;
 }
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -590,6 +624,9 @@ select, input[type="file"] {
 
   line-height: 28px;
 }
+input[type="file"] {
+  line-height: 18px \9;
+}
 select {
   width: 220px;
   background-color: #ffffff;
@@ -620,15 +657,13 @@ input[type="hidden"] {
 }
 .radio.inline, .checkbox.inline {
   display: inline-block;
+  padding-top: 5px;
   margin-bottom: 0;
   vertical-align: middle;
 }
 .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
   margin-left: 10px;
 }
-.controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child {
-  padding-top: 0;
-}
 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);
@@ -646,14 +681,17 @@ input:focus, textarea:focus {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
   outline: 0;
   outline: thin dotted \9;
-  /* IE6-8 */
+  /* IE6-9 */
 
 }
-input[type="file"]:focus, input[type="checkbox"]:focus, select:focus {
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus,
+select:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  outline: thin dotted;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -815,6 +853,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   color: #999999;
 }
 .help-block {
+  display: block;
   margin-top: 5px;
   margin-bottom: 0;
   color: #999999;
@@ -896,6 +935,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   border-radius: 3px 0 0 3px;
 }
 .input-append .uneditable-input {
+  border-left-color: #eee;
   border-right-color: #ccc;
 }
 .input-append .add-on {
@@ -937,6 +977,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   display: inline-block;
   margin-bottom: 0;
 }
+.form-search .hide, .form-inline .hide, .form-horizontal .hide {
+  display: none;
+}
 .form-search label,
 .form-inline label,
 .form-search .input-append,
@@ -951,10 +994,17 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 .control-group {
   margin-bottom: 9px;
 }
-.form-horizontal legend + .control-group {
+legend + .control-group {
   margin-top: 18px;
   -webkit-margin-top-collapse: separate;
 }
@@ -969,7 +1019,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
 .form-horizontal .control-group:after {
   clear: both;
 }
-.form-horizontal .control-group > label {
+.form-horizontal .control-label {
   float: left;
   width: 140px;
   padding-top: 5px;
@@ -994,14 +1044,14 @@ table {
   padding: 8px;
   line-height: 18px;
   text-align: left;
+  vertical-align: top;
   border-top: 1px solid #ddd;
 }
 .table th {
   font-weight: bold;
-  vertical-align: bottom;
 }
-.table td {
-  vertical-align: top;
+.table thead th {
+  vertical-align: bottom;
 }
 .table thead:first-child tr th, .table thead:first-child tr td {
   border-top: 0;
@@ -1052,6 +1102,9 @@ table {
 .table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
   background-color: #f9f9f9;
 }
+.table tbody tr:hover td, .table tbody tr:hover th {
+  background-color: #f5f5f5;
+}
 table .span1 {
   float: none;
   width: 44px;
@@ -1112,21 +1165,22 @@ table .span12 {
   width: 924px;
   margin-left: 0;
 }
-[class^="icon-"] {
+[class^="icon-"], [class*=" icon-"] {
   display: inline-block;
   width: 14px;
   height: 14px;
+  line-height: 14px;
   vertical-align: text-top;
-  background-image: url(../img/glyphicons-halflings.png);
+  background-image: url("../img/glyphicons-halflings.png");
   background-position: 14px 14px;
   background-repeat: no-repeat;
   *margin-right: .3em;
 }
-[class^="icon-"]:last-child {
+[class^="icon-"]:last-child, [class*=" icon-"]:last-child {
   *margin-left: 0;
 }
 .icon-white {
-  background-image: url(../img/glyphicons-halflings-white.png);
+  background-image: url("../img/glyphicons-halflings-white.png");
 }
 .icon-glass {
   background-position: 0      0;
@@ -1527,7 +1581,6 @@ table .span12 {
   float: left;
   display: none;
   min-width: 160px;
-  max-width: 220px;
   _width: 160px;
   padding: 4px 0;
   margin: 0;
@@ -1656,20 +1709,25 @@ table .span12 {
 .btn {
   display: inline-block;
   padding: 4px 10px 4px;
+  margin-bottom: 0;
   font-size: 13px;
   line-height: 18px;
   color: #333333;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  background-color: #fafafa;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-repeat: no-repeat;
+  vertical-align: middle;
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(top, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   -webkit-border-radius: 4px;
@@ -1679,8 +1737,19 @@ table .span12 {
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   *margin-left: .3em;
 }
+.btn:hover,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+  background-color: #e6e6e6;
+}
+.btn:active, .btn.active {
+  background-color: #cccccc \9;
+}
 .btn:first-child {
   *margin-left: 0;
 }
@@ -1696,7 +1765,7 @@ table .span12 {
   transition: background-position 0.1s linear;
 }
 .btn:focus {
-  outline: thin dotted;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -1707,7 +1776,6 @@ table .span12 {
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: #e6e6e6;
   background-color: #d9d9d9 \9;
-  color: rgba(0, 0, 0, 0.5);
   outline: 0;
 }
 .btn.disabled, .btn[disabled] {
@@ -1728,7 +1796,7 @@ table .span12 {
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
-.btn-large .icon {
+.btn-large [class^="icon-"] {
   margin-top: 1px;
 }
 .btn-small {
@@ -1736,9 +1804,14 @@ table .span12 {
   font-size: 11px;
   line-height: 16px;
 }
-.btn-small .icon {
+.btn-small [class^="icon-"] {
   margin-top: -1px;
 }
+.btn-mini {
+  padding: 2px 6px;
+  font-size: 11px;
+  line-height: 14px;
+}
 .btn-primary,
 .btn-primary:hover,
 .btn-warning,
@@ -1748,7 +1821,9 @@ table .span12 {
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   color: #ffffff;
 }
@@ -1756,7 +1831,8 @@ table .span12 {
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255, 255, 255, 0.75);
 }
 .btn-primary {
@@ -1879,6 +1955,30 @@ table .span12 {
 .btn-info:active, .btn-info.active {
   background-color: #24748c \9;
 }
+.btn-inverse {
+  background-color: #393939;
+  background-image: -moz-linear-gradient(top, #454545, #262626);
+  background-image: -ms-linear-gradient(top, #454545, #262626);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
+  background-image: -webkit-linear-gradient(top, #454545, #262626);
+  background-image: -o-linear-gradient(top, #454545, #262626);
+  background-image: linear-gradient(top, #454545, #262626);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
+  border-color: #262626 #262626 #000000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.btn-inverse:hover,
+.btn-inverse:active,
+.btn-inverse.active,
+.btn-inverse.disabled,
+.btn-inverse[disabled] {
+  background-color: #262626;
+}
+.btn-inverse:active, .btn-inverse.active {
+  background-color: #0c0c0c \9;
+}
 button.btn, input[type="submit"].btn {
   *padding-top: 2px;
   *padding-bottom: 2px;
@@ -2011,7 +2111,8 @@ button.btn.small, input[type="submit"].btn.small {
 .btn-primary .caret,
 .btn-danger .caret,
 .btn-info .caret,
-.btn-success .caret {
+.btn-success .caret,
+.btn-inverse .caret {
   border-top-color: #ffffff;
   opacity: 0.75;
   filter: alpha(opacity=75);
@@ -2084,34 +2185,38 @@ button.btn.small, input[type="submit"].btn.small {
   text-decoration: none;
   background-color: #eeeeee;
 }
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 .nav-list {
   padding-left: 14px;
   padding-right: 14px;
   margin-bottom: 0;
 }
 .nav-list > li > a, .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left: -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 18px;
-  color: #999999;
-  text-transform: uppercase;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
-.nav-list > li + .nav-header {
-  margin-top: 9px;
-}
-.nav-list .active > a {
+.nav-list .active > a, .nav-list .active > a:hover {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
   background-color: #0088cc;
 }
-.nav-list .icon {
+.nav-list [class^="icon-"] {
   margin-right: 2px;
 }
 .nav-tabs, .nav-pills {
@@ -2254,6 +2359,9 @@ button.btn.small, input[type="submit"].btn.small {
 .tabbable:after {
   clear: both;
 }
+.tab-content {
+  overflow: hidden;
+}
 .tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
   border-bottom: 0;
 }
@@ -2449,6 +2557,13 @@ button.btn.small, input[type="submit"].btn.small {
 .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
   margin-top: 3px;
 }
+.navbar-form .input-append, .navbar-form .input-prepend {
+  margin-top: 6px;
+  white-space: nowrap;
+}
+.navbar-form .input-append input, .navbar-form .input-prepend input {
+  margin-top: 0;
+}
 .navbar-search {
   position: relative;
   float: left;
@@ -2542,7 +2657,6 @@ button.btn.small, input[type="submit"].btn.small {
   color: #ffffff;
   text-decoration: none;
   background-color: #222222;
-  background-color: rgba(0, 0, 0, 0.5);
 }
 .navbar .divider-vertical {
   height: 40px;
@@ -2629,7 +2743,7 @@ button.btn.small, input[type="submit"].btn.small {
   box-shadow: inset 0 1px 0 #ffffff;
 }
 .breadcrumb li {
-  display: inline;
+  display: inline-block;
   text-shadow: 0 1px 0 #ffffff;
 }
 .breadcrumb .divider {
@@ -2808,6 +2922,9 @@ button.btn.small, input[type="submit"].btn.small {
 .modal-body {
   padding: 15px;
 }
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
@@ -3043,28 +3160,44 @@ a.thumbnail:hover {
   padding: 9px;
 }
 .label {
-  padding: 1px 3px 2px;
-  font-size: 9.75px;
+  padding: 2px 4px 3px;
+  font-size: 11.049999999999999px;
   font-weight: bold;
   color: #ffffff;
-  text-transform: uppercase;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #999999;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
+.label:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
 .label-important {
   background-color: #b94a48;
 }
+.label-important:hover {
+  background-color: #953b39;
+}
 .label-warning {
   background-color: #f89406;
 }
+.label-warning:hover {
+  background-color: #c67605;
+}
 .label-success {
   background-color: #468847;
 }
+.label-success:hover {
+  background-color: #356635;
+}
 .label-info {
   background-color: #3a87ad;
 }
+.label-info:hover {
+  background-color: #2d6987;
+}
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 0 0;

docs/assets/css/docs.css

@@ -181,7 +181,7 @@ hr.soften {
     top: 40px;
     left: 0;
     right: 0;
-    z-index: 1030;
+    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
     border-color: #d5d5d5;
     border-width: 0 0 1px; /* drop the border on the fixed edges */
     -webkit-border-radius: 0;
@@ -190,6 +190,7 @@ hr.soften {
     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
        -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
             box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
   }
   .subnav-fixed .nav {
     width: 938px;
@@ -481,9 +482,6 @@ hr.soften {
 /* Misc
 -------------------------------------------------- */
 
-pre.prettyprint {
-  overflow: hidden;
-}
 
 .browser-support {
   max-width: 100%;
@@ -546,28 +544,12 @@ form.well {
 /* Icons
 ------------------------- */
 .the-icons {
-  margin-bottom: 18px;
-}
-.the-icons i {
-  display: block;
-  margin-bottom: 5px;
+  margin-left: 0;
+  list-style: none;
 }
 .the-icons i:hover {
   background-color: rgba(255,0,0,.25);
 }
-.the-icons i:after {
-  display: block;
-  content: attr(class);
-  font-style: normal;
-  margin-left: 20px;
-  width: 140px;
-}
-#javascript input[type=checkbox] {
-  position: relative;
-  top: -1px;
-  display: inline;
-  margin-left: 6px;
-}
 
 /* Eaxmples page
 ------------------------- */

docs/assets/js/application.js

@@ -135,8 +135,7 @@
       , url: 'http://bootstrap.herokuapp.com'
       , dataType: 'jsonpi'
       , params: {
-          branch: '2.0-wip'
-        , js: js
+          js: js
         , css: css
         , vars: vars
         , img: img

docs/assets/js/bootstrap-alert.js

@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-alert.js v2.0.0
+ * bootstrap-alert.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#alerts
  * ==========================================================
  * Copyright 2012 Twitter, Inc.
@@ -51,11 +51,14 @@
 
       $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
 
-      $parent.removeClass('in')
+      $parent
+        .trigger('close')
+        .removeClass('in')
 
       function removeElement() {
-        $parent.remove()
-        $parent.trigger('closed')
+        $parent
+          .trigger('closed')
+          .remove()
       }
 
       $.support.transition && $parent.hasClass('fade') ?
@@ -88,4 +91,4 @@
     $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-button.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-button.js v2.0.0
+ * bootstrap-button.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#buttons
  * ============================================================
  * Copyright 2012 Twitter, Inc.
@@ -91,8 +91,8 @@
 
   $(function () {
     $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
-      $(e.target).button('toggle')
+      $(e.currentTarget).button('toggle')
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-carousel.js

@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-carousel.js v2.0.0
+ * bootstrap-carousel.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#carousel
  * ==========================================================
  * Copyright 2012 Twitter, Inc.
@@ -61,6 +61,7 @@
 
   , pause: function () {
       clearInterval(this.interval)
+      this.interval = null
       return this
     }
 
@@ -82,6 +83,8 @@
         , fallback  = type == 'next' ? 'first' : 'last'
         , that = this
 
+      if (!$next.length) return
+
       this.sliding = true
 
       isCycling && this.pause()
@@ -151,4 +154,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-collapse.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-collapse.js v2.0.0
+ * bootstrap-collapse.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#collapse
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -133,4 +133,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-dropdown.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-dropdown.js v2.0.0
+ * bootstrap-dropdown.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#dropdowns
  * ============================================================
  * Copyright 2012 Twitter, Inc.
@@ -89,4 +89,4 @@
     $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-modal.js

@@ -1,5 +1,5 @@
 /* =========================================================
- * bootstrap-modal.js v2.0.0
+ * bootstrap-modal.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#modals
  * =========================================================
  * Copyright 2012 Twitter, Inc.
@@ -26,7 +26,7 @@
   * ====================== */
 
   var Modal = function ( content, options ) {
-    this.options = $.extend({}, $.fn.modal.defaults, options)
+    this.options = options
     this.$element = $(content)
       .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
   }
@@ -177,16 +177,17 @@
     return this.each(function () {
       var $this = $(this)
         , data = $this.data('modal')
-        , options = typeof option == 'object' && option
+        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
       if (!data) $this.data('modal', (data = new Modal(this, options)))
       if (typeof option == 'string') data[option]()
-      else data.show()
+      else if (options.show) data.show()
     })
   }
 
   $.fn.modal.defaults = {
       backdrop: true
     , keyboard: true
+    , show: true
   }
 
   $.fn.modal.Constructor = Modal
@@ -206,4 +207,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-popover.js

@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-popover.js v2.0.0
+ * bootstrap-popover.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#popovers
  * ===========================================================
  * Copyright 2012 Twitter, Inc.
@@ -92,4 +92,4 @@
   , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-scrollspy.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-scrollspy.js v2.0.0
+ * bootstrap-scrollspy.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#scrollspy
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -122,4 +122,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-tab.js

@@ -1,5 +1,5 @@
 /* ========================================================
- * bootstrap-tab.js v2.0.0
+ * bootstrap-tab.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#tabs
  * ========================================================
  * Copyright 2012 Twitter, Inc.
@@ -127,4 +127,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-tooltip.js

@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-tooltip.js v2.0.0
+ * bootstrap-tooltip.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#tooltips
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ===========================================================
@@ -267,4 +267,4 @@
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
   }
 
-}( window.jQuery )
+}( window.jQuery );

docs/assets/js/bootstrap-transition.js

@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.0.0
+ * bootstrap-transition.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#transitions
  * ===================================================
  * Copyright 2012 Twitter, Inc.
@@ -47,5 +47,5 @@
     })()
 
   })
-  
-}( window.jQuery )
+
+}( window.jQuery );

docs/assets/js/bootstrap-typeahead.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-typeahead.js v2.0.0
+ * bootstrap-typeahead.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#typeahead
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -268,4 +268,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

docs/base-css.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -375,7 +375,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     </div><!--/span-->
     <div class="span4">
       <h2>Basic block</h2>
-      <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
+      <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
 <pre>
 &lt;p&gt;Sample text here...&lt;/p&gt;
 </pre>
@@ -385,6 +385,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/pre&gt;
 </pre>
       <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
+      <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
     </div><!--/span-->
     <div class="span4">
       <h2>Google Prettify</h2>
@@ -530,7 +531,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <td>
           <code>.table-bordered</code>
         </td>
-        <td>Rounds corners and adds outter border</td>
+        <td>Rounds corners and adds outer border</td>
       </tr>
       <tr>
         <td>Zebra-stripe</td>
@@ -600,7 +601,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <div class="row">
     <div class="span4">
       <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
-      <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
+      <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
 &lt;table class="table table-striped"&gt;
   …
@@ -852,9 +853,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
 
   <h2>Example forms <small>using just form controls, no extra markup</small></h2>
-  <h3>Basic form</h3>
   <div class="row">
     <div class="span3">
+      <h3>Basic form</h3>
       <p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
     </div>
     <div class="span9">
@@ -866,11 +867,22 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         </label>
         <button type="submit" class="btn">Submit</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well"&gt;
+  &lt;label&gt;Label name&lt;/label&gt;
+  &lt;input type="text" class="span3" placeholder="Type something…"&gt;
+  &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+  &lt;label class="checkbox"&gt;
+    &lt;input type="checkbox"&gt; Check me out
+  &lt;/label&gt;
+  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div> <!-- /row -->
-  <h3>Search form</h3>
   <div class="row">
     <div class="span3">
+      <h3>Search form</h3>
       <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
     </div>
     <div class="span9">
@@ -878,19 +890,35 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <input type="text" class="input-medium search-query">
         <button type="submit" class="btn">Search</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-search"&gt;
+  &lt;input type="text" class="input-medium search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div> <!-- /row -->
-  <h3>Inline form</h3>
   <div class="row">
     <div class="span3">
+      <h3>Inline form</h3>
       <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
     </div>
     <div class="span9">
-      <form class="well form-search">
+      <form class="well form-inline">
         <input type="text" class="input-small" placeholder="Email">
         <input type="password" class="input-small" placeholder="Password">
-        <button type="submit" class="btn">Go</button>
+        <label class="checkbox">
+          <input type="checkbox"> Remember?
+        </label>
+        <button type="submit" class="btn">Sign in</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+  &lt;input type="text" class="input-small" placeholder="Email"&gt;
+  &lt;input type="password" class="input-small" placeholder="Password"&gt;
+  &lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div><!-- /row -->
 
@@ -914,7 +942,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <div class="controls">
               <label class="checkbox">
                 <input type="checkbox" id="optionsCheckbox" value="option1">
-                Option one is this and that&mdash;be sure to include why it’s great
+                Option one is this and that&mdash;be sure to include why it's great
               </label>
             </div>
           </div>
@@ -956,10 +984,26 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">Save changes</button>
-            <button type="reset" class="btn">Cancel</button>
+            <button class="btn">Cancel</button>
           </div>
         </fieldset>
       </form>
+      <h3>Example markup</h3>
+      <p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
+<pre class="prettyprint linenums">
+&lt;form class="form-horizontal"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Legend text&lt;/legend&gt;
+    &lt;div class="control-group"&gt;
+      &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
+      &lt;div class="controls"&gt;
+        &lt;input type="text" class="input-xlarge" id="input01"&gt;
+        &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>What's included</h3>
@@ -1014,9 +1058,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             </div>
           </div>
           <div class="control-group warning">
-            <label class="control-label" for="inputError">Input with warning</label>
+            <label class="control-label" for="inputWarning">Input with warning</label>
             <div class="controls">
-              <input type="text" id="inputError">
+              <input type="text" id="inputWarning">
               <span class="help-inline">Something may have gone wrong</span>
             </div>
           </div>
@@ -1028,9 +1072,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             </div>
           </div>
           <div class="control-group success">
-            <label class="control-label" for="inputError">Input with success</label>
+            <label class="control-label" for="inputSuccess">Input with success</label>
             <div class="controls">
-              <input type="text" id="inputError">
+              <input type="text" id="inputSuccess">
               <span class="help-inline">Woohoo!</span>
             </div>
           </div>
@@ -1049,14 +1093,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">Save changes</button>
-            <button type="reset" class="btn">Cancel</button>
+            <button class="btn">Cancel</button>
           </div>
         </fieldset>
       </form>
     </div>
     <div class="span4">
       <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>
+      <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 its 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 error class to the surrounding <code>.control-group</code>.</p>
@@ -1077,7 +1121,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <fieldset>
           <legend>Extending form controls</legend>
           <div class="control-group">
-            <label class="control-label">Form sizes</label>
+            <label class="control-label">Form grid sizes</label>
             <div class="controls docs-input-sizes">
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
@@ -1106,6 +1150,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
               <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
             </div>
           </div>
+          <div class="control-group">
+            <label class="control-label">Alternate sizes</label>
+            <div class="controls docs-input-sizes">
+              <input class="input-mini" type="text" placeholder=".input-mini">
+              <input class="input-small" type="text" placeholder=".input-small">
+              <input class="input-medium" type="text" placeholder=".input-medium">
+              <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
+            </div>
+          </div>
           <div class="control-group">
             <label class="control-label" for="prependedInput">Prepended text</label>
             <div class="controls">
@@ -1145,7 +1198,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <div class="controls">
               <label class="checkbox">
                 <input type="checkbox" name="optionsCheckboxList1" value="option1">
-                Option one is this and that&mdash;be sure to include why it’s great
+                Option one is this and that&mdash;be sure to include why it's great
               </label>
               <label class="checkbox">
                 <input type="checkbox" name="optionsCheckboxList2" value="option2">
@@ -1163,7 +1216,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             <div class="controls">
               <label class="radio">
                 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-                Option one is this and that&mdash;be sure to include why it’s great
+                Option one is this and that&mdash;be sure to include why it's great
               </label>
               <label class="radio">
                 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
@@ -1173,7 +1226,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">Save changes</button>
-            <button type="reset" class="btn">Cancel</button>
+            <button class="btn">Cancel</button>
           </div>
         </fieldset>
       </form>
@@ -1213,34 +1266,39 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     </thead>
     <tbody>
       <tr>
-        <td><a class="btn" href="#">Default</a></td>
+        <td><button class="btn" href="#">Default</button></td>
         <td><code>.btn</code></td>
         <td>Standard gray button with gradient</td>
       </tr>
       <tr>
-        <td><a class="btn btn-primary" href="#">Primary</a></td>
+        <td><button class="btn btn-primary" href="#">Primary</button></td>
         <td><code>.btn-primary</code></td>
         <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
       </tr>
       <tr>
-        <td><a class="btn btn-info" href="#">Info</a></td>
+        <td><button class="btn btn-info" href="#">Info</button></td>
         <td><code>.btn-info</code></td>
         <td>Used as an alternate to the default styles</td>
       </tr>
       <tr>
-        <td><a class="btn btn-success" href="#">Success</a></td>
+        <td><button class="btn btn-success" href="#">Success</button></td>
         <td><code>.btn-success</code></td>
         <td>Indicates a successful or positive action</td>
       </tr>
       <tr>
-        <td><a class="btn btn-warning" href="#">Warning</a></td>
+        <td><button class="btn btn-warning" href="#">Warning</button></td>
         <td><code>.btn-warning</code></td>
         <td>Indicates caution should be taken with this action</td>
       </tr>
       <tr>
-        <td><a class="btn btn-danger" href="#">Danger</a></td>
+        <td><button class="btn btn-danger" href="#">Danger</button></td>
         <td><code>.btn-danger</code></td>
         <td>Indicates a dangerous or potentially negative action</td>
+      </tr>
+  	  <tr>
+        <td><button class="btn btn-inverse" href="#">Inverse</button></td>
+        <td><code>.btn-inverse</code></td>
+        <td>Alternate dark gray button, not tied to a semantic action or use</td>
       </tr>
     </tbody>
   </table>
@@ -1249,50 +1307,63 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <div class="span4">
       <h3>Buttons for actions</h3>
       <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
+      <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
+      <h3>Cross browser compatibility</h3>
+      <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
     </div>
-    <div class="span4">
-      <h3>For anchors and forms</h3>
-      <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
-    </div>
-    <div class="span4">
-      <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
-    </div>
-  </div>
-
-  <div class="row">
     <div class="span4">
       <h3>Multiple sizes</h3>
-      <p>Fancy larger or smaller buttons? Have at it!</p>
+      <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary">Primary action</a>
-        <a href="#" class="btn btn-large">Action</a>
+        <button class="btn btn-large btn-primary">Primary action</button>
+        <button class="btn btn-large">Action</button>
       </p>
       <p>
-        <a href="#" class="btn btn-small btn-primary">Primary action</a>
-        <a href="#" class="btn btn-small">Action</a>
+        <button class="btn btn-small btn-primary">Primary action</button>
+        <button class="btn btn-small">Action</button>
       </p>
-    </div>
-    <div class="span4">
+      <p>
+        <button class="btn btn-mini btn-primary">Primary action</button>
+        <button class="btn btn-mini">Action</button>
+      </p>
+      <br>
       <h3>Disabled state</h3>
-      <p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
+      <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary disabled">Primary action</a>
-        <a href="#" class="btn btn-large disabled">Action</a>
+        <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+        <a href="#" class="btn btn-large disabled">Link</a>
+      </p>
+      <p style="margin-bottom: 18px;">
+        <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+        <button class="btn btn-large" disabled>Button</button>
       </p>
       <p>
-        <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary action</button>
-        <button class="btn btn-large" disabled>Action</button>
+        <span class="label label-info">Heads up!</span>
+        We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
       </p>
     </div>
     <div class="span4">
-      <h3>Cross browser compatibility</h3>
-      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
-      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+      <h3>One class, multiple tags</h3>
+      <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+<form>
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">Button</button>
+<input class="btn" type="button" value="Input">
+<input class="btn" type="submit" value="Submit">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+  Button
+&lt;/button&gt;
+&lt;input class="btn" type="button"
+         value="Input"&gt;
+&lt;input class="btn" type="submit"
+         value="Submit"&gt;
+</pre>
+      <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
     </div>
   </div>
-
-  <br>
-
 </section>
 
 
@@ -1305,148 +1376,144 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   </div>
   <div class="row">
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-glass"></i>
-        <i class="icon-music"></i>
-        <i class="icon-search"></i>
-        <i class="icon-envelope"></i>
-        <i class="icon-heart"></i>
-        <i class="icon-star"></i>
-        <i class="icon-star-empty"></i>
-        <i class="icon-user"></i>
-        <i class="icon-film"></i>
-        <i class="icon-th-large"></i>
-        <i class="icon-th"></i>
-        <i class="icon-th-list"></i>
-        <i class="icon-ok"></i>
-        <i class="icon-remove"></i>
-        <i class="icon-zoom-in"></i>
-        <i class="icon-zoom-out"></i>
-        <i class="icon-off"></i>
-        <i class="icon-signal"></i>
-        <i class="icon-cog"></i>
-        <i class="icon-trash"></i>
-
-        <i class="icon-home"></i>
-        <i class="icon-file"></i>
-        <i class="icon-time"></i>
-        <i class="icon-road"></i>
-        <i class="icon-download-alt"></i>
-        <i class="icon-download"></i>
-        <i class="icon-upload"></i>
-        <i class="icon-inbox"></i>
-        <i class="icon-play-circle"></i>
-        <i class="icon-repeat"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-glass"></i> icon-glass</li>
+        <li><i class="icon-music"></i> icon-music</li>
+        <li><i class="icon-search"></i> icon-search</li>
+        <li><i class="icon-envelope"></i> icon-envelope</li>
+        <li><i class="icon-heart"></i> icon-heart</li>
+        <li><i class="icon-star"></i> icon-star</li>
+        <li><i class="icon-star-empty"></i> icon-star-empty</li>
+        <li><i class="icon-user"></i> icon-user</li>
+        <li><i class="icon-film"></i> icon-film</li>
+        <li><i class="icon-th-large"></i> icon-th-large</li>
+        <li><i class="icon-th"></i> icon-th</li>
+        <li><i class="icon-th-list"></i> icon-th-list</li>
+        <li><i class="icon-ok"></i> icon-ok</li>
+        <li><i class="icon-remove"></i> icon-remove</li>
+        <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
+        <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
+        <li><i class="icon-off"></i> icon-off</li>
+        <li><i class="icon-signal"></i> icon-signal</li>
+        <li><i class="icon-cog"></i> icon-cog</li>
+        <li><i class="icon-trash"></i> icon-trash</li>
+        <li><i class="icon-home"></i> icon-home</li>
+        <li><i class="icon-file"></i> icon-file</li>
+        <li><i class="icon-time"></i> icon-time</li>
+        <li><i class="icon-road"></i> icon-road</li>
+        <li><i class="icon-download-alt"></i> icon-download-alt</li>
+        <li><i class="icon-download"></i> icon-download</li>
+        <li><i class="icon-upload"></i> icon-upload</li>
+        <li><i class="icon-inbox"></i> icon-inbox</li>
+        <li><i class="icon-play-circle"></i> icon-play-circle</li>
+        <li><i class="icon-repeat"></i> icon-repeat</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-refresh"></i>
-        <i class="icon-list-alt"></i>
-        <i class="icon-lock"></i>
-        <i class="icon-flag"></i>
-        <i class="icon-headphones"></i>
-        <i class="icon-volume-off"></i>
-        <i class="icon-volume-down"></i>
-        <i class="icon-volume-up"></i>
-        <i class="icon-qrcode"></i>
-        <i class="icon-barcode"></i>
-
-        <i class="icon-tag"></i>
-        <i class="icon-tags"></i>
-        <i class="icon-book"></i>
-        <i class="icon-bookmark"></i>
-        <i class="icon-print"></i>
-        <i class="icon-camera"></i>
-        <i class="icon-font"></i>
-        <i class="icon-bold"></i>
-        <i class="icon-italic"></i>
-        <i class="icon-text-height"></i>
-        <i class="icon-text-width"></i>
-        <i class="icon-align-left"></i>
-        <i class="icon-align-center"></i>
-        <i class="icon-align-right"></i>
-        <i class="icon-align-justify"></i>
-        <i class="icon-list"></i>
-        <i class="icon-indent-left"></i>
-        <i class="icon-indent-right"></i>
-        <i class="icon-facetime-video"></i>
-        <i class="icon-picture"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-refresh"></i> icon-refresh</li>
+        <li><i class="icon-list-alt"></i> icon-list-alt</li>
+        <li><i class="icon-lock"></i> icon-lock</li>
+        <li><i class="icon-flag"></i> icon-flag</li>
+        <li><i class="icon-headphones"></i> icon-headphones</li>
+        <li><i class="icon-volume-off"></i> icon-volume-off</li>
+        <li><i class="icon-volume-down"></i> icon-volume-down</li>
+        <li><i class="icon-volume-up"></i> icon-volume-up</li>
+        <li><i class="icon-qrcode"></i> icon-qrcode</li>
+        <li><i class="icon-barcode"></i> icon-barcode</li>
+        <li><i class="icon-tag"></i> icon-tag</li>
+        <li><i class="icon-tags"></i> icon-tags</li>
+        <li><i class="icon-book"></i> icon-book</li>
+        <li><i class="icon-bookmark"></i> icon-bookmark</li>
+        <li><i class="icon-print"></i> icon-print</li>
+        <li><i class="icon-camera"></i> icon-camera</li>
+        <li><i class="icon-font"></i> icon-font</li>
+        <li><i class="icon-bold"></i> icon-bold</li>
+        <li><i class="icon-italic"></i> icon-italic</li>
+        <li><i class="icon-text-height"></i> icon-text-height</li>
+        <li><i class="icon-text-width"></i> icon-text-width</li>
+        <li><i class="icon-align-left"></i> icon-align-left</li>
+        <li><i class="icon-align-center"></i> icon-align-center</li>
+        <li><i class="icon-align-right"></i> icon-align-right</li>
+        <li><i class="icon-align-justify"></i> icon-align-justify</li>
+        <li><i class="icon-list"></i> icon-list</li>
+        <li><i class="icon-indent-left"></i> icon-indent-left</li>
+        <li><i class="icon-indent-right"></i> icon-indent-right</li>
+        <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
+        <li><i class="icon-picture"></i> icon-picture</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-pencil"></i>
-        <i class="icon-map-marker"></i>
-        <i class="icon-adjust"></i>
-        <i class="icon-tint"></i>
-        <i class="icon-edit"></i>
-        <i class="icon-share"></i>
-        <i class="icon-check"></i>
-        <i class="icon-move"></i>
-        <i class="icon-step-backward"></i>
-        <i class="icon-fast-backward"></i>
-        <i class="icon-backward"></i>
-        <i class="icon-play"></i>
-        <i class="icon-pause"></i>
-        <i class="icon-stop"></i>
-        <i class="icon-forward"></i>
-        <i class="icon-fast-forward"></i>
-        <i class="icon-step-forward"></i>
-        <i class="icon-eject"></i>
-        <i class="icon-chevron-left"></i>
-        <i class="icon-chevron-right"></i>
-
-        <i class="icon-plus-sign"></i>
-        <i class="icon-minus-sign"></i>
-        <i class="icon-remove-sign"></i>
-        <i class="icon-ok-sign"></i>
-        <i class="icon-question-sign"></i>
-        <i class="icon-info-sign"></i>
-        <i class="icon-screenshot"></i>
-        <i class="icon-remove-circle"></i>
-        <i class="icon-ok-circle"></i>
-        <i class="icon-ban-circle"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-pencil"></i> icon-pencil</li>
+        <li><i class="icon-map-marker"></i> icon-map-marker</li>
+        <li><i class="icon-adjust"></i> icon-adjust</li>
+        <li><i class="icon-tint"></i> icon-tint</li>
+        <li><i class="icon-edit"></i> icon-edit</li>
+        <li><i class="icon-share"></i> icon-share</li>
+        <li><i class="icon-check"></i> icon-check</li>
+        <li><i class="icon-move"></i> icon-move</li>
+        <li><i class="icon-step-backward"></i> icon-step-backward</li>
+        <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+        <li><i class="icon-backward"></i> icon-backward</li>
+        <li><i class="icon-play"></i> icon-play</li>
+        <li><i class="icon-pause"></i> icon-pause</li>
+        <li><i class="icon-stop"></i> icon-stop</li>
+        <li><i class="icon-forward"></i> icon-forward</li>
+        <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
+        <li><i class="icon-step-forward"></i> icon-step-forward</li>
+        <li><i class="icon-eject"></i> icon-eject</li>
+        <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
+        <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
+        <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
+        <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
+        <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
+        <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+        <li><i class="icon-question-sign"></i> icon-question-sign</li>
+        <li><i class="icon-info-sign"></i> icon-info-sign</li>
+        <li><i class="icon-screenshot"></i> icon-screenshot</li>
+        <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
+        <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
+        <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-arrow-left"></i>
-        <i class="icon-arrow-right"></i>
-        <i class="icon-arrow-up"></i>
-        <i class="icon-arrow-down"></i>
-        <i class="icon-share-alt"></i>
-        <i class="icon-resize-full"></i>
-        <i class="icon-resize-small"></i>
-        <i class="icon-plus"></i>
-        <i class="icon-minus"></i>
-        <i class="icon-asterisk"></i>
-
-        <i class="icon-exclamation-sign"></i>
-        <i class="icon-gift"></i>
-        <i class="icon-leaf"></i>
-        <i class="icon-fire"></i>
-        <i class="icon-eye-open"></i>
-        <i class="icon-eye-close"></i>
-        <i class="icon-warning-sign"></i>
-        <i class="icon-plane"></i>
-        <i class="icon-calendar"></i>
-        <i class="icon-random"></i>
-        <i class="icon-comment"></i>
-        <i class="icon-magnet"></i>
-        <i class="icon-chevron-up"></i>
-        <i class="icon-chevron-down"></i>
-        <i class="icon-retweet"></i>
-        <i class="icon-shopping-cart"></i>
-        <i class="icon-folder-close"></i>
-        <i class="icon-folder-open"></i>
-        <i class="icon-resize-vertical"></i>
-        <i class="icon-resize-horizontal"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
+        <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
+        <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
+        <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
+        <li><i class="icon-share-alt"></i> icon-share-alt</li>
+        <li><i class="icon-resize-full"></i> icon-resize-full</li>
+        <li><i class="icon-resize-small"></i> icon-resize-small</li>
+        <li><i class="icon-plus"></i> icon-plus</li>
+        <li><i class="icon-minus"></i> icon-minus</li>
+        <li><i class="icon-asterisk"></i> icon-asterisk</li>
+        <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
+        <li><i class="icon-gift"></i> icon-gift</li>
+        <li><i class="icon-leaf"></i> icon-leaf</li>
+        <li><i class="icon-fire"></i> icon-fire</li>
+        <li><i class="icon-eye-open"></i> icon-eye-open</li>
+        <li><i class="icon-eye-close"></i> icon-eye-close</li>
+        <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
+        <li><i class="icon-plane"></i> icon-plane</li>
+        <li><i class="icon-calendar"></i> icon-calendar</li>
+        <li><i class="icon-random"></i> icon-random</li>
+        <li><i class="icon-comment"></i> icon-comment</li>
+        <li><i class="icon-magnet"></i> icon-magnet</li>
+        <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
+        <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
+        <li><i class="icon-retweet"></i> icon-retweet</li>
+        <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
+        <li><i class="icon-folder-close"></i> icon-folder-close</li>
+        <li><i class="icon-folder-open"></i> icon-folder-open</li>
+        <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
+        <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+      </ul>
     </div>
   </div>
   <div class="alert alert-info">
-    <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.
+    <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 highlight the icon's size.
   </div>
 
   <br>
@@ -1460,7 +1527,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     </div>
     <div class="span4">
       <h3>How to use</h3>
-      <p>With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
+      <p>With v2.0.1, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
 <pre class="prettyprint linenums">
 &lt;i class="icon-search"&gt;&lt;/i&gt;
 </pre>
@@ -1495,7 +1562,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
           <a class="btn" href="#"><i class="icon-align-justify"></i></a>
         </div>
         <div class="btn-group">
-          <a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
+          <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
@@ -1530,11 +1597,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <div class="span4">
       <form>
         <div class="control-group">
-          <label class="control-label" for="prependedInput">Email address</label>
+          <label class="control-label" for="inputIcon">Email address</label>
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon-envelope"></i></span>
-              <input class="span2" id="iconInput" type="text">
+              <input class="span2" id="inputIcon" type="text">
             </div>
           </div>
         </div>
@@ -1576,5 +1643,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/build/index.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 var hogan = require('hogan.js')
   , fs    = require('fs')
+  , prod  = process.argv[2] == 'production'
 
 var layout, pages
 
@@ -21,6 +22,7 @@ pages.forEach(function (name) {
 
   context[name.replace(/\.mustache$/, '')] = 'active'
   context._i = true
+  context.production = prod
 
   page = hogan.compile(page, { sectionTags: [{o:'_i', c:'i'}] })
   page = layout.render(context, {

docs/components.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -98,6 +98,7 @@
         </ul>
       </li>
       <li><a href="#labels">Labels</a></li>
+      <li><a href="#typography">Typography</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
       <li><a href="#progress">Progress bars</a></li>
@@ -118,14 +119,34 @@
     <div class="span4">
       <h3>Button groups</h3>
       <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
-      <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
-      <div class="btn-toolbar" style="margin-top: 18px;">
-        <div class="btn-group">
+      <h3>Best practices</h3>
+      <p>We recommend the following guidelines for using button groups and toolbars:</p>
+      <ul>
+        <li>Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.</li>
+        <li>Don't mix buttons of different colors in the same button group.</li>
+        <li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
+      </ul>
+      <p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
+    </div>
+    <div class="span4">
+      <h3>Default example</h3>
+      <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
+      <div class="">
+        <div class="btn-group" style="margin: 9px 0;">
           <a class="btn" href="#">Left</a>
           <a class="btn" href="#">Middle</a>
           <a class="btn" href="#">Right</a>
         </div>
       </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+      <h3>Toolbar example</h3>
+      <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
       <div class="btn-toolbar">
         <div class="btn-group">
           <a class="btn" href="#">1</a>
@@ -142,18 +163,6 @@
           <a class="btn" href="#">8</a>
         </div>
       </div>
-    </div>
-    <div class="span4">
-      <h3>Example markup</h3>
-      <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
-  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
-  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
-  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
-&lt;/div&gt;
-</pre>
-      <p>And with a toolbar for multiple groups:</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-toolbar"&gt;
   &lt;div class="btn-group"&gt;
@@ -239,7 +248,9 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
-      </div>
+      </div><!-- /btn-toolbar -->
+      <hr>
+      <p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
     </div>
     <div class="span8">
       <h3>Example markup</h3>
@@ -354,9 +365,10 @@
     <div class="span4">
       <h3>Powerful base class</h3>
       <p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
-      <h3>Why tabs and pills</h3>
-      <p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
-      <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
+      <h3>When to use</h3>
+      <p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
+      <h3>Component alignment</h3>
+      <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
     </div>
     <div class="span4">
       <h3>Basic tabs</h3>
@@ -605,7 +617,7 @@
     <div class="span4">
       <h3>Custom jQuery plugin</h3>
       <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
-      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
+      <p><a class="btn" href="./javascript.html#tabs">Get the javascript &rarr;</a></p>
     </div>
   </div>
 
@@ -762,7 +774,9 @@
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
               </ul>
             </li>
           </ul>
@@ -801,12 +815,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <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>
+      <h3>Fixed navbar</h3>
+      <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>.</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
 &lt;/div&gt;
 </pre>
+      <p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
       <h3>Brand name</h3>
       <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 <pre class="prettyprint linenums">
@@ -827,14 +843,14 @@
 &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="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-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;
 
@@ -864,8 +880,18 @@
   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
+      <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  ...
+  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+      <h3>Component alignment</h3>
+      <p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
       <h3>Adding dropdowns</h3>
-      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
+      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;
@@ -881,7 +907,7 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-      <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
+      <p><a class="btn" href="./javascript.html#dropdowns">Get the javascript &rarr;</a></p>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
@@ -1021,7 +1047,7 @@
   <div class="row">
     <div class="span4">
       <h3>About pager</h3>
-      <p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
+      <p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
     </div>
     <div class="span4">
       <h3>Default example</h3>
@@ -1088,10 +1114,10 @@
       </tr>
       <tr>
         <td>
-          <span class="label label-success">New</span>
+          <span class="label label-success">Success</span>
         </td>
         <td>
-          <code>&lt;span class="label label-success"&gt;New&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
@@ -1124,6 +1150,55 @@
 
 
 
+<!-- Typographic components
+================================================== -->
+<section id="typography">
+  <div class="page-header">
+    <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
+  </div>
+  <h2>Hero unit</h2>
+  <div class="row">
+    <div class="span4">
+      <p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
+      <h3>Markup</h3>
+      <p>Wrap your content in a <code>div</code> like so:</p>
+<pre class="prettyprint linenums">
+&lt;div class="hero-unit"&gt;
+  &lt;h1&gt;Heading&lt;/h1&gt;
+  &lt;p&gt;Tagline&lt;/p&gt;
+  &lt;p&gt;
+    &lt;a class="btn btn-primary btn-large"&gt;
+      Learn more
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span8">
+      <div class="hero-unit">
+        <h1>Hello, world!</h1>
+        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+        <p><a class="btn btn-primary btn-large">Learn more</a></p>
+      </div>
+    </div>
+  </div><!-- /row -->
+  <h2>Page header</h2>
+  <div class="row">
+    <div class="span4">
+      <p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
+    </div>
+    <div class="span8">
+<pre class="prettyprint linenums">
+&lt;div class="page-haeder"&gt;
+  &lt;h1&gt;Example page header&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
@@ -1168,7 +1243,7 @@
             <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>
-              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+              <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
             </div>
           </div>
         </li>
@@ -1178,7 +1253,7 @@
             <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>
-              <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+              <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
             </div>
           </div>
         </li>
@@ -1282,7 +1357,7 @@
   <div class="row">
     <div class="span4">
       <h3>Rewritten base class</h3>
-      <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
+      <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.</p>
       <h3>Single alert message</h3>
       <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
       <hr>
@@ -1294,26 +1369,26 @@
       <h3>Example alerts</h3>
       <p>Wrap your message and an optional close icon in a div with simple class.</p>
       <div class="alert">
-        <a class="close">&times;</a>
-        <strong>Warning!</strong> Best check yo self, you’re not looking too good.
+        <a class="close" data-dismiss="alert">&times;</a>
+        <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close"&gt;&times;&lt;/a&gt;
-  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you’re not looking too good.
+  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
 &lt;/div&gt;
 </pre>
       <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
       <div class="alert alert-block">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <h4 class="alert-heading">Warning!</h4>
-        <p>Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;a class="close"&gt;&times;&lt;/a&gt;
+  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
   &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
-  Best check yo self, you’re not...
+  Best check yo self, you're not...
 &lt;/div&gt;
 </pre>
     </div>
@@ -1324,7 +1399,7 @@
     <div class="span4">
       <h3>Error or danger</h3>
       <div class="alert alert-error">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
 <pre class="prettyprint linenums">
@@ -1336,7 +1411,7 @@
     <div class="span4">
       <h3>Success</h3>
       <div class="alert alert-success">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
 <pre class="prettyprint linenums">
@@ -1348,8 +1423,8 @@
     <div class="span4">
       <h3>Information</h3>
       <div class="alert alert-info">
-        <a class="close">&times;</a>
-        <strong>Heads up!</strong> This alert needs your attention, but it’s not super important.
+        <a class="close" data-dismiss="alert">&times;</a>
+        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-info"&gt;
@@ -1511,5 +1586,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/download.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -93,14 +93,15 @@
   <div class="page-header">
     <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
     <h1>
-      1. Chose components
+      1. Choose components
       <small>Get just the CSS you need</small>
     </h1>
   </div>
   <div class="row download-builder">
     <div class="span3">
       <h3>Scaffolding</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> CSS reset</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
       <h3>Base CSS</h3>
@@ -123,6 +124,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
     </div><!-- /span -->
     <div class="span3">
       <h3>JS Components</h3>
@@ -354,5 +356,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/examples.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -95,7 +95,7 @@
       <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
     <h3>Fluid layout</h3>
-    <p>Uses are new responsive, fluid grid system to create seamless liquid layout.</p>
+    <p>Uses our new responsive, fluid grid system to create seamless liquid layout.</p>
   </li>
   <li class="span4">
     <a class="thumbnail" href="examples/starter-template.html">
@@ -139,5 +139,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/examples/fluid.html

@@ -3,14 +3,10 @@
   <head>
     <meta charset="utf-8">
     <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="../assets/css/bootstrap.css" rel="stylesheet">
     <style type="text/css">
@@ -24,6 +20,11 @@
     </style>
     <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
@@ -37,9 +38,9 @@
       <div class="navbar-inner">
         <div class="container-fluid">
           <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>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
           <div class="nav-collapse">
@@ -128,14 +129,23 @@
       </footer>
 
     </div><!--/.fluid-container-->
-
-
+    
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../assets/js/tests/vendor/jquery.js"></script>
+    <script src="../assets/js/jquery.js"></script>
     <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
     <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
 
   </body>
 </html>

docs/examples/hero.html

@@ -3,14 +3,10 @@
   <head>
     <meta charset="utf-8">
     <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="../assets/css/bootstrap.css" rel="stylesheet">
     <style type="text/css">
@@ -21,6 +17,11 @@
     </style>
     <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
@@ -34,9 +35,9 @@
       <div class="navbar-inner">
         <div class="container">
           <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>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
           <div class="nav-collapse">
@@ -89,9 +90,19 @@
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../assets/js/tests/vendor/jquery.js"></script>
+    <script src="../assets/js/jquery.js"></script>
     <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
     <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
 
   </body>
 </html>

docs/examples/starter-template.html

@@ -3,22 +3,23 @@
   <head>
     <meta charset="utf-8">
     <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="../assets/css/bootstrap.css" rel="stylesheet">
-    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
     <style>
       body {
         padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
       }
     </style>
+    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
 
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
@@ -33,9 +34,9 @@
       <div class="navbar-inner">
         <div class="container">
           <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>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
           <div class="nav-collapse">
@@ -59,8 +60,7 @@
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-    <script src="../assets/js/tests/vendor/jquery.js"></script>
+    <script src="../assets/js/jquery.js"></script>
     <script src="../assets/js/bootstrap-transition.js"></script>
     <script src="../assets/js/bootstrap-alert.js"></script>
     <script src="../assets/js/bootstrap-modal.js"></script>

docs/index.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -89,18 +89,17 @@
   <ul class="quick-links">
     <li><a href="./upgrading.html">Upgrading from 1.4</a></li>
     <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
-    <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
-    <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
+    <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap &amp; changelog</a></li>
     <li class="divider">&middot;</li>
     <li>
-      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
     </li>
     <li>
-      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
     </li>
     <li class="divider">&middot;</li>
     <li class="follow-btn">
-      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
+      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
     </li>
     <li class="tweet-btn">
       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
@@ -122,7 +121,7 @@
     <div class="span4">
       <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
       <h2>For all skill levels</h2>
-      <p>Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
+      <p>Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
     </div>
     <div class="span4">
       <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
@@ -243,5 +242,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/javascript.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -134,7 +134,7 @@
         <div class="span3">
           <label>
             <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
-            <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
+            <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p>
           </label>
         </div>
         <div class="span3">
@@ -199,7 +199,7 @@
         <div class="span3 columns">
           <h3>About modals</h3>
           <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
-          <a href="../js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Static example</h2>
@@ -273,6 +273,12 @@
                <td>true</td>
                <td>Closes the modal when escape key is pressed</td>
              </tr>
+             <tr>
+               <td>show</td>
+               <td>boolean</td>
+               <td>true</td>
+               <td>Shows the modal when initialized.</td>
+             </tr>
             </tbody>
           </table>
           <h3>Markup</h3>
@@ -283,7 +289,7 @@
 </pre>
 
 <pre class="prettyprint linenums">
-&lt;div class="modal"&gt;
+&lt;div class="modal" id="myModal"&gt;
   &lt;div class="modal-header"&gt;
     &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
     &lt;h3&gt;Modal header&lt;/h3&gt;
@@ -365,7 +371,7 @@ $('#myModal').on('hidden', function () {
         <div class="span3 columns">
           <h3>About dropdowns</h3>
           <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
-          <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Examples</h2>
@@ -493,7 +499,7 @@ $('#myModal').on('hidden', function () {
       <div class="row">
         <div class="span3 columns">
           <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
-          <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example navbar with scrollspy</h2>
@@ -587,7 +593,7 @@ $('#myModal').on('hidden', function () {
       <div class="row">
         <div class="span3 columns">
           <p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p>
-          <a href="../js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example tabs</h2>
@@ -624,11 +630,11 @@ $('#myModal').on('hidden', function () {
           <h3>Markup</h3>
           <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
 <pre class="prettyprint linenums">
-&lt;ul class="tabs"&gt;
+&lt;ul class="nav nav-tabs"&gt;
   &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</pre>
           <h3>Methods</h3>
           <h4>$().tab</h4>
@@ -636,7 +642,7 @@ $('#myModal').on('hidden', function () {
             Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
           </p>
 <pre class="prettyprint linenums">
-&lt;ul class="tabs"&gt;
+&lt;ul class="nav nav-tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
@@ -694,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <div class="row">
         <div class="span3 columns">
           <h3>About Tooltips</h3>
-          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
-          <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
+          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
+          <a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example use of Tooltips</h2>
           <p>Hover over the links below to see tooltips:</p>
           <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
+            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
             </p>
           </div>
           <hr>
@@ -727,7 +733,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              </tr>
              <tr>
                <td>placement</td>
-               <td>string</td>
+               <td>string|function</td>
                <td>'top'</td>
                <td>how to position the tooltip - top | bottom | left | right</td>
              </tr>
@@ -767,6 +773,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           </div>
           <h3>Markup</h3>
           <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
+<pre class="prettyprint linenums">
+&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
+</pre>
           <h3>Methods</h3>
           <h4>$().tooltip(options)</h4>
           <p>Attaches a tooltip handler to an element collection.</p>
@@ -795,8 +804,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <div class="span3 columns">
           <h3>About popovers</h3>
           <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
-          <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
-          <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
+          <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
+          <a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example hover popover</h2>
@@ -827,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              </tr>
              <tr>
                <td>placement</td>
-               <td>string</td>
+               <td>string|function</td>
                <td>'right'</td>
                <td>how to position the popover - top | bottom | left | right</td>
              </tr>
@@ -903,27 +912,27 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <div class="span3 columns">
           <h3>About alerts</h3>
           <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
-          <a href="../js/bootstrap-alert.js" target="_blank" class="btn">Download</a>
+          <a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">Download</a>
         </div>
         <div class="span9 columns">
           <h2>Example alerts</h2>
           <p>The alerts plugin works on regular alert messages, and block messages.</p>
           <div class="alert fade in">
             <a class="close" data-dismiss="alert" href="#">&times;</a>
-            <strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.
+            <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
           </div>
           <div class="alert alert-block alert-error fade in">
             <a class="close" data-dismiss="alert" href="#">&times;</a>
             <h4 class="alert-heading">Oh snap! You got an error!</h4>
             <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <p>
-              <a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
             </p>
           </div>
           <hr>
-          <h2>Using bootstrap-alerts.js</h2>
+          <h2>Using bootstrap-alert.js</h2>
           <p>Enable dismissal of an alert via javascript:</p>
-          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
+          <pre class="prettyprint linenums">$(".alert").alert()</pre>
           <h3>Markup</h3>
           <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
           <pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
@@ -932,7 +941,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
           <h4>.alert('close')</h4>
           <p>Closes an alert.</p>
-          <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
+          <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
           <h3>Events</h3>
           <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
           <table class="table table-bordered table-striped">
@@ -973,7 +982,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span3 columns">
           <h3>About</h3>
           <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
-          <a href="../js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-button.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example uses</h2>
@@ -1042,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
 </pre>
           <h3>Methods</h3>
           <h4>$().button('toggle')</h4>
-          <p>Toggles push state. Gives btn the look that it's been activated.</p>
+          <p>Toggles push state. Gives btn the look that it hass been activated.</p>
           <div class="alert alert-info">
             <strong>Heads up!</strong>
             You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
@@ -1080,7 +1089,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span3 columns">
           <h3>About</h3>
           <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
-          <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example accordion</h2>
@@ -1145,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
                <td>parent</td>
                <td>selector</td>
                <td>false</td>
-               <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
+               <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
              </tr>
              <tr>
                <td>toggle</td>
@@ -1233,7 +1242,7 @@ $('#myCollapsible').on('hidden', function () {
         <div class="span3 columns">
           <h3>About</h3>
           <p>A generic plugin for cycling through elements. A merry-go-round.</p>
-          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example carousel</h2>
@@ -1295,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
           <h3>Markup</h3>
           <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
 <pre class="prettyprint linenums">
-&lt;div class="carousel"&gt;
+&lt;div id="myCarousel" class="carousel"&gt;
   &lt;!-- Carousel items --&gt;
   &lt;div class="carousel-inner"&gt;
-    ...
+    &lt;div class="active item"&gt;…&lt;/div&gt;
+    &lt;div class="item"&gt;…&lt;/div&gt;
+    &lt;div class="item"&gt;…&lt;/div&gt;
   &lt;/div&gt;
   &lt;!-- Carousel nav --&gt;
   &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
@@ -1339,7 +1350,7 @@ $('.myCarousel').carousel({
              </tr>
              <tr>
                <td>slid</td>
-               <td>This event is fired when the carousel has completed it's slide transition.</td>
+               <td>This event is fired when the carousel has completed its slide transition.</td>
              </tr>
             </tbody>
           </table>
@@ -1359,7 +1370,7 @@ $('.myCarousel').carousel({
         <div class="span3 columns">
           <h3>About</h3>
           <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
-          <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
+          <a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
           <h2>Example</h2>
@@ -1422,7 +1433,7 @@ $('.myCarousel').carousel({
 </pre>
           <h3>Methods</h3>
           <h4>.typeahead(options)</h4>
-          <p>Initializes an input with a typahead.</p>
+          <p>Initializes an input with a typeahead.</p>
         </div>
       </div>
     </section>
@@ -1459,5 +1470,7 @@ $('.myCarousel').carousel({
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/less.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -100,7 +100,7 @@
   <div class="row">
     <div class="span4">
       <h3>Why LESS?</h3>
-      <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
+      <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
     </div>
     <div class="span4">
       <h3>What's included?</h3>
@@ -123,7 +123,7 @@
     </div>
     <div class="span4">
       <h3>Operations</h3>
-      <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+      <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
     </div>
   </div>
 </section>
@@ -191,7 +191,6 @@
           <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>
@@ -349,13 +348,13 @@
         <tbody>
           <tr>
             <td class="span3"><code>@warningText</code></td>
-            <td>#f3edd2</td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+            <td>#c09853</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
-            <td>#c09853</td>
-            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+            <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@errorText</code></td>
@@ -605,7 +604,7 @@
       <tr>
         <td><code>.scale()</code></td>
         <td><code>@ratio</code></td>
-        <td>Scale an element to <em>n</em> times it's original size</td>
+        <td>Scale an element to <em>n</em> times its original size</td>
       </tr>
       <tr>
         <td><code>.translate()</code></td>
@@ -615,7 +614,7 @@
       <tr>
         <td><code>.background-clip()</code></td>
         <td><code>@clip</code></td>
-        <td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
+        <td>Crop the background of an element (useful for <code>border-radius</code>)</td>
       </tr>
       <tr>
         <td><code>.background-size()</code></td>
@@ -718,8 +717,8 @@
   <div class="row">
     <div class="span4">
       <h3>Node with makefile</h3>
-      <p>Install the LESS command line compiler with npm by running the following command:</p>
-      <pre>$ npm install less</pre>
+      <p>Install the LESS command line compiler globally with npm by running the following command:</p>
+      <pre>$ npm install -g less</pre>
       <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
       <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
     </div><!-- /span4 -->
@@ -790,5 +789,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/scaffolding.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -81,7 +81,9 @@
         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">Grid system</a></li>
+            <li><a href="#gridSystem">Grid system</a></li>
+            <li><a href="#fluidGridSystem">Fluid gird system</a></li>
+            <li><a href="#gridCustomization">Customizing</a></li>
             <li><a href="#layouts">Layouts</a></li>
             <li><a href="#responsive">Responsive design</a></li>
           </ul>
@@ -92,12 +94,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>Grid system <small>12 columns with a responsive twist</small></h1>
+    <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
   </div>
 
-  <h2>Default 940px grid</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -173,7 +174,8 @@
   <div class="row">
     <div class="span6">
       <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
-      <h4>Example</h4>
+      <h3>Example</h3>
+      <p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
       <div class="row show-grid">
         <div class="span6">
           Level 1 of column
@@ -187,7 +189,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div><!-- /span6 -->
     <div class="span6">
 <pre class="prettyprint linenums">
 &lt;div class="row"&gt;
@@ -202,8 +204,112 @@
 </pre>
     </div>
   </div>
+</section>
 
-  <h2>Grid customization</h2>
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
+  </div>
+
+  <h2>Fluid columns</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Percents, not pixels</h3>
+      <p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
+    </div>
+    <div class="span4">
+      <h3>Fluid rows</h3>
+      <p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
+    </div>
+    <div class="span4">
+      <h3>Markup</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>Fluid nesting</h2>
+  <div class="row">
+    <div class="span6">
+      <p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
+      <div class="row-fluid show-grid">
+        <div class="span12">
+          Fluid 12
+          <div class="row-fluid show-grid">
+            <div class="span6">
+              Fluid 6
+            </div>
+            <div class="span6">
+              Fluid 6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span12"&gt;
+    Level 1 of column
+    &lt;div class="row-fluid"&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>Grid customization</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -242,7 +348,7 @@
     </div>
     <div class="span4">
       <h3>How to customize</h3>
-      <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
+      <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
     </div>
     <div class="span4">
       <h3>Staying responsive</h3>
@@ -265,8 +371,8 @@
     <div class="span6">
       <h2>Fixed layout</h2>
       <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -279,9 +385,9 @@
     <div class="span6">
       <h2>Fluid layout</h2>
       <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;
@@ -315,7 +421,7 @@
     </div>
     <div class="span8">
       <h2>Supported devices</h2>
-      <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
+      <p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
       <table class="table table-bordered table-striped">
         <thead>
           <tr>
@@ -338,13 +444,13 @@
           </tr>
           <tr>
             <td>Landscape tablets</td>
-            <td>768px to 940px</td>
-            <td>44px</td>
+            <td>768px to 979px</td>
+            <td>42px</td>
             <td>20px</td>
           </tr>
           <tr>
             <td>Default</td>
-            <td>940px and up</td>
+            <td>980px and up</td>
             <td>60px</td>
             <td>20px</td>
           </tr>
@@ -357,6 +463,10 @@
         </tbody>
       </table>
 
+      <h3>Requires meta tag</h3>
+      <p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
+      <pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
+
       <h3>What they do</h3>
       <p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
       <ul>
@@ -377,7 +487,7 @@
       <ol>
         <li>Use the compiled responsive version, bootstrap-responsive.css</li>
         <li>Add @import "responsive.less" and recompile Bootstrap</li>
-        <li>Modify and recompile responsive.less as a separate</li>
+        <li>Modify and recompile responsive.less as a separate file</li>
       </ol>
       <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
     </div>
@@ -390,7 +500,7 @@
   @media (max-width: 768px) { ... }
 
   // Portrait tablet to landscape and desktop
-  @media (min-width: 768px) and (max-width: 940px) { ... }
+  @media (min-width: 768px) and (max-width: 980px) { ... }
 
   // Large desktop
   @media (min-width: 1200px) { .. }
@@ -432,5 +542,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

docs/templates/layout.mustache

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -109,5 +109,24 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+    {{#production}}
+    <!-- Analytics
+    ================================================== -->
+    <script>
+      var _gauges = _gauges || [];
+      (function() {
+        var t   = document.createElement('script');
+        t.type  = 'text/javascript';
+        t.async = true;
+        t.id    = 'gauges-tracker';
+        t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
+        t.src = '//secure.gaug.es/track.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(t, s);
+      })();
+    </script>
+    {{/production}}
+
   </body>
 </html>

docs/templates/pages/base-css.mustache

@@ -299,7 +299,7 @@
     </div><!--/span-->
     <div class="span4">
       <h2>Basic block</h2>
-      <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
+      <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
 <pre>
 &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
 </pre>
@@ -309,6 +309,7 @@
 &lt;/pre&gt;
 </pre>
       <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
+      <p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
     </div><!--/span-->
     <div class="span4">
       <h2>Google Prettify</h2>
@@ -454,7 +455,7 @@
         <td>
           <code>.table-bordered</code>
         </td>
-        <td>{{_i}}Rounds corners and adds outter border{{/i}}</td>
+        <td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
       </tr>
       <tr>
         <td>{{_i}}Zebra-stripe{{/i}}</td>
@@ -524,7 +525,7 @@
   <div class="row">
     <div class="span4">
       <p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p>
-      <p class="muted">{{_i}}<strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
+      <p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
 &lt;table class="table table-striped"&gt;
   …
@@ -776,9 +777,9 @@
 
 
   <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
-  <h3>{{_i}}Basic form{{/i}}</h3>
   <div class="row">
     <div class="span3">
+      <h3>{{_i}}Basic form{{/i}}</h3>
       <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
     </div>
     <div class="span9">
@@ -790,11 +791,22 @@
         </label>
         <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well"&gt;
+  &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
+  &lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt;
+  &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+  &lt;label class="checkbox"&gt;
+    &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
+  &lt;/label&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div> <!-- /row -->
-  <h3>{{_i}}Search form{{/i}}</h3>
   <div class="row">
     <div class="span3">
+      <h3>{{_i}}Search form{{/i}}</h3>
       <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
     </div>
     <div class="span9">
@@ -802,19 +814,35 @@
         <input type="text" class="input-medium search-query">
         <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-search"&gt;
+  &lt;input type="text" class="input-medium search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div> <!-- /row -->
-  <h3>{{_i}}Inline form{{/i}}</h3>
   <div class="row">
     <div class="span3">
+      <h3>{{_i}}Inline form{{/i}}</h3>
       <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
     </div>
     <div class="span9">
-      <form class="well form-search">
+      <form class="well form-inline">
         <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
         <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
-        <button type="submit" class="btn">{{_i}}Go{{/i}}</button>
+        <label class="checkbox">
+          <input type="checkbox"> {{_i}}Remember?{{/i}}
+        </label>
+        <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+  &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
+  &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div><!-- /row -->
 
@@ -838,7 +866,7 @@
             <div class="controls">
               <label class="checkbox">
                 <input type="checkbox" id="optionsCheckbox" value="option1">
-                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+                {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
               </label>
             </div>
           </div>
@@ -880,10 +908,26 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
       </form>
+      <h3>{{_i}}Example markup{{/i}}</h3>
+      <p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;form class="form-horizontal"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;{{_i}}Legend text{{/i}}&lt;/legend&gt;
+    &lt;div class="control-group"&gt;
+      &lt;label class="control-label" for="input01"&gt;{{_i}}Text input{{/i}}&lt;/label&gt;
+      &lt;div class="controls"&gt;
+        &lt;input type="text" class="input-xlarge" id="input01"&gt;
+        &lt;p class="help-block"&gt;{{_i}}Supporting help text{{/i}}&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>{{_i}}What's included{{/i}}</h3>
@@ -938,9 +982,9 @@
             </div>
           </div>
           <div class="control-group warning">
-            <label class="control-label" for="inputError">{{_i}}Input with warning{{/i}}</label>
+            <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
             <div class="controls">
-              <input type="text" id="inputError">
+              <input type="text" id="inputWarning">
               <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
             </div>
           </div>
@@ -952,9 +996,9 @@
             </div>
           </div>
           <div class="control-group success">
-            <label class="control-label" for="inputError">{{_i}}Input with success{{/i}}</label>
+            <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
             <div class="controls">
-              <input type="text" id="inputError">
+              <input type="text" id="inputSuccess">
               <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
             </div>
           </div>
@@ -973,14 +1017,14 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
       </form>
     </div>
     <div class="span4">
       <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>
+      <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 its 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 error class to the surrounding <code>.control-group</code>.{{/i}}</p>
@@ -1001,7 +1045,7 @@
         <fieldset>
           <legend>{{_i}}Extending form controls{{/i}}</legend>
           <div class="control-group">
-            <label class="control-label">{{_i}}Form sizes{{/i}}</label>
+            <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
             <div class="controls docs-input-sizes">
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
@@ -1030,6 +1074,15 @@
               <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
             </div>
           </div>
+          <div class="control-group">
+            <label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
+            <div class="controls docs-input-sizes">
+              <input class="input-mini" type="text" placeholder=".input-mini">
+              <input class="input-small" type="text" placeholder=".input-small">
+              <input class="input-medium" type="text" placeholder=".input-medium">
+              <p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
+            </div>
+          </div>
           <div class="control-group">
             <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
             <div class="controls">
@@ -1069,7 +1122,7 @@
             <div class="controls">
               <label class="checkbox">
                 <input type="checkbox" name="optionsCheckboxList1" value="option1">
-                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+                {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
               </label>
               <label class="checkbox">
                 <input type="checkbox" name="optionsCheckboxList2" value="option2">
@@ -1087,7 +1140,7 @@
             <div class="controls">
               <label class="radio">
                 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+                {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
               </label>
               <label class="radio">
                 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
@@ -1097,7 +1150,7 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
       </form>
@@ -1137,34 +1190,39 @@
     </thead>
     <tbody>
       <tr>
-        <td><a class="btn" href="#">{{_i}}Default{{/i}}</a></td>
+        <td><button class="btn" href="#">{{_i}}Default{{/i}}</button></td>
         <td><code>.btn</code></td>
         <td>{{_i}}Standard gray button with gradient{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
+        <td><button class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</button></td>
         <td><code>.btn-primary</code></td>
         <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
+        <td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
         <td><code>.btn-info</code></td>
         <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
+        <td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
         <td><code>.btn-success</code></td>
         <td>{{_i}}Indicates a successful or positive action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
+        <td><button class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</button></td>
         <td><code>.btn-warning</code></td>
         <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
+        <td><button class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</button></td>
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
+      </tr>
+  	  <tr>
+        <td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
+        <td><code>.btn-inverse</code></td>
+        <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
       </tr>
     </tbody>
   </table>
@@ -1173,50 +1231,63 @@
     <div class="span4">
       <h3>{{_i}}Buttons for actions{{/i}}</h3>
       <p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
+      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <h3>{{_i}}Cross browser compatibility{{/i}}</h3>
+      <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
     </div>
-    <div class="span4">
-      <h3>{{_i}}For anchors and forms{{/i}}</h3>
-      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.{{/i}}</p>
-    </div>
-  </div>
-
-  <div class="row">
     <div class="span4">
       <h3>{{_i}}Multiple sizes{{/i}}</h3>
-      <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
+      <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
+        <button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-large">{{_i}}Action{{/i}}</button>
       </p>
       <p>
-        <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
+        <button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-small">{{_i}}Action{{/i}}</button>
       </p>
-    </div>
-    <div class="span4">
+      <p>
+        <button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+      </p>
+      <br>
       <h3>{{_i}}Disabled state{{/i}}</h3>
-      <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-large disabled">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+        <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+      </p>
+      <p style="margin-bottom: 18px;">
+        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+        <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
       </p>
       <p>
-        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
-        <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
       </p>
     </div>
     <div class="span4">
-      <h3>Cross browser compatibility</h3>
-      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
-      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+      <h3>{{_i}}One class, multiple tags{{/i}}</h3>
+      <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
+<form>
+<a class="btn" href="">{{_i}}Link{{/i}}</a>
+<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
+<input class="btn" type="button" value="{{_i}}Input{{/i}}">
+<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+  {{_i}}Button{{/i}}
+&lt;/button&gt;
+&lt;input class="btn" type="button"
+         value="{{_i}}Input{{/i}}"&gt;
+&lt;input class="btn" type="submit"
+         value="{{_i}}Submit{{/i}}"&gt;
+</pre>
+      <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
     </div>
   </div>
-
-  <br>
-
 </section>
 
 
@@ -1229,148 +1300,144 @@
   </div>
   <div class="row">
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-glass"></i>
-        <i class="icon-music"></i>
-        <i class="icon-search"></i>
-        <i class="icon-envelope"></i>
-        <i class="icon-heart"></i>
-        <i class="icon-star"></i>
-        <i class="icon-star-empty"></i>
-        <i class="icon-user"></i>
-        <i class="icon-film"></i>
-        <i class="icon-th-large"></i>
-        <i class="icon-th"></i>
-        <i class="icon-th-list"></i>
-        <i class="icon-ok"></i>
-        <i class="icon-remove"></i>
-        <i class="icon-zoom-in"></i>
-        <i class="icon-zoom-out"></i>
-        <i class="icon-off"></i>
-        <i class="icon-signal"></i>
-        <i class="icon-cog"></i>
-        <i class="icon-trash"></i>
-
-        <i class="icon-home"></i>
-        <i class="icon-file"></i>
-        <i class="icon-time"></i>
-        <i class="icon-road"></i>
-        <i class="icon-download-alt"></i>
-        <i class="icon-download"></i>
-        <i class="icon-upload"></i>
-        <i class="icon-inbox"></i>
-        <i class="icon-play-circle"></i>
-        <i class="icon-repeat"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-glass"></i> icon-glass</li>
+        <li><i class="icon-music"></i> icon-music</li>
+        <li><i class="icon-search"></i> icon-search</li>
+        <li><i class="icon-envelope"></i> icon-envelope</li>
+        <li><i class="icon-heart"></i> icon-heart</li>
+        <li><i class="icon-star"></i> icon-star</li>
+        <li><i class="icon-star-empty"></i> icon-star-empty</li>
+        <li><i class="icon-user"></i> icon-user</li>
+        <li><i class="icon-film"></i> icon-film</li>
+        <li><i class="icon-th-large"></i> icon-th-large</li>
+        <li><i class="icon-th"></i> icon-th</li>
+        <li><i class="icon-th-list"></i> icon-th-list</li>
+        <li><i class="icon-ok"></i> icon-ok</li>
+        <li><i class="icon-remove"></i> icon-remove</li>
+        <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
+        <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
+        <li><i class="icon-off"></i> icon-off</li>
+        <li><i class="icon-signal"></i> icon-signal</li>
+        <li><i class="icon-cog"></i> icon-cog</li>
+        <li><i class="icon-trash"></i> icon-trash</li>
+        <li><i class="icon-home"></i> icon-home</li>
+        <li><i class="icon-file"></i> icon-file</li>
+        <li><i class="icon-time"></i> icon-time</li>
+        <li><i class="icon-road"></i> icon-road</li>
+        <li><i class="icon-download-alt"></i> icon-download-alt</li>
+        <li><i class="icon-download"></i> icon-download</li>
+        <li><i class="icon-upload"></i> icon-upload</li>
+        <li><i class="icon-inbox"></i> icon-inbox</li>
+        <li><i class="icon-play-circle"></i> icon-play-circle</li>
+        <li><i class="icon-repeat"></i> icon-repeat</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-refresh"></i>
-        <i class="icon-list-alt"></i>
-        <i class="icon-lock"></i>
-        <i class="icon-flag"></i>
-        <i class="icon-headphones"></i>
-        <i class="icon-volume-off"></i>
-        <i class="icon-volume-down"></i>
-        <i class="icon-volume-up"></i>
-        <i class="icon-qrcode"></i>
-        <i class="icon-barcode"></i>
-
-        <i class="icon-tag"></i>
-        <i class="icon-tags"></i>
-        <i class="icon-book"></i>
-        <i class="icon-bookmark"></i>
-        <i class="icon-print"></i>
-        <i class="icon-camera"></i>
-        <i class="icon-font"></i>
-        <i class="icon-bold"></i>
-        <i class="icon-italic"></i>
-        <i class="icon-text-height"></i>
-        <i class="icon-text-width"></i>
-        <i class="icon-align-left"></i>
-        <i class="icon-align-center"></i>
-        <i class="icon-align-right"></i>
-        <i class="icon-align-justify"></i>
-        <i class="icon-list"></i>
-        <i class="icon-indent-left"></i>
-        <i class="icon-indent-right"></i>
-        <i class="icon-facetime-video"></i>
-        <i class="icon-picture"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-refresh"></i> icon-refresh</li>
+        <li><i class="icon-list-alt"></i> icon-list-alt</li>
+        <li><i class="icon-lock"></i> icon-lock</li>
+        <li><i class="icon-flag"></i> icon-flag</li>
+        <li><i class="icon-headphones"></i> icon-headphones</li>
+        <li><i class="icon-volume-off"></i> icon-volume-off</li>
+        <li><i class="icon-volume-down"></i> icon-volume-down</li>
+        <li><i class="icon-volume-up"></i> icon-volume-up</li>
+        <li><i class="icon-qrcode"></i> icon-qrcode</li>
+        <li><i class="icon-barcode"></i> icon-barcode</li>
+        <li><i class="icon-tag"></i> icon-tag</li>
+        <li><i class="icon-tags"></i> icon-tags</li>
+        <li><i class="icon-book"></i> icon-book</li>
+        <li><i class="icon-bookmark"></i> icon-bookmark</li>
+        <li><i class="icon-print"></i> icon-print</li>
+        <li><i class="icon-camera"></i> icon-camera</li>
+        <li><i class="icon-font"></i> icon-font</li>
+        <li><i class="icon-bold"></i> icon-bold</li>
+        <li><i class="icon-italic"></i> icon-italic</li>
+        <li><i class="icon-text-height"></i> icon-text-height</li>
+        <li><i class="icon-text-width"></i> icon-text-width</li>
+        <li><i class="icon-align-left"></i> icon-align-left</li>
+        <li><i class="icon-align-center"></i> icon-align-center</li>
+        <li><i class="icon-align-right"></i> icon-align-right</li>
+        <li><i class="icon-align-justify"></i> icon-align-justify</li>
+        <li><i class="icon-list"></i> icon-list</li>
+        <li><i class="icon-indent-left"></i> icon-indent-left</li>
+        <li><i class="icon-indent-right"></i> icon-indent-right</li>
+        <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
+        <li><i class="icon-picture"></i> icon-picture</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-pencil"></i>
-        <i class="icon-map-marker"></i>
-        <i class="icon-adjust"></i>
-        <i class="icon-tint"></i>
-        <i class="icon-edit"></i>
-        <i class="icon-share"></i>
-        <i class="icon-check"></i>
-        <i class="icon-move"></i>
-        <i class="icon-step-backward"></i>
-        <i class="icon-fast-backward"></i>
-        <i class="icon-backward"></i>
-        <i class="icon-play"></i>
-        <i class="icon-pause"></i>
-        <i class="icon-stop"></i>
-        <i class="icon-forward"></i>
-        <i class="icon-fast-forward"></i>
-        <i class="icon-step-forward"></i>
-        <i class="icon-eject"></i>
-        <i class="icon-chevron-left"></i>
-        <i class="icon-chevron-right"></i>
-
-        <i class="icon-plus-sign"></i>
-        <i class="icon-minus-sign"></i>
-        <i class="icon-remove-sign"></i>
-        <i class="icon-ok-sign"></i>
-        <i class="icon-question-sign"></i>
-        <i class="icon-info-sign"></i>
-        <i class="icon-screenshot"></i>
-        <i class="icon-remove-circle"></i>
-        <i class="icon-ok-circle"></i>
-        <i class="icon-ban-circle"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-pencil"></i> icon-pencil</li>
+        <li><i class="icon-map-marker"></i> icon-map-marker</li>
+        <li><i class="icon-adjust"></i> icon-adjust</li>
+        <li><i class="icon-tint"></i> icon-tint</li>
+        <li><i class="icon-edit"></i> icon-edit</li>
+        <li><i class="icon-share"></i> icon-share</li>
+        <li><i class="icon-check"></i> icon-check</li>
+        <li><i class="icon-move"></i> icon-move</li>
+        <li><i class="icon-step-backward"></i> icon-step-backward</li>
+        <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+        <li><i class="icon-backward"></i> icon-backward</li>
+        <li><i class="icon-play"></i> icon-play</li>
+        <li><i class="icon-pause"></i> icon-pause</li>
+        <li><i class="icon-stop"></i> icon-stop</li>
+        <li><i class="icon-forward"></i> icon-forward</li>
+        <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
+        <li><i class="icon-step-forward"></i> icon-step-forward</li>
+        <li><i class="icon-eject"></i> icon-eject</li>
+        <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
+        <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
+        <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
+        <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
+        <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
+        <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+        <li><i class="icon-question-sign"></i> icon-question-sign</li>
+        <li><i class="icon-info-sign"></i> icon-info-sign</li>
+        <li><i class="icon-screenshot"></i> icon-screenshot</li>
+        <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
+        <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
+        <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
+      </ul>
     </div>
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-arrow-left"></i>
-        <i class="icon-arrow-right"></i>
-        <i class="icon-arrow-up"></i>
-        <i class="icon-arrow-down"></i>
-        <i class="icon-share-alt"></i>
-        <i class="icon-resize-full"></i>
-        <i class="icon-resize-small"></i>
-        <i class="icon-plus"></i>
-        <i class="icon-minus"></i>
-        <i class="icon-asterisk"></i>
-
-        <i class="icon-exclamation-sign"></i>
-        <i class="icon-gift"></i>
-        <i class="icon-leaf"></i>
-        <i class="icon-fire"></i>
-        <i class="icon-eye-open"></i>
-        <i class="icon-eye-close"></i>
-        <i class="icon-warning-sign"></i>
-        <i class="icon-plane"></i>
-        <i class="icon-calendar"></i>
-        <i class="icon-random"></i>
-        <i class="icon-comment"></i>
-        <i class="icon-magnet"></i>
-        <i class="icon-chevron-up"></i>
-        <i class="icon-chevron-down"></i>
-        <i class="icon-retweet"></i>
-        <i class="icon-shopping-cart"></i>
-        <i class="icon-folder-close"></i>
-        <i class="icon-folder-open"></i>
-        <i class="icon-resize-vertical"></i>
-        <i class="icon-resize-horizontal"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
+        <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
+        <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
+        <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
+        <li><i class="icon-share-alt"></i> icon-share-alt</li>
+        <li><i class="icon-resize-full"></i> icon-resize-full</li>
+        <li><i class="icon-resize-small"></i> icon-resize-small</li>
+        <li><i class="icon-plus"></i> icon-plus</li>
+        <li><i class="icon-minus"></i> icon-minus</li>
+        <li><i class="icon-asterisk"></i> icon-asterisk</li>
+        <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
+        <li><i class="icon-gift"></i> icon-gift</li>
+        <li><i class="icon-leaf"></i> icon-leaf</li>
+        <li><i class="icon-fire"></i> icon-fire</li>
+        <li><i class="icon-eye-open"></i> icon-eye-open</li>
+        <li><i class="icon-eye-close"></i> icon-eye-close</li>
+        <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
+        <li><i class="icon-plane"></i> icon-plane</li>
+        <li><i class="icon-calendar"></i> icon-calendar</li>
+        <li><i class="icon-random"></i> icon-random</li>
+        <li><i class="icon-comment"></i> icon-comment</li>
+        <li><i class="icon-magnet"></i> icon-magnet</li>
+        <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
+        <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
+        <li><i class="icon-retweet"></i> icon-retweet</li>
+        <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
+        <li><i class="icon-folder-close"></i> icon-folder-close</li>
+        <li><i class="icon-folder-open"></i> icon-folder-open</li>
+        <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
+        <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+      </ul>
     </div>
   </div>
   <div class="alert alert-info">
-    {{_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}}
+    {{_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 highlight the icon's size.{{/i}}
   </div>
 
   <br>
@@ -1384,7 +1451,7 @@
     </div>
     <div class="span4">
       <h3>{{_i}}How to use{{/i}}</h3>
-      <p>{{_i}}With v2.0.0, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
+      <p>{{_i}}With v2.0.1, we have opted to use an <code>&lt;i&gt;</code> tag for all our icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;i class="icon-search"&gt;&lt;/i&gt;
 </pre>
@@ -1419,7 +1486,7 @@
           <a class="btn" href="#"><i class="icon-align-justify"></i></a>
         </div>
         <div class="btn-group">
-          <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+          <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
@@ -1454,11 +1521,11 @@
     <div class="span4">
       <form>
         <div class="control-group">
-          <label class="control-label" for="prependedInput">{{_i}}Email address{{/i}}</label>
+          <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon-envelope"></i></span>
-              <input class="span2" id="iconInput" type="text">
+              <input class="span2" id="inputIcon" type="text">
             </div>
           </div>
         </div>

docs/templates/pages/components.mustache

@@ -8,8 +8,8 @@
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
         <ul class="dropdown-menu">
-          <li><a href="#buttonGroups">Button groups</a></li>
-          <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+          <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
+          <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
         </ul>
       </li>
       <li class="dropdown">
@@ -22,6 +22,7 @@
         </ul>
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
+      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@@ -42,14 +43,34 @@
     <div class="span4">
       <h3>{{_i}}Button groups{{/i}}</h3>
       <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
-      <p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.{{/i}}</p>
-      <div class="btn-toolbar" style="margin-top: 18px;">
-        <div class="btn-group">
+      <h3>{{_i}}Best practices{{/i}}</h3>
+      <p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
+      <ul>
+        <li>{{_i}}Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.{{/i}}</li>
+        <li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
+        <li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
+      </ul>
+      <p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Default example{{/i}}</h3>
+      <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
+      <div class="">
+        <div class="btn-group" style="margin: 9px 0;">
           <a class="btn" href="#">{{_i}}Left{{/i}}</a>
           <a class="btn" href="#">{{_i}}Middle{{/i}}</a>
           <a class="btn" href="#">{{_i}}Right{{/i}}</a>
         </div>
       </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+      <h3>{{_i}}Toolbar example{{/i}}</h3>
+      <p>{{_i}}Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.{{/i}}</p>
       <div class="btn-toolbar">
         <div class="btn-group">
           <a class="btn" href="#">1</a>
@@ -66,18 +87,6 @@
           <a class="btn" href="#">8</a>
         </div>
       </div>
-    </div>
-    <div class="span4">
-      <h3>{{_i}}Example markup{{/i}}</h3>
-      <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
-  &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
-  &lt;a class="btn" href="#"&gt;2&lt;/a&gt;
-  &lt;a class="btn" href="#"&gt;3&lt;/a&gt;
-&lt;/div&gt;
-</pre>
-      <p>{{_i}}And with a toolbar for multiple groups:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-toolbar"&gt;
   &lt;div class="btn-group"&gt;
@@ -163,7 +172,9 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </div><!-- /btn-group -->
-      </div>
+      </div><!-- /btn-toolbar -->
+      <hr>
+      <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
     </div>
     <div class="span8">
       <h3>{{_i}}Example markup{{/i}}</h3>
@@ -278,9 +289,10 @@
     <div class="span4">
       <h3>{{_i}}Powerful base class{{/i}}</h3>
       <p>{{_i}}All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
-      <h3>{{_i}}Why tabs and pills{{/i}}</h3>
-      <p>{{_i}}Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.{{/i}}</p>
-      <p>{{_i}}Both options are great for sub-sections of content or navigating between pages of related content.{{/i}}</p>
+      <h3>{{_i}}When to use{{/i}}</h3>
+      <p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
+      <h3>{{_i}}Component alignment{{/i}}</h3>
+      <p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Basic tabs{{/i}}</h3>
@@ -529,7 +541,7 @@
     <div class="span4">
       <h3>{{_i}}Custom jQuery plugin{{/i}}</h3>
       <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p>
-      <p><a class="btn" href="./javascript.html/#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
+      <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
     </div>
   </div>
 
@@ -686,7 +698,9 @@
                 <li><a href="#">{{_i}}Another action{{/i}}</a></li>
                 <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
               </ul>
             </li>
           </ul>
@@ -725,12 +739,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <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>
+      <h3>{{_i}}Fixed navbar{{/i}}</h3>
+      <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>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
 &lt;/div&gt;
 </pre>
+      <p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
       <h3>{{_i}}Brand name{{/i}}</h3>
       <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -751,18 +767,18 @@
 &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;!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} --&gt;
       &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
       &lt;/a&gt;
-      
-      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+
+      &lt;!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} --&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;!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --&gt;
       &lt;div class="nav-collapse"&gt;
         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
       &lt;/div&gt;
@@ -788,8 +804,18 @@
   &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
+      <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  ...
+  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+      <h3>{{_i}}Component alignment{{/i}}</h3>
+      <p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
       <h3>{{_i}}Adding dropdowns{{/i}}</h3>
-      <p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
+      <p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;
@@ -805,7 +831,7 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-      <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
+      <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
@@ -945,7 +971,7 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}About pager{{/i}}</h3>
-      <p>{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
+      <p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Default example{{/i}}</h3>
@@ -1012,10 +1038,10 @@
       </tr>
       <tr>
         <td>
-          <span class="label label-success">{{_i}}New{{/i}}</span>
+          <span class="label label-success">{{_i}}Success{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;{{/_i}}Success{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
@@ -1048,6 +1074,55 @@
 
 
 
+<!-- Typographic components
+================================================== -->
+<section id="typography">
+  <div class="page-header">
+    <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
+  </div>
+  <h2>{{_i}}Hero unit{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
+      <h3>{{_i}}Markup{{/i}}</h3>
+      <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="hero-unit"&gt;
+  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
+  &lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
+  &lt;p&gt;
+    &lt;a class="btn btn-primary btn-large"&gt;
+      {{_i}}Learn more{{/i}}
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span8">
+      <div class="hero-unit">
+        <h1>{{_i}}Hello, world!{{/i}}</h1>
+        <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
+        <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
+      </div>
+    </div>
+  </div><!-- /row -->
+  <h2>{{_i}}Page header{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
+    </div>
+    <div class="span8">
+<pre class="prettyprint linenums">
+&lt;div class="page-haeder"&gt;
+  &lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
@@ -1092,7 +1167,7 @@
             <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>
-              <p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+              <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
             </div>
           </div>
         </li>
@@ -1102,7 +1177,7 @@
             <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>
-              <p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+              <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
             </div>
           </div>
         </li>
@@ -1206,7 +1281,7 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Rewritten base class{{/i}}</h3>
-      <p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.{{/i}}</p>
+      <p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.{{/i}}</p>
       <h3>{{_i}}Single alert message{{/i}}</h3>
       <p>{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.{{/i}}</p>
       <hr>
@@ -1218,26 +1293,26 @@
       <h3>{{_i}}Example alerts{{/i}}</h3>
       <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
       <div class="alert">
-        <a class="close">&times;</a>
-        <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you’re not looking too good.{{/i}}
+        <a class="close" data-dismiss="alert">&times;</a>
+        <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close"&gt;&times;&lt;/a&gt;
-  &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you’re not looking too good.{{/i}}
+  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
 &lt;/div&gt;
 </pre>
       <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
       <div class="alert alert-block">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
-        <p>{{_i}}Best check yo self, you’re not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+        <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;a class="close"&gt;&times;&lt;/a&gt;
+  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
   &lt;h4 class="alert-heading"&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
-  {{_i}}Best check yo self, you’re not...{{/i}}
+  {{_i}}Best check yo self, you're not...{{/i}}
 &lt;/div&gt;
 </pre>
     </div>
@@ -1248,7 +1323,7 @@
     <div class="span4">
       <h3>{{_i}}Error or danger{{/i}}</h3>
       <div class="alert alert-error">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1260,7 +1335,7 @@
     <div class="span4">
       <h3>{{_i}}Success{{/i}}</h3>
       <div class="alert alert-success">
-        <a class="close">&times;</a>
+        <a class="close" data-dismiss="alert">&times;</a>
         <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1272,8 +1347,8 @@
     <div class="span4">
       <h3>{{_i}}Information{{/i}}</h3>
       <div class="alert alert-info">
-        <a class="close">&times;</a>
-        <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it’s not super important.{{/i}}
+        <a class="close" data-dismiss="alert">&times;</a>
+        <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-info"&gt;

docs/templates/pages/download.mustache

@@ -17,14 +17,15 @@
   <div class="page-header">
     <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
     <h1>
-      {{_i}}1. Chose components{{/i}}
+      {{_i}}1. Choose components{{/i}}
       <small>{{_i}}Get just the CSS you need{{/i}}</small>
     </h1>
   </div>
   <div class="row download-builder">
     <div class="span3">
       <h3>{{_i}}Scaffolding{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> {{_i}}CSS reset{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> {{_i}}Normalize and reset{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> {{_i}}Body type and links{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> {{_i}}Grid system{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> {{_i}}Layouts{{/i}}</label>
       <h3>{{_i}}Base CSS{{/i}}</h3>
@@ -47,6 +48,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> {{_i}}Thumbnails{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> {{_i}}Alerts{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> {{_i}}Progress bars{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> {{_i}}Hero unit{{/i}}</label>
     </div><!-- /span -->
     <div class="span3">
       <h3>{{_i}}JS Components{{/i}}</h3>

docs/templates/pages/examples.mustache

@@ -19,7 +19,7 @@
       <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
     <h3>{{_i}}Fluid layout{{/i}}</h3>
-    <p>{{_i}}Uses are new responsive, fluid grid system to create seamless liquid layout.{{/i}}</p>
+    <p>{{_i}}Uses our new responsive, fluid grid system to create seamless liquid layout.{{/i}}</p>
   </li>
   <li class="span4">
     <a class="thumbnail" href="examples/starter-template.html">

docs/templates/pages/index.mustache

@@ -3,7 +3,7 @@
 <header class="jumbotron masthead">
   <div class="inner">
     <h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
-    <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
+    <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
     <p class="download-info">
       <a href="https://github.com/twitter/bootstrap/" class="btn 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>
@@ -11,20 +11,19 @@
   </div>
 
   <ul class="quick-links">
-    <li><a href="./upgrading.html">Upgrading from 1.4</a></li>
+    <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
     <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li>
-    <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">{{_i}}Roadmap{{/i}}</a></li>
-    <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">{{_i}}Changelog{{/i}}</a></li>
+    <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap &amp; changelog{{/i}}</a></li>
     <li class="divider">&middot;</li>
     <li>
-      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
     </li>
     <li>
-      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
     </li>
     <li class="divider">&middot;</li>
     <li class="follow-btn">
-      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">{{_i}}Follow @twbootstrap{{/i}}</a>
+      <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
     </li>
     <li class="tweet-btn">
       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
@@ -46,7 +45,7 @@
     <div class="span4">
       <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
       <h2>{{_i}}For all skill levels{{/i}}</h2>
-      <p>{{_i}}Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
+      <p>{{_i}}Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
     </div>
     <div class="span4">
       <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">

docs/templates/pages/javascript.mustache

@@ -58,7 +58,7 @@
         <div class="span3">
           <label>
             <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
-            <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
+            <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
           </label>
         </div>
         <div class="span3">
@@ -123,7 +123,7 @@
         <div class="span3 columns">
           <h3>{{_i}}About modals{{/i}}</h3>
           <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
-          <a href="../js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-modal.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Static example{{/i}}</h2>
@@ -197,6 +197,12 @@
                <td>{{_i}}true{{/i}}</td>
                <td>{{_i}}Closes the modal when escape key is pressed{{/i}}</td>
              </tr>
+             <tr>
+               <td>{{_i}}show{{/i}}</td>
+               <td>{{_i}}boolean{{/i}}</td>
+               <td>{{_i}}true{{/i}}</td>
+               <td>{{_i}}Shows the modal when initialized.{{/i}}</td>
+             </tr>
             </tbody>
           </table>
           <h3>{{_i}}Markup{{/i}}</h3>
@@ -207,7 +213,7 @@
 </pre>
 
 <pre class="prettyprint linenums">
-&lt;div class="modal"&gt;
+&lt;div class="modal" id="myModal"&gt;
   &lt;div class="modal-header"&gt;
     &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
     &lt;h3&gt;Modal header&lt;/h3&gt;
@@ -289,7 +295,7 @@ $('#myModal').on('hidden', function () {
         <div class="span3 columns">
           <h3>{{_i}}About dropdowns{{/i}}</h3>
           <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
-          <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Examples{{/i}}</h2>
@@ -417,7 +423,7 @@ $('#myModal').on('hidden', function () {
       <div class="row">
         <div class="span3 columns">
           <p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
-          <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-scrollspy.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
@@ -511,7 +517,7 @@ $('#myModal').on('hidden', function () {
       <div class="row">
         <div class="span3 columns">
           <p>{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}</p>
-          <a href="../js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-tab.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example tabs{{/i}}</h2>
@@ -548,11 +554,11 @@ $('#myModal').on('hidden', function () {
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;ul class="tabs"&gt;
+&lt;ul class="nav nav-tabs"&gt;
   &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;</pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tab</h4>
@@ -560,7 +566,7 @@ $('#myModal').on('hidden', function () {
             {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
           </p>
 <pre class="prettyprint linenums">
-&lt;ul class="tabs"&gt;
+&lt;ul class="nav nav-tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#home"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -618,14 +624,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
       <div class="row">
         <div class="span3 columns">
           <h3>{{_i}}About Tooltips{{/i}}</h3>
-          <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}</p>
-          <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}</p>
+          <a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example use of Tooltips{{/i}}</h2>
           <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
           <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
+            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
             </p>
           </div>
           <hr>
@@ -651,7 +657,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              </tr>
              <tr>
                <td>{{_i}}placement{{/i}}</td>
-               <td>{{_i}}string{{/i}}</td>
+               <td>{{_i}}string|function{{/i}}</td>
                <td>'top'</td>
                <td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
              </tr>
@@ -691,6 +697,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           </div>
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
+</pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tooltip({{_i}}options{{/i}})</h4>
           <p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
@@ -719,8 +728,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <div class="span3 columns">
           <h3>{{_i}}About popovers{{/i}}</h3>
           <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
-          <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltip">Tooltip</a> to be included{{/i}}</p>
-          <a href="../js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
+          <a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example hover popover{{/i}}</h2>
@@ -751,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              </tr>
              <tr>
                <td>{{_i}}placement{{/i}}</td>
-               <td>{{_i}}string{{/i}}</td>
+               <td>{{_i}}string|function{{/i}}</td>
                <td>'right'</td>
                <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
              </tr>
@@ -827,27 +836,27 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <div class="span3 columns">
           <h3>{{_i}}About alerts{{/i}}</h3>
           <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
-          <a href="../js/bootstrap-alert.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
+          <a href="assets/js/bootstrap-alert.js" target="_blank" class="btn">{{_i}}Download{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example alerts{{/i}}</h2>
           <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
           <div class="alert fade in">
             <a class="close" data-dismiss="alert" href="#">&times;</a>
-            <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you’re not looking too good.{{/i}}
+            <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
           </div>
           <div class="alert alert-block alert-error fade in">
             <a class="close" data-dismiss="alert" href="#">&times;</a>
             <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
             <p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
             <p>
-              <a class="btn btn-danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
+              <a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
             </p>
           </div>
           <hr>
-          <h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
+          <h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
           <p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
+          <pre class="prettyprint linenums">$(".alert").alert()</pre>
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
           <pre class="prettyprint linenums">&lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
@@ -856,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
           <h4>.alert('close')</h4>
           <p>{{_i}}Closes an alert.{{/i}}</p>
-          <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
+          <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
           <h3>{{_i}}Events{{/i}}</h3>
           <p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
           <table class="table table-bordered table-striped">
@@ -897,7 +906,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span3 columns">
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
-          <a href="../js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-button.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example uses{{/i}}</h2>
@@ -947,17 +956,17 @@ $('#my-alert').bind('closed', function () {
             <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;!-- Add data-toggle="button" to activate toggling on a single button --&gt;
+&lt;!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} --&gt;
 &lt;button class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
 
-&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
+&lt;!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} --&gt;
 &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
   &lt;button class="btn"&gt;Left&lt;/button&gt;
   &lt;button class="btn"&gt;Middle&lt;/button&gt;
   &lt;button class="btn"&gt;Right&lt;/button&gt;
 &lt;/div&gt;
 
-&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
+&lt;!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} --&gt;
 &lt;div class="btn-group" data-toggle="buttons-radio"&gt;
   &lt;button class="btn"&gt;Left&lt;/button&gt;
   &lt;button class="btn"&gt;Middle&lt;/button&gt;
@@ -966,7 +975,7 @@ $('#my-alert').bind('closed', function () {
 </pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().button('toggle')</h4>
-          <p>{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}</p>
+          <p>{{_i}}Toggles push state. Gives btn the look that it hass been activated.{{/i}}</p>
           <div class="alert alert-info">
             <strong>{{_i}}Heads up!{{/i}}</strong>
             {{_i}}You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.{{/i}}
@@ -1004,7 +1013,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span3 columns">
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
-          <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example accordion{{/i}}</h2>
@@ -1052,7 +1061,7 @@ $('#my-alert').bind('closed', function () {
 
           <hr>
           <h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
-          <p>Enable via javascript:</p>
+          <p>{{_i}}Enable via javascript:{{/i}}</p>
           <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
           <h3>{{_i}}Options{{/i}}</h3>
           <table class="table table-bordered table-striped">
@@ -1069,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
                <td>{{_i}}parent{{/i}}</td>
                <td>{{_i}}selector{{/i}}</td>
                <td>false</td>
-               <td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}</td>
+               <td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}</td>
              </tr>
              <tr>
                <td>{{_i}}toggle{{/i}}</td>
@@ -1157,7 +1166,7 @@ $('#myCollapsible').on('hidden', function () {
         <div class="span3 columns">
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}</p>
-          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-carousel.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example carousel{{/i}}</h2>
@@ -1219,12 +1228,14 @@ $('#myCollapsible').on('hidden', function () {
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="carousel"&gt;
-  &lt;!-- Carousel items --&gt;
+&lt;div id="myCarousel" class="carousel"&gt;
+  &lt;!-- {{_i}}Carousel items{{/i}} --&gt;
   &lt;div class="carousel-inner"&gt;
-    ...
+    &lt;div class="active item"&gt;…&lt;/div&gt;
+    &lt;div class="item"&gt;…&lt;/div&gt;
+    &lt;div class="item"&gt;…&lt;/div&gt;
   &lt;/div&gt;
-  &lt;!-- Carousel nav --&gt;
+  &lt;!-- {{_i}}Carousel nav{{/i}} --&gt;
   &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
   &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
 &lt;/div&gt;
@@ -1263,7 +1274,7 @@ $('.myCarousel').carousel({
              </tr>
              <tr>
                <td>{{_i}}slid{{/i}}</td>
-               <td>{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}</td>
+               <td>{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}</td>
              </tr>
             </tbody>
           </table>
@@ -1283,7 +1294,7 @@ $('.myCarousel').carousel({
         <div class="span3 columns">
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
-          <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+          <a href="assets/js/bootstrap-typeahead.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
         </div>
         <div class="span9 columns">
           <h2>{{_i}}Example{{/i}}</h2>
@@ -1346,7 +1357,7 @@ $('.myCarousel').carousel({
 </pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>.typeahead({{_i}}options{{/i}})</h4>
-          <p>{{_i}}Initializes an input with a typahead.{{/i}}</p>
+          <p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
         </div>
       </div>
     </section>

docs/templates/pages/less.mustache

@@ -24,7 +24,7 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Why LESS?{{/i}}</h3>
-      <p>{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
+      <p>{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}What's included?{{/i}}</h3>
@@ -47,7 +47,7 @@
     </div>
     <div class="span4">
       <h3>{{_i}}Operations{{/i}}</h3>
-      <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
+      <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
     </div>
   </div>
 </section>
@@ -115,7 +115,6 @@
           <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>
@@ -211,7 +210,7 @@
   <h3>{{_i}}Components{{/i}}</h3>
   <div class="row">
     <div class="span6">
-      <h4>Buttons</h4>
+      <h4>{{_i}}Buttons{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
@@ -221,7 +220,7 @@
           </tr>
         </tbody>
       </table>
-      <h4>Forms</h4>
+      <h4>{{_i}}Forms{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
@@ -231,7 +230,7 @@
           </tr>
         </tbody>
       </table>
-      <h4>Navbar</h4>
+      <h4>{{_i}}Navbar{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
@@ -273,13 +272,13 @@
         <tbody>
           <tr>
             <td class="span3"><code>@warningText</code></td>
-            <td>#f3edd2</td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+            <td>#c09853</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
-            <td>#c09853</td>
-            <td><span class="swatch" style="background-color: #c09853;"></span></td>
+            <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@errorText</code></td>
@@ -496,7 +495,7 @@
       </tr>
     </tbody>
   </table>
-  <h3>CSS3 properties</h3>
+  <h3>{{_i}}CSS3 properties{{/i}}</h3>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -529,7 +528,7 @@
       <tr>
         <td><code>.scale()</code></td>
         <td><code>@ratio</code></td>
-        <td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td>
+        <td>{{_i}}Scale an element to <em>n</em> times its original size{{/i}}</td>
       </tr>
       <tr>
         <td><code>.translate()</code></td>
@@ -539,7 +538,7 @@
       <tr>
         <td><code>.background-clip()</code></td>
         <td><code>@clip</code></td>
-        <td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td>
+        <td>{{_i}}Crop the background of an element (useful for <code>border-radius</code>){{/i}}</td>
       </tr>
       <tr>
         <td><code>.background-size()</code></td>
@@ -568,7 +567,7 @@
       </tr>
     </tbody>
   </table>
-  <h3>Backgrounds and gradients</h3>
+  <h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -642,8 +641,8 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Node with makefile{{/i}}</h3>
-      <p>{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}</p>
-      <pre>$ npm install less</pre>
+      <p>{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}</p>
+      <pre>$ npm install -g less</pre>
       <p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
       <p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
     </div><!-- /span4 -->

docs/templates/pages/scaffolding.mustache

@@ -5,7 +5,9 @@
         <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
+            <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
             <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
             <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
           </ul>
@@ -16,12 +18,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
+    <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
   </div>
 
-  <h2>Default 940px grid</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -72,7 +73,7 @@
 
   <br>
 
-  <h2>Offsetting columns</h2>
+  <h2>{{_i}}Offsetting columns{{/i}}</h2>
   <div class="row show-grid">
     <div class="span4">4</div>
     <div class="span4 offset4">4 offset 4</div>
@@ -97,7 +98,8 @@
   <div class="row">
     <div class="span6">
       <p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
-      <h4>{{_i}}Example{{/i}}</h4>
+      <h3>{{_i}}Example{{/i}}</h3>
+      <p>{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
       <div class="row show-grid">
         <div class="span6">
           {{_i}}Level 1 of column{{/i}}
@@ -111,7 +113,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div><!-- /span6 -->
     <div class="span6">
 <pre class="prettyprint linenums">
 &lt;div class="row"&gt;
@@ -126,8 +128,112 @@
 </pre>
     </div>
   </div>
+</section>
 
-  <h2>{{_i}}Grid customization{{/i}}</h2>
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
+  </div>
+
+  <h2>{{_i}}Fluid columns{{/i}}</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Percents, not pixels{{/i}}</h3>
+      <p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Fluid rows{{/i}}</h3>
+      <p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Markup{{/i}}</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>{{_i}}Fluid nesting{{/i}}</h2>
+  <div class="row">
+    <div class="span6">
+      <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
+      <div class="row-fluid show-grid">
+        <div class="span12">
+          {{_i}}Fluid 12{{/i}}
+          <div class="row-fluid show-grid">
+            <div class="span6">
+              {{_i}}Fluid 6{{/i}}
+            </div>
+            <div class="span6">
+              {{_i}}Fluid 6{{/i}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span12"&gt;
+    {{_i}}Level 1 of column{{/i}}
+    &lt;div class="row-fluid"&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>{{_i}}Grid customization{{/i}}</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -166,7 +272,7 @@
     </div>
     <div class="span4">
       <h3>{{_i}}How to customize{{/i}}</h3>
-      <p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
+      <p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Staying responsive{{/i}}</h3>
@@ -189,8 +295,8 @@
     <div class="span6">
       <h2>{{_i}}Fixed layout{{/i}}</h2>
       <p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -203,9 +309,9 @@
     <div class="span6">
       <h2>{{_i}}Fluid layout{{/i}}</h2>
       <p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;
@@ -239,7 +345,7 @@
     </div>
     <div class="span8">
       <h2>{{_i}}Supported devices{{/i}}</h2>
-      <p>{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
+      <p>{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
       <table class="table table-bordered table-striped">
         <thead>
           <tr>
@@ -262,13 +368,13 @@
           </tr>
           <tr>
             <td>{{_i}}Landscape tablets{{/i}}</td>
-            <td>768px to 940px</td>
-            <td>44px</td>
+            <td>768px to 979px</td>
+            <td>42px</td>
             <td>20px</td>
           </tr>
           <tr>
             <td>{{_i}}Default{{/i}}</td>
-            <td>940px and up</td>
+            <td>980px and up</td>
             <td>60px</td>
             <td>20px</td>
           </tr>
@@ -281,6 +387,10 @@
         </tbody>
       </table>
 
+      <h3>{{_i}}Requires meta tag{{/i}}</h3>
+      <p>{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}</p>
+      <pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
+
       <h3>{{_i}}What they do{{/i}}</h3>
       <p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
       <ul>
@@ -301,7 +411,7 @@
       <ol>
         <li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
         <li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
-        <li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li>
+        <li>{{_i}}Modify and recompile responsive.less as a separate file{{/i}}</li>
       </ol>
       <p>{{_i}}<strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}</p>
     </div>
@@ -314,7 +424,7 @@
   @media (max-width: 768px) { ... }
 
   // {{_i}}Portrait tablet to landscape and desktop{{/i}}
-  @media (min-width: 768px) and (max-width: 940px) { ... }
+  @media (min-width: 768px) and (max-width: 980px) { ... }
 
   // {{_i}}Large desktop{{/i}}
   @media (min-width: 1200px) { .. }

docs/templates/pages/upgrading.mustache

@@ -39,7 +39,7 @@
   <ul>
     <li>{{_i}}Media queries added for <strong>basic support</strong> across mobile and tablet devices{{/i}}
     <li>{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}</li>
-  </ul>  
+  </ul>
 </section>
 
 
@@ -76,12 +76,14 @@
     <li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
     <li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
     <li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
+    <li>{{_i}}The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.{{/i}}</li>
   </ul>
   <h3>{{_i}}Forms{{/i}}</h3>
   <ul>
     <li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
     <li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
     <li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
+    <li>{{_i}}For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.{{/i}}</li>
     <li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
     <li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
   </ul>
@@ -109,7 +111,7 @@
   </ul>
   <h3>{{_i}}Navigation{{/i}}</h3>
   <ul>
-    <li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code>{{/i}}</li>
+    <li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.{{/i}}</li>
     <li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
     <li>{{_i}}Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code>{{/i}}</li>
     <li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
@@ -128,6 +130,7 @@
   <ul>
     <li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
     <li>{{_i}}Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow{{/i}}</li>
+    <li>{{_i}}Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior{{/i}}</li>
     <li>{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}</li>
   </ul>
   <h3>{{_i}}Labels{{/i}}</h3>
@@ -144,7 +147,7 @@
   <ul>
     <li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
     <li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
-    <li>{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}</li>
+    <li>{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}</li>
     <li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
   </ul>
   <h3>{{_i}}Progress bars{{/i}}</h3>
@@ -167,11 +170,19 @@
     <h1>{{_i}}Javascript plugins{{/i}}</h1>
   </div>
   <div class="alert alert-info">
-    <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
+    <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
   </div>
+  <h3>{{_i}}Tooltips{{/i}}</h3>
+  <ul>
+    <li>{{_i}}The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.{{/i}}</li>
+    <li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
+    <li>{{_i}}The <code>animate</code> option was renamed to <code>animation</code>.{{/i}}</li>
+    <li>{{_i}}The <code>html</code> option was removed, as the tooltips default to allowing HTML now.{{/i}}</li>
+  </ul>
   <h3>{{_i}}Popovers{{/i}}</h3>
   <ul>
     <li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
+    <li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
   </ul>
   <h3>{{_i}}New plugins{{/i}}</h3>
   <ul>

docs/upgrading.html

@@ -7,17 +7,17 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <!-- Le styles -->
     <link href="assets/css/bootstrap.css" rel="stylesheet">
     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
     <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@@ -115,7 +115,7 @@
   <ul>
     <li>Media queries added for <strong>basic support</strong> across mobile and tablet devices
     <li>Responsive CSS is compiled separately, as bootstrap-responsive.css</li>
-  </ul>  
+  </ul>
 </section>
 
 
@@ -152,12 +152,14 @@
     <li>IE9: removed gradients and added rounded corners</li>
     <li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li>
     <li>New mixin, <code>.buttonBackground</code>, to set button gradients</li>
+    <li>The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.</li>
   </ul>
   <h3>Forms</h3>
   <ul>
     <li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li>
     <li>Form classes standardized with <code>.form-</code> required as a prefix</li>
     <li>New built-in form defaults for search, inline, and horizontal forms</li>
+    <li>For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.</li>
     <li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li>
     <li>Form states: colors updated and customizable via new LESS variables</li>
   </ul>
@@ -185,7 +187,7 @@
   </ul>
   <h3>Navigation</h3>
   <ul>
-    <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
+    <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.</li>
     <li>New nav list variation added that uses the same base class, <code>.nav</code></li>
     <li>Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code></li>
     <li>Pills were restyled to be less rounded by default</li>
@@ -204,6 +206,7 @@
   <ul>
     <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
     <li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
+    <li>Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior</li>
     <li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li>
   </ul>
   <h3>Labels</h3>
@@ -220,7 +223,7 @@
   <ul>
     <li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li>
     <li>Class names standardized for other options, now all starting with <code>.alert-</code></li>
-    <li>Redesigned base alert styles to combine the deafult alerts and block-level alerts into one</li>
+    <li>Redesigned base alert styles to combine the default alerts and block-level alerts into one</li>
     <li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li>
   </ul>
   <h3>Progress bars</h3>
@@ -243,11 +246,19 @@
     <h1>Javascript plugins</h1>
   </div>
   <div class="alert alert-info">
-    <strong>Heads up!</strong> We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.
+    <strong>Heads up!</strong> We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.
   </div>
+  <h3>Tooltips</h3>
+  <ul>
+    <li>The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.</li>
+    <li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
+    <li>The <code>animate</code> option was renamed to <code>animation</code>.</li>
+    <li>The <code>html</code> option was removed, as the tooltips default to allowing HTML now.</li>
+  </ul>
   <h3>Popovers</h3>
   <ul>
     <li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li>
+    <li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
   </ul>
   <h3>New plugins</h3>
   <ul>
@@ -291,5 +302,7 @@
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
     <script src="assets/js/application.js"></script>
+
+
   </body>
 </html>

js/README.md

@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
 
 Options should be sparse and add universal value. We should pick the right defaults.
 
-All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
+All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
 
     $.fn.modal.defaults = { … }
 
@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
 
 ### CONSTRUCTORS
 
-Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
+Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
 
 
     $.fn.popover.Constructor

js/bootstrap-alert.js

@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-alert.js v2.0.0
+ * bootstrap-alert.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#alerts
  * ==========================================================
  * Copyright 2012 Twitter, Inc.
@@ -51,11 +51,14 @@
 
       $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
 
-      $parent.removeClass('in')
+      $parent
+        .trigger('close')
+        .removeClass('in')
 
       function removeElement() {
-        $parent.remove()
-        $parent.trigger('closed')
+        $parent
+          .trigger('closed')
+          .remove()
       }
 
       $.support.transition && $parent.hasClass('fade') ?
@@ -88,4 +91,4 @@
     $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-button.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-button.js v2.0.0
+ * bootstrap-button.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#buttons
  * ============================================================
  * Copyright 2012 Twitter, Inc.
@@ -91,8 +91,8 @@
 
   $(function () {
     $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
-      $(e.target).button('toggle')
+      $(e.currentTarget).button('toggle')
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-carousel.js

@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-carousel.js v2.0.0
+ * bootstrap-carousel.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#carousel
  * ==========================================================
  * Copyright 2012 Twitter, Inc.
@@ -61,6 +61,7 @@
 
   , pause: function () {
       clearInterval(this.interval)
+      this.interval = null
       return this
     }
 
@@ -82,6 +83,8 @@
         , fallback  = type == 'next' ? 'first' : 'last'
         , that = this
 
+      if (!$next.length) return
+
       this.sliding = true
 
       isCycling && this.pause()
@@ -151,4 +154,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-collapse.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-collapse.js v2.0.0
+ * bootstrap-collapse.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#collapse
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -133,4 +133,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-dropdown.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-dropdown.js v2.0.0
+ * bootstrap-dropdown.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#dropdowns
  * ============================================================
  * Copyright 2012 Twitter, Inc.
@@ -89,4 +89,4 @@
     $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-modal.js

@@ -1,5 +1,5 @@
 /* =========================================================
- * bootstrap-modal.js v2.0.0
+ * bootstrap-modal.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#modals
  * =========================================================
  * Copyright 2012 Twitter, Inc.
@@ -26,7 +26,7 @@
   * ====================== */
 
   var Modal = function ( content, options ) {
-    this.options = $.extend({}, $.fn.modal.defaults, options)
+    this.options = options
     this.$element = $(content)
       .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
   }
@@ -177,16 +177,17 @@
     return this.each(function () {
       var $this = $(this)
         , data = $this.data('modal')
-        , options = typeof option == 'object' && option
+        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
       if (!data) $this.data('modal', (data = new Modal(this, options)))
       if (typeof option == 'string') data[option]()
-      else data.show()
+      else if (options.show) data.show()
     })
   }
 
   $.fn.modal.defaults = {
       backdrop: true
     , keyboard: true
+    , show: true
   }
 
   $.fn.modal.Constructor = Modal
@@ -206,4 +207,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-popover.js

@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-popover.js v2.0.0
+ * bootstrap-popover.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#popovers
  * ===========================================================
  * Copyright 2012 Twitter, Inc.
@@ -92,4 +92,4 @@
   , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-scrollspy.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-scrollspy.js v2.0.0
+ * bootstrap-scrollspy.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#scrollspy
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -122,4 +122,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-tab.js

@@ -1,5 +1,5 @@
 /* ========================================================
- * bootstrap-tab.js v2.0.0
+ * bootstrap-tab.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#tabs
  * ========================================================
  * Copyright 2012 Twitter, Inc.
@@ -127,4 +127,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-tooltip.js

@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-tooltip.js v2.0.0
+ * bootstrap-tooltip.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#tooltips
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ===========================================================
@@ -267,4 +267,4 @@
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
   }
 
-}( window.jQuery )
+}( window.jQuery );

js/bootstrap-transition.js

@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.0.0
+ * bootstrap-transition.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#transitions
  * ===================================================
  * Copyright 2012 Twitter, Inc.
@@ -47,5 +47,5 @@
     })()
 
   })
-  
-}( window.jQuery )
+
+}( window.jQuery );

js/bootstrap-typeahead.js

@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-typeahead.js v2.0.0
+ * bootstrap-typeahead.js v2.0.1
  * http://twitter.github.com/bootstrap/javascript.html#typeahead
  * =============================================================
  * Copyright 2012 Twitter, Inc.
@@ -268,4 +268,4 @@
     })
   })
 
-}( window.jQuery )
+}( window.jQuery );

js/tests/unit/bootstrap-alert.js

@@ -13,7 +13,7 @@ $(function () {
       test("should fade element out on clicking .close", function () {
         var alertHTML = '<div class="alert-message warning fade in">'
           + '<a class="close" href="#" data-dismiss="alert">×</a>'
-          + '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+          + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
           + '</div>'
           , alert = $(alertHTML).alert()
 
@@ -27,7 +27,7 @@ $(function () {
 
         var alertHTML = '<div class="alert-message warning fade in">'
           + '<a class="close" href="#" data-dismiss="alert">×</a>'
-          + '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>'
+          + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
           + '</div>'
           , alert = $(alertHTML).appendTo('#qunit-fixture').alert()
 

js/tests/unit/bootstrap-button.js

@@ -3,7 +3,7 @@ $(function () {
     module("bootstrap-buttons")
 
       test("should be defined on jquery object", function () {
-        ok($(document.body).button, 'tabs method is defined')
+        ok($(document.body).button, 'button method is defined')
       })
 
       test("should return element", function () {

less/bootstrap.less

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.0
+ * Bootstrap v2.0.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0

less/breadcrumbs.less

@@ -9,7 +9,7 @@
   .border-radius(3px);
   .box-shadow(inset 0 1px 0 @white);
   li {
-    display: inline;
+    display: inline-block;
     text-shadow: 0 1px 0 @white;
   }
   .divider {

less/button-groups.less

@@ -133,7 +133,8 @@
 .btn-primary,
 .btn-danger,
 .btn-info,
-.btn-success {
+.btn-success,
+.btn-inverse {
   .caret {
     border-top-color: @white;
     .opacity(75);

less/buttons.less

@@ -9,12 +9,14 @@
 .btn {
   display: inline-block;
   padding: 4px 10px 4px;
+  margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   color: @grayDark;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  vertical-align: middle;
+  .buttonBackground(@white, darken(@white, 10%));
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   .border-radius(4px);
@@ -23,6 +25,7 @@
   cursor: pointer;
 
   // Give IE7 some love
+  .reset-filter();
   .ie7-restore-left-whitespace();
 }
 
@@ -51,7 +54,6 @@
   .box-shadow(@shadow);
   background-color: darken(@white, 10%);
   background-color: darken(@white, 15%) e("\9");
-  color: rgba(0,0,0,.5);
   outline: 0;
 }
 
@@ -76,7 +78,7 @@
   line-height: normal;
   .border-radius(5px);
 }
-.btn-large .icon {
+.btn-large [class^="icon-"] {
   margin-top: 1px;
 }
 
@@ -86,10 +88,17 @@
   font-size: @baseFontSize - 2px;
   line-height: @baseLineHeight - 2px;
 }
-.btn-small .icon {
+.btn-small [class^="icon-"] {
   margin-top: -1px;
 }
 
+// Mini
+.btn-mini {
+  padding: 2px 6px;
+  font-size: @baseFontSize - 2px;
+  line-height: @baseLineHeight - 4px;
+}
+
 
 // Alternate buttons
 // --------------------------------------------------
@@ -105,16 +114,19 @@
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  color: @white
+  color: @white;
 }
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -139,6 +151,10 @@
 .btn-info {
   .buttonBackground(#5bc0de, #2f96b4);
 }
+// Inverse appears as dark gray
+.btn-inverse {
+  .buttonBackground(#454545, #262626);
+}
 
 
 // Cross-browser Jank
@@ -146,8 +162,10 @@
 
 button.btn,
 input[type="submit"].btn {
+
+  // Firefox 3.6 only I believe
   &::-moz-focus-inner {
-  padding: 0;
+    padding: 0;
     border: 0;
   }
 

less/code.less

@@ -11,12 +11,16 @@ pre {
   color: @grayDark;
   .border-radius(3px);
 }
+
+// Inline code
 code {
   padding: 3px 4px;
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
+
+// Blocks of code
 pre {
   display: block;
   padding: (@baseLineHeight - 1) / 2;
@@ -30,6 +34,7 @@ pre {
   white-space: pre;
   white-space: pre-wrap;
   word-break: break-all;
+  word-wrap: break-word;
 
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {
@@ -39,6 +44,14 @@ pre {
   // Account for some code outputs that place code tags in pre tags
   code {
     padding: 0;
+    color: inherit;
     background-color: transparent;
+    border: 0;
   }
 }
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}

less/dropdowns.less

@@ -46,7 +46,6 @@
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
-  max-width: 220px;
   _width: 160px;
   padding: 4px 0;
   margin: 0; // override default ul
@@ -93,7 +92,7 @@
     padding: 3px 15px;
     clear: both;
     font-weight: normal;
-    line-height: 18px;
+    line-height: @baseLineHeight;
     color: @gray;
     white-space: nowrap;
   }

less/forms.less

@@ -28,6 +28,12 @@ legend {
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
+
+  // Small
+  small {
+    font-size: @baseLineHeight * .75;
+    color: @grayLight;
+  }
 }
 
 // Set font for forms
@@ -36,7 +42,13 @@ input,
 button,
 select,
 textarea {
-  #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+  #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
 }
 
 // Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: 0;
   cursor: pointer;
-  border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
+  .border-radius(0);
+  border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+  border: 0;
 }
 
 // Reset the file input to browser defaults
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
+// Reset line-height for IE
+input[type="file"] {
+  line-height: 18px \9;
+}
+
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
 }
 
 // Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
+  padding-top: 5px;
   margin-bottom: 0;
   vertical-align: middle;
 }
@@ -175,11 +198,6 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
   margin-left: 10px; // space out consecutive inline controls
 }
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
-  padding-top: 0;
-}
 
 
 
@@ -198,9 +216,10 @@ textarea:focus {
   @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   .box-shadow(@shadow);
   outline: 0;
-  outline: thin dotted \9; /* IE6-8 */
+  outline: thin dotted \9; /* IE6-9 */
 }
 input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
   .box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label,
-  .help-block,
-  .help-inline {
-    color: @textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: @textColor;
-    border-color: @borderColor;
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      .box-shadow(0 0 6px lighten(@borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: @textColor;
-    background-color: @backgroundColor;
-    border-color: @textColor;
-  }
-}
 // Warning
 .control-group.warning {
   .formFieldState(@warningText, @warningText, @warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
 // ---------
 
 .help-block {
+  display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 0;
   color: @grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
     .border-radius(3px 0 0 3px);
   }
   .uneditable-input {
+    border-left-color: #eee;
     border-right-color: #ccc;    
   }
   .add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
     display: inline-block;
     margin-bottom: 0;
   }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
 }
 .form-search label,
 .form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
   margin-bottom: @baseLineHeight / 2;
 }
 
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: @baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
+
 // Horizontal-specific styles
 // --------------------------
 
 .form-horizontal {
-  // Legend collapses margin, so we're relegated to padding
-  legend + .control-group {
-    margin-top: @baseLineHeight;
-    -webkit-margin-top-collapse: separate;
-  }
   // Increase spacing between groups
   .control-group {
     margin-bottom: @baseLineHeight;
     .clearfix();
   }
   // Float the labels left
-  .control-group > label {
+  .control-label {
     float: left;
     width: 140px;
     padding-top: 5px;

less/labels.less

@@ -1,16 +1,32 @@
 // LABELS
 // ------
 
+// Base
 .label {
-  padding: 1px 3px 2px;
-  font-size: @baseFontSize * .75;
+  padding: 2px 4px 3px;
+  font-size: @baseFontSize * .85;
   font-weight: bold;
   color: @white;
-  text-transform: uppercase;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
   .border-radius(3px);
 }
-.label-important { background-color: @errorText; }
-.label-warning   { background-color: @orange; }
-.label-success   { background-color: @successText; }
-.label-info      { background-color: @infoText; }
+
+// Hover state
+.label:hover {
+  color: @white;
+  text-decoration: none;
+}
+
+// Colors
+.label-important        { background-color: @errorText; }
+.label-important:hover  { background-color: darken(@errorText, 10%); }
+
+.label-warning          { background-color: @orange; }
+.label-warning:hover    { background-color: darken(@orange, 10%); }
+
+.label-success          { background-color: @successText; }
+.label-success:hover    { background-color: darken(@successText, 10%); }
+
+.label-info             { background-color: @infoText; }
+.label-info:hover       { background-color: darken(@infoText, 10%); }

less/mixins.less

@@ -9,7 +9,7 @@
 // Clearfix
 // --------
 // For clearing floats like a boss h5bp.com/q
-.clearfix() {
+.clearfix {
   *zoom: 1;
   &:before,
   &:after {
@@ -25,7 +25,7 @@
 // ------------------
 .tab-focus() {
   // Default
-  outline: thin dotted;
+  outline: thin dotted #333;
   // Webkit
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
@@ -89,6 +89,15 @@
   }
 }
 
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 
 
 // FONTS
@@ -199,13 +208,13 @@
   // Setup the mixins to be used
   .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
     width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-  } 
+  }
   .gridColumn(@fluidGridGutterWidth) {
     float: left;
     margin-left: @fluidGridGutterWidth;
   }
   // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
     // Row surrounds the columns
     .row-fluid {
       width: 100%;
@@ -219,24 +228,22 @@
         margin-left: 0;
       }
       // Default columns
-      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
-      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
-      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
-      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
-      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
-      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
-      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
-      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
-      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
-      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
-      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
-      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+      > .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+      > .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+      > .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+      > .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+      > .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+      > .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+      > .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+      > .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+      > .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+      > .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+      > .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+      > .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
     }
   }
 }
 
-
-
 // Input grid system
 // -------------------------
 #inputGridSystem {
@@ -263,6 +270,52 @@
   }
 }
 
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+.makeRow() {
+  margin-left: @gridGutterWidth * -1;
+  .clearfix();
+}
+.makeColumn(@columns: 1) {
+  float: left;
+  margin-left: @gridGutterWidth;
+  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+
+
+
+// Form field states (used in forms.less)
+// --------------------------------------------------
+
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline {
+    color: @textColor;
+  }
+  // Style inputs accordingly
+  input,
+  select,
+  textarea {
+    color: @textColor;
+    border-color: @borderColor;
+    &:focus {
+      border-color: darken(@borderColor, 10%);
+      .box-shadow(0 0 6px lighten(@borderColor, 20%));
+    }
+  }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: @textColor;
+    background-color: @backgroundColor;
+    border-color: @textColor;
+  }
+}
+
 
 
 // CSS3 PROPERTIES
@@ -313,13 +366,6 @@
        -o-transform: translate(@x, @y);
           transform: translate(@x, @y);
 }
-.skew(@x: 0, @y: 0) {
-  -webkit-transform: translate(@x, @y);
-     -moz-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
-       -o-transform: translate(@x, @y);
-          transform: translate(@x, @y);
-}
 .skew(@x: 0, @y: 0) {
   -webkit-transform: skew(@x, @y);
      -moz-transform: skew(@x, @y);
@@ -327,6 +373,13 @@
        -o-transform: skew(@x, @y);
           transform: skew(@x, @y);
 }
+.translate3d(@x: 0, @y: 0, @z: 0) {
+  -webkit-transform: translate(@x, @y, @z);
+     -moz-transform: translate(@x, @y, @z);
+      -ms-transform: translate(@x, @y, @z);
+       -o-transform: translate(@x, @y, @z);
+          transform: translate(@x, @y, @z);
+}
 
 // Background clipping
 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"

less/modals.less

@@ -1,6 +1,7 @@
 // MODALS
 // ------
 
+// Recalculate z-index where appropriate
 .modal-open {
   .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
   .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@@ -8,6 +9,7 @@
   .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
 }
 
+// Background
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -25,6 +27,7 @@
   .opacity(80);
 }
 
+// Base modal
 .modal {
   position: fixed;
   top: 50%;
@@ -53,9 +56,17 @@
   // Close icon
   .close { margin-top: 2px; }
 }
+
+// Body (where all modal content resises)
 .modal-body {
   padding: 15px;
 }
+// Remove bottom margin if need be
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;

less/navbar.less

@@ -81,7 +81,7 @@
     margin-top: 5px; // make buttons vertically centered in navbar
   }
   .btn-group .btn {
-    margin-top: 0;
+    margin-top: 0; // then undo the margin here so we don't accidentally double it
   }
 }
 
@@ -104,6 +104,14 @@
   input[type="radio"] {
     margin-top: 3px;
   }
+  .input-append,
+  .input-prepend {
+    margin-top: 6px;
+    white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
+    input {
+      margin-top: 0; // remove the margin on top since it's on the parent
+    }
+  }
 }
 
 // Navbar search
@@ -133,7 +141,7 @@
       background-color: @grayLight;
       background-color: rgba(255,255,255,.5);
     }
-    // Focus states (we use .focused since IE8 and down doesn't support :focus)
+    // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
     &:focus,
     &.focused {
       padding: 5px 10px;
@@ -194,7 +202,7 @@
 }
 // Hover
 .navbar .nav > li > a:hover {
-  background-color: transparent;
+  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
   color: @navbarLinkColorHover;
   text-decoration: none;
 }
@@ -205,7 +213,6 @@
   color: @navbarLinkColorHover;
   text-decoration: none;
   background-color: @navbarBackground;
-  background-color: rgba(0,0,0,.5);
 }
 
 // Dividers (basically a vertical hr)

less/navs.less

@@ -21,6 +21,21 @@
   background-color: @grayLighter;
 }
 
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 // NAV LIST
@@ -33,28 +48,20 @@
 }
 .nav-list > li > a,
 .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left:  -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
-.nav-list > li + .nav-header {
-  margin-top: 9px;
-}
-.nav-list .active > a {
+.nav-list .active > a,
+.nav-list .active > a:hover {
   color: @white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: @linkColor;
 }
-.nav-list .icon {
+.nav-list [class^="icon-"] {
   margin-right: 2px;
 }
 
@@ -248,6 +255,9 @@
 .tabbable {
   .clearfix();
 }
+.tab-content {
+  overflow: hidden; // prevent content from running below tabs
+}
 
 // Remove border on bottom, left, right
 .tabs-below .nav-tabs,

less/patterns.less

@@ -1,13 +0,0 @@
-// Patterns.less
-// Repeatable UI elements outside the base styles provided from the scaffolding
-// ----------------------------------------------------------------------------
-
-
-// PAGE HEADERS
-// ------------
-
-footer {
-  padding-top: @baseLineHeight - 1;
-  margin-top: @baseLineHeight - 1;
-  border-top: 1px solid #eee;
-}

less/print.less

@@ -1,18 +0,0 @@
-/*!
- * Bootstrap @VERSION for Print
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: @DATE
- */
-
-
-// HIDE UNECESSARY COMPONENTS
-// --------------------------
-
-.navbar-fixed {
-  display: none;
-}

less/reset.less

@@ -108,7 +108,7 @@ input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   cursor: pointer; // Cursors on all buttons applied consistently
-  -webkit-appearance: button; // Style clicable inputs in iOS
+  -webkit-appearance: button; // Style clickable inputs in iOS
 }
 input[type="search"] { // Appearance in Safari/Chrome
   -webkit-appearance: textfield;

less/responsive.less

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.0
+ * Bootstrap Responsive v2.0.1
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -56,7 +56,7 @@
   .uneditable-input {
     display: block;
     width: 100%;
-    height: 28px; /* Make inputs at least the height of their button counterpart */
+    min-height: 28px; /* Make inputs at least the height of their button counterpart */
     /* Makes inputs behave like true block-level elements */
     -webkit-box-sizing: border-box; /* Older Webkit */
        -moz-box-sizing: border-box; /* Older FF */
@@ -123,7 +123,7 @@
 // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
 // --------------------------------------------------
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers
@@ -154,7 +154,7 @@
 // PORTRAIT TABLET TO DEFAULT DESKTOP
 // ----------------------------------
 
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
   #gridSystem > .generate(12, 42px, 20px);
@@ -171,7 +171,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 980px) {
+@media (max-width: 979px) {
 
   // UNFIX THE TOPBAR
   // ----------------
@@ -215,6 +215,10 @@
   .navbar .nav > .divider-vertical {
     display: none;
   }
+  .navbar .nav .nav-header {
+    color: @navbarText;
+    text-shadow: none;
+  }
   // Nav and dropdown links in navbar
   .navbar .nav > li > a,
   .navbar .dropdown-menu a {

less/sprites.less

@@ -9,24 +9,26 @@
 // All icons receive the styles of the <i> tag with a base class 
 // of .i and are then given a unique class to add width, height, 
 // and background-position. Your resulting HTML will look like
-// <i class="i icon-inbox"></i>.
+// <i class="icon-inbox"></i>.
 
 // For the white version of the  icons, just add the .icon-white class:
-// <i class="i icon-inbox icon-white"></i>
+// <i class="icon-inbox icon-white"></i>
 
-[class^="icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   display: inline-block;
   width: 14px;
   height: 14px;
+  line-height: 14px;
   vertical-align: text-top;
-  background-image: url(../img/glyphicons-halflings.png);
+  background-image: url(@iconSpritePath);
   background-position: 14px 14px;
   background-repeat: no-repeat;
 
   .ie7-restore-right-whitespace();
 }
 .icon-white {
-  background-image: url(../img/glyphicons-halflings-white.png);
+  background-image: url(@iconWhiteSpritePath);
 }
 
 .icon-glass              { background-position: 0      0; }

less/tables.less

@@ -25,14 +25,15 @@ table {
     padding: 8px;
     line-height: @baseLineHeight;
     text-align: left;
+    vertical-align: top;
     border-top: 1px solid #ddd;
   }
   th {
     font-weight: bold;
-    vertical-align: bottom;
   }
-  td {
-    vertical-align: top;
+  // Bottom align for column headings
+  thead th {
+    vertical-align: bottom;
   }
   // Remove top border from thead by default
   thead:first-child tr th,
@@ -113,6 +114,16 @@ table {
 }
 
 
+// HOVER EFFECT
+// ------------
+// Placed here since it has to come after the potential zebra striping
+.table {
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: #f5f5f5;
+  }
+}
+
 
 // TABLE CELL SIZING
 // -----------------

less/thumbnails.less

@@ -2,13 +2,13 @@
 // ----------
 
 .thumbnails {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   list-style: none;
   .clearfix();
 }
 .thumbnails > li {
   float: left;
-  margin: 0 0 @baseLineHeight 20px;
+  margin: 0 0 @baseLineHeight @gridGutterWidth;
 }
 .thumbnail {
   display: block;

less/type.less

@@ -110,7 +110,8 @@ ol {
 li {
   line-height: @baseLineHeight;
 }
-ul.unstyled {
+ul.unstyled,
+ol.unstyled {
   margin-left: 0;
   list-style: none;
 }
@@ -137,7 +138,7 @@ dd {
 hr {
   margin: @baseLineHeight 0;
   border: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid @hrBorder;
   border-bottom: 1px solid @white;
 }
 

less/variables.less

@@ -47,20 +47,28 @@
 // Z-index master list
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-@zindexDropdown:        1000;
-@zindexPopover:         1010;
-@zindexTooltip:         1020;
-@zindexFixedNavbar:     1030;
-@zindexModalBackdrop:   1040;
-@zindexModal:           1050;
+@zindexDropdown:          1000;
+@zindexPopover:           1010;
+@zindexTooltip:           1020;
+@zindexFixedNavbar:       1030;
+@zindexModalBackdrop:     1040;
+@zindexModal:             1050;
+
+// Sprite icons path
+@iconSpritePath:          "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
 
 // Input placeholder text color
-@placeholderText:       @grayLight;
+@placeholderText:         @grayLight;
+
+// Hr border color
+@hrBorder:                @grayLighter;
 
 // Navbar
 @navbarHeight:                    40px;
 @navbarBackground:                @grayDarker;
 @navbarBackgroundHighlight:       @grayDark;
+@navbarLinkBackgroundHover:       transparent;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;