Merge branch 'master' of git://github.com/twitter/bootstrap into 2.2.2-j3

Conflicts: Makefile README.md component.json docs/assets/css/docs.css docs/assets/img/bs-docs-bootstrap-features.png docs/assets/img/bs-docs-responsive-illustrations.png docs/assets/img/bs-docs-twitter-github.png docs/assets/js/bootstrap-typeahead.js docs/assets/js/bootstrap.js docs/assets/js/bootstrap.min.js docs/base-css.html docs/components.html docs/customize.html docs/extend.html docs/getting-started.html docs/index.html docs/javascript.html docs/scaffolding.html docs/templates/layout.mustache docs/templates/pages/customize.mustache docs/templates/pages/index.mustache js/bootstrap-typeahead.js package.json
2026-04-24 03:00:49 -04:00 · 2012-12-10 00:22:22 +01:00
parent a226b2d889 070c125cec
commit f997a9ada7
100 changed files with 2210 additions and 780 deletions
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.2.1
+ * Bootstrap Responsive v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
@@ -8,6 +8,10 @@
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

+@-ms-viewport  {
+  width: device-width;
+}
+
 .clearfix {
  *zoom: 1;
 }
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.2.1
+ * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
@@ -109,6 +109,17 @@ input[type="submit"] {
  -webkit-appearance: button;
 }

+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer;
+}
+
 input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
@@ -126,6 +137,58 @@ textarea {
  vertical-align: top;
 }

+@media print {
+  * {
+    color: #000 !important;
+    text-shadow: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  @page  {
+    margin: 0.5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+
 .clearfix {
  *zoom: 1;
 }
@@ -615,6 +678,10 @@ cite {
  color: #999999;
 }

+a.muted:hover {
+  color: #808080;
+}
+
 .text-warning {
  color: #c09853;
 }
@@ -747,6 +814,19 @@ ol.unstyled {
  list-style: none;
 }

+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+}
+
+ul.inline > li,
+ol.inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
 dl {
  margin-bottom: 20px;
 }
@@ -883,6 +963,7 @@ pre {
 code {
  padding: 2px 4px;
  color: #d14;
+  white-space: nowrap;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
 }
@@ -912,6 +993,8 @@ pre.prettyprint {
 pre code {
  padding: 0;
  color: inherit;
+  white-space: pre;
+  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
 }
@@ -1069,7 +1152,6 @@ input[type="checkbox"] {
  margin-top: 1px \9;
  *margin-top: 0;
  line-height: normal;
-  cursor: pointer;
 }

 input[type="file"],
@@ -1352,7 +1434,7 @@ input[type="checkbox"][readonly] {
  background-color: transparent;
 }

-.control-group.warning > label,
+.control-group.warning .control-label,
 .control-group.warning .help-block,
 .control-group.warning .help-inline {
  color: #c09853;
@@ -1391,7 +1473,7 @@ input[type="checkbox"][readonly] {
  border-color: #c09853;
 }

-.control-group.error > label,
+.control-group.error .control-label,
 .control-group.error .help-block,
 .control-group.error .help-inline {
  color: #b94a48;
@@ -1430,7 +1512,7 @@ input[type="checkbox"][readonly] {
  border-color: #b94a48;
 }

-.control-group.success > label,
+.control-group.success .control-label,
 .control-group.success .help-block,
 .control-group.success .help-inline {
  color: #468847;
@@ -1469,7 +1551,7 @@ input[type="checkbox"][readonly] {
  border-color: #468847;
 }

-.control-group.info > label,
+.control-group.info .control-label,
 .control-group.info .help-block,
 .control-group.info .help-inline {
  color: #3a87ad;
@@ -1508,16 +1590,16 @@ input[type="checkbox"][readonly] {
  border-color: #3a87ad;
 }

-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid {
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
 }

-input:focus:required:invalid:focus,
-textarea:focus:required:invalid:focus,
-select:focus:required:invalid:focus {
+input:focus:invalid:focus,
+textarea:focus:invalid:focus,
+select:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
@@ -1623,7 +1705,9 @@ select:focus:required:invalid:focus {
 .input-append .add-on,
 .input-prepend .add-on,
 .input-append .btn,
-.input-prepend .btn {
+.input-prepend .btn,
+.input-append .btn-group > .dropdown-toggle,
+.input-prepend .btn-group > .dropdown-toggle {
  vertical-align: top;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
@@ -1656,9 +1740,9 @@ select:focus:required:invalid:focus {
          border-radius: 4px 0 0 4px;
 }

-.input-append input + .btn-group .btn,
-.input-append select + .btn-group .btn,
-.input-append .uneditable-input + .btn-group .btn {
+.input-append input + .btn-group .btn:last-child,
+.input-append select + .btn-group .btn:last-child,
+.input-append .uneditable-input + .btn-group .btn:last-child {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
@@ -1671,7 +1755,8 @@ select:focus:required:invalid:focus {
 }

 .input-append .add-on:last-child,
-.input-append .btn:last-child {
+.input-append .btn:last-child,
+.input-append .btn-group:last-child > .dropdown-toggle {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
@@ -1874,7 +1959,10 @@ legend + .control-group {

 .form-horizontal input + .help-block,
 .form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block {
+.form-horizontal textarea + .help-block,
+.form-horizontal .uneditable-input + .help-block,
+.form-horizontal .input-prepend + .help-block,
+.form-horizontal .input-append + .help-block {
  margin-top: 10px;
 }

@@ -1924,6 +2012,10 @@ table {
  border-top: 2px solid #dddddd;
 }

+.table .table {
+  background-color: #ffffff;
+}
+
 .table-condensed th,
 .table-condensed td {
  padding: 4px 5px;
@@ -1956,39 +2048,48 @@ table {
  border-top: 0;
 }

-.table-bordered thead:first-child tr:first-child th:first-child,
-.table-bordered tbody:first-child tr:first-child td:first-child {
+.table-bordered thead:first-child tr:first-child > th:first-child,
+.table-bordered tbody:first-child tr:first-child > td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
 }

-.table-bordered thead:first-child tr:first-child th:last-child,
-.table-bordered tbody:first-child tr:first-child td:last-child {
+.table-bordered thead:first-child tr:first-child > th:last-child,
+.table-bordered tbody:first-child tr:first-child > td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
 }

-.table-bordered thead:last-child tr:last-child th:first-child,
-.table-bordered tbody:last-child tr:last-child td:first-child,
-.table-bordered tfoot:last-child tr:last-child td:first-child {
-  -webkit-border-radius: 0 0 0 4px;
-     -moz-border-radius: 0 0 0 4px;
-          border-radius: 0 0 0 4px;
+.table-bordered thead:last-child tr:last-child > th:first-child,
+.table-bordered tbody:last-child tr:last-child > td:first-child,
+.table-bordered tfoot:last-child tr:last-child > td:first-child {
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
 }

-.table-bordered thead:last-child tr:last-child th:last-child,
-.table-bordered tbody:last-child tr:last-child td:last-child,
-.table-bordered tfoot:last-child tr:last-child td:last-child {
+.table-bordered thead:last-child tr:last-child > th:last-child,
+.table-bordered tbody:last-child tr:last-child > td:last-child,
+.table-bordered tfoot:last-child tr:last-child > td:last-child {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
 }

+.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
 .table-bordered caption + thead tr:first-child th:first-child,
 .table-bordered caption + tbody tr:first-child td:first-child,
 .table-bordered colgroup + thead tr:first-child th:first-child,
@@ -2007,8 +2108,8 @@ table {
  -moz-border-radius-topright: 4px;
 }

-.table-striped tbody tr:nth-child(odd) td,
-.table-striped tbody tr:nth-child(odd) th {
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
 }

@@ -2835,7 +2936,7 @@ table th[class*="span"],

 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: #333333;
+  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
@@ -2858,6 +2959,7 @@ table th[class*="span"],
  cursor: default;
  background-color: transparent;
  background-image: none;
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }

 .open {
@@ -2951,6 +3053,7 @@ table th[class*="span"],
 }

 .typeahead {
+  z-index: 1051;
  margin-top: 2px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
@@ -3051,7 +3154,6 @@ button.close {
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
-  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
@@ -3103,10 +3205,6 @@ button.close {
 .btn:hover {
  color: #333333;
  text-decoration: none;
-  background-color: #e6e6e6;
-  *background-color: #d9d9d9;
-  /* Buttons in IE7 don't get borders, so darken on hover */
-
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
@@ -3122,8 +3220,6 @@ button.close {

 .btn.active,
 .btn:active {
-  background-color: #e6e6e6;
-  background-color: #d9d9d9 \9;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -3134,7 +3230,6 @@ button.close {
 .btn.disabled,
 .btn[disabled] {
  cursor: default;
-  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
@@ -3153,7 +3248,7 @@ button.close {

 .btn-large [class^="icon-"],
 .btn-large [class*=" icon-"] {
-  margin-top: 2px;
+  margin-top: 4px;
 }

 .btn-small {
@@ -3169,8 +3264,13 @@ button.close {
  margin-top: 0;
 }

+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+  margin-top: -1px;
+}
+
 .btn-mini {
-  padding: 1px 6px;
+  padding: 0 6px;
  font-size: 10.5px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -3488,9 +3588,9 @@ input[type="submit"].btn.btn-mini {
  font-size: 0;
 }

-.btn-toolbar .btn + .btn,
-.btn-toolbar .btn-group + .btn,
-.btn-toolbar .btn + .btn-group {
+.btn-toolbar > .btn + .btn,
+.btn-toolbar > .btn-group + .btn,
+.btn-toolbar > .btn + .btn-group {
  margin-left: 5px;
 }

@@ -3506,20 +3606,21 @@ input[type="submit"].btn.btn-mini {
 }

 .btn-group > .btn,
-.btn-group > .dropdown-menu {
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
  font-size: 14px;
 }

 .btn-group > .btn-mini {
-  font-size: 11px;
+  font-size: 10.5px;
 }

 .btn-group > .btn-small {
-  font-size: 12px;
+  font-size: 11.9px;
 }

 .btn-group > .btn-large {
-  font-size: 16px;
+  font-size: 17.5px;
 }

 .btn-group > .btn:first-child {
@@ -3677,39 +3778,39 @@ input[type="submit"].btn.btn-mini {
  *zoom: 1;
 }

-.btn-group-vertical .btn {
+.btn-group-vertical > .btn {
  display: block;
  float: none;
-  width: 100%;
+  max-width: 100%;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
 }

-.btn-group-vertical .btn + .btn {
+.btn-group-vertical > .btn + .btn {
  margin-top: -1px;
  margin-left: 0;
 }

-.btn-group-vertical .btn:first-child {
+.btn-group-vertical > .btn:first-child {
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
 }

-.btn-group-vertical .btn:last-child {
+.btn-group-vertical > .btn:last-child {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
 }

-.btn-group-vertical .btn-large:first-child {
+.btn-group-vertical > .btn-large:first-child {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
 }

-.btn-group-vertical .btn-large:last-child {
+.btn-group-vertical > .btn-large:last-child {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
@@ -3718,7 +3819,6 @@ input[type="submit"].btn.btn-mini {
 .alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
-  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
@@ -3727,6 +3827,11 @@ input[type="submit"].btn.btn-mini {
          border-radius: 4px;
 }

+.alert,
+.alert h4 {
+  color: #c09853;
+}
+
 .alert h4 {
  margin: 0;
 }
@@ -3744,6 +3849,10 @@ input[type="submit"].btn.btn-mini {
  border-color: #d6e9c6;
 }

+.alert-success h4 {
+  color: #468847;
+}
+
 .alert-danger,
 .alert-error {
  color: #b94a48;
@@ -3751,12 +3860,21 @@ input[type="submit"].btn.btn-mini {
  border-color: #eed3d7;
 }

+.alert-danger h4,
+.alert-error h4 {
+  color: #b94a48;
+}
+
 .alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
 }

+.alert-info h4 {
+  color: #3a87ad;
+}
+
 .alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
@@ -3786,6 +3904,10 @@ input[type="submit"].btn.btn-mini {
  background-color: #eeeeee;
 }

+.nav > li > a > img {
+  max-width: none;
+}
+
 .nav > .pull-right {
  float: right;
 }
@@ -4170,7 +4292,6 @@ input[type="submit"].btn.btn-mini {
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
-  color: #777777;
 }

 .navbar-inner {
@@ -4233,6 +4354,7 @@ input[type="submit"].btn.btn-mini {
 .navbar-text {
  margin-bottom: 0;
  line-height: 40px;
+  color: #777777;
 }

 .navbar-link {
@@ -4299,7 +4421,7 @@ input[type="submit"].btn.btn-mini {

 .navbar-form .input-append,
 .navbar-form .input-prepend {
-  margin-top: 6px;
+  margin-top: 5px;
  white-space: nowrap;
 }

@@ -4534,6 +4656,11 @@ input[type="submit"].btn.btn-mini {
  border-bottom: 0;
 }

+.navbar .nav li.dropdown > a:hover .caret {
+  border-top-color: #555555;
+  border-bottom-color: #555555;
+}
+
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
@@ -4582,10 +4709,6 @@ input[type="submit"].btn.btn-mini {
          border-radius: 6px 0 6px 6px;
 }

-.navbar-inverse {
-  color: #999999;
-}
-
 .navbar-inverse .navbar-inner {
  background-color: #1b1b1b;
  background-image: -moz-linear-gradient(top, #222222, #111111);
@@ -4609,6 +4732,14 @@ input[type="submit"].btn.btn-mini {
  color: #ffffff;
 }

+.navbar-inverse .brand {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-text {
+  color: #999999;
+}
+
 .navbar-inverse .nav > li > a:focus,
 .navbar-inverse .nav > li > a:hover {
  color: #ffffff;
@@ -4642,6 +4773,11 @@ input[type="submit"].btn.btn-mini {
  background-color: #111111;
 }

+.navbar-inverse .nav li.dropdown > a:hover .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
 .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #999999;
  border-bottom-color: #999999;
@@ -4734,19 +4870,19 @@ input[type="submit"].btn.btn-mini {
          border-radius: 4px;
 }

-.breadcrumb li {
+.breadcrumb > li {
  display: inline-block;
  *display: inline;
  text-shadow: 0 1px 0 #ffffff;
  *zoom: 1;
 }

-.breadcrumb .divider {
+.breadcrumb > li > .divider {
  padding: 0 5px;
  color: #ccc;
 }

-.breadcrumb .active {
+.breadcrumb > .active {
  color: #999999;
 }

@@ -4890,7 +5026,7 @@ input[type="submit"].btn.btn-mini {

 .pagination-mini ul > li > a,
 .pagination-mini ul > li > span {
-  padding: 1px 6px;
+  padding: 0 6px;
  font-size: 10.5px;
 }

@@ -4972,11 +5108,11 @@ input[type="submit"].btn.btn-mini {

 .modal {
  position: fixed;
-  top: 50%;
+  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
-  margin: -250px 0 0 -280px;
+  margin-left: -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
@@ -5002,7 +5138,7 @@ input[type="submit"].btn.btn-mini {
 }

 .modal.fade.in {
-  top: 50%;
+  top: 10%;
 }

 .modal-header {
@@ -5020,6 +5156,7 @@ input[type="submit"].btn.btn-mini {
 }

 .modal-body {
+  position: relative;
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
@@ -5160,6 +5297,8 @@ input[type="submit"].btn.btn-mini {
  display: none;
  width: 236px;
  padding: 1px;
+  text-align: left;
+  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
@@ -5207,85 +5346,87 @@ input[type="submit"].btn.btn-mini {
  padding: 9px 14px;
 }

-.popover-content p,
-.popover-content ul,
-.popover-content ol {
-  margin-bottom: 0;
-}
-
 .popover .arrow,
 .popover .arrow:after {
  position: absolute;
-  display: inline-block;
+  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
 }

+.popover .arrow {
+  border-width: 11px;
+}
+
 .popover .arrow:after {
-  z-index: -1;
+  border-width: 10px;
  content: "";
 }

 .popover.top .arrow {
-  bottom: -10px;
+  bottom: -11px;
  left: 50%;
-  margin-left: -10px;
-  border-top-color: #ffffff;
-  border-width: 10px 10px 0;
+  margin-left: -11px;
+  border-top-color: #999;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  border-bottom-width: 0;
 }

 .popover.top .arrow:after {
-  bottom: -1px;
-  left: -11px;
-  border-top-color: rgba(0, 0, 0, 0.25);
-  border-width: 11px 11px 0;
+  bottom: 1px;
+  margin-left: -10px;
+  border-top-color: #ffffff;
+  border-bottom-width: 0;
 }

 .popover.right .arrow {
  top: 50%;
-  left: -10px;
-  margin-top: -10px;
-  border-right-color: #ffffff;
-  border-width: 10px 10px 10px 0;
+  left: -11px;
+  margin-top: -11px;
+  border-right-color: #999;
+  border-right-color: rgba(0, 0, 0, 0.25);
+  border-left-width: 0;
 }

 .popover.right .arrow:after {
-  bottom: -11px;
-  left: -1px;
-  border-right-color: rgba(0, 0, 0, 0.25);
-  border-width: 11px 11px 11px 0;
+  bottom: -10px;
+  left: 1px;
+  border-right-color: #ffffff;
+  border-left-width: 0;
 }

 .popover.bottom .arrow {
-  top: -10px;
+  top: -11px;
  left: 50%;
-  margin-left: -10px;
-  border-bottom-color: #ffffff;
-  border-width: 0 10px 10px;
+  margin-left: -11px;
+  border-bottom-color: #999;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+  border-top-width: 0;
 }

 .popover.bottom .arrow:after {
-  top: -1px;
-  left: -11px;
-  border-bottom-color: rgba(0, 0, 0, 0.25);
-  border-width: 0 11px 11px;
+  top: 1px;
+  margin-left: -10px;
+  border-bottom-color: #ffffff;
+  border-top-width: 0;
 }

 .popover.left .arrow {
  top: 50%;
-  right: -10px;
-  margin-top: -10px;
-  border-left-color: #ffffff;
-  border-width: 10px 0 10px 10px;
+  right: -11px;
+  margin-top: -11px;
+  border-left-color: #999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+  border-right-width: 0;
 }

 .popover.left .arrow:after {
-  right: -1px;
-  bottom: -11px;
-  border-left-color: rgba(0, 0, 0, 0.25);
-  border-width: 11px 0 11px 11px;
+  right: 1px;
+  bottom: -10px;
+  border-left-color: #ffffff;
+  border-right-width: 0;
 }

 .thumbnails {
@@ -5416,6 +5557,11 @@ a.thumbnail:hover {
          border-radius: 9px;
 }

+.label:empty,
+.badge:empty {
+  display: none;
+}
+
 a.label:hover,
 a.badge:hover {
  color: #ffffff;
@@ -5734,7 +5880,7 @@ a.badge:hover {
  overflow: hidden;
 }

-.carousel .item {
+.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
@@ -5743,46 +5889,46 @@ a.badge:hover {
          transition: 0.6s ease-in-out left;
 }

-.carousel .item > img {
+.carousel-inner > .item > img {
  display: block;
  line-height: 1;
 }

-.carousel .active,
-.carousel .next,
-.carousel .prev {
+.carousel-inner > .active,
+.carousel-inner > .next,
+.carousel-inner > .prev {
  display: block;
 }

-.carousel .active {
+.carousel-inner > .active {
  left: 0;
 }

-.carousel .next,
-.carousel .prev {
+.carousel-inner > .next,
+.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
 }

-.carousel .next {
+.carousel-inner > .next {
  left: 100%;
 }

-.carousel .prev {
+.carousel-inner > .prev {
  left: -100%;
 }

-.carousel .next.left,
-.carousel .prev.right {
+.carousel-inner > .next.left,
+.carousel-inner > .prev.right {
  left: 0;
 }

-.carousel .active.left {
+.carousel-inner > .active.left {
  left: -100%;
 }

-.carousel .active.right {
+.carousel-inner > .active.right {
  left: 100%;
 }

--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -194,6 +194,16 @@ hr.soften {
  background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
  opacity: .4;
 }
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1) {
+
+  .jumbotron:after {
+    background-size: 150px 150px;
+  }
+
+}

 /* Masthead (docs home)
 ------------------------- */
@@ -305,9 +315,10 @@ hr.soften {
  line-height: 1.25;
  color: #999;
 }
-.marketing img {
+.marketing-img {
  display: block;
  margin: 0 auto 30px;
+  max-height: 145px;
 }


@@ -316,7 +327,8 @@ hr.soften {
 -------------------------------------------------- */

 .footer {
-  padding: 70px 0;
+  text-align: center;
+  padding: 30px 0;
  margin-top: 70px;
  border-top: 1px solid #e5e5e5;
  background-color: #f5f5f5;
@@ -362,8 +374,14 @@ hr.soften {
  margin-bottom: 0;
 }
 .show-grid .show-grid [class*="span"] {
+  margin-top: 5px;
+}
+.show-grid [class*="span"] [class*="span"] {
  background-color: #ccc;
 }
+.show-grid [class*="span"] [class*="span"] [class*="span"] {
+  background-color: #999;
+}



@@ -737,14 +755,28 @@ form.bs-docs-example {
  margin: 20px;
 }

-/* Alerts
-------------------------- */
+/* Alerts */
 #page-alert-container {
  position: relative;
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
 }

+/* Dropdowns */
+.bs-docs-example-submenus {
+  min-height: 180px;
+}
+.bs-docs-example-submenus > .pull-left + .pull-left {
+  margin-left: 20px;
+}
+.bs-docs-example-submenus .dropup > .dropdown-menu,
+.bs-docs-example-submenus .dropdown > .dropdown-menu {
+  display: block;
+  position: static;
+  margin-bottom: 5px;
+  *width: 180px;
+}
+


 /* Responsive docs
@@ -930,6 +962,7 @@ form.bs-docs-example {
  /* When affixed, space properly */
  .bs-docs-sidenav {
    top: 0;
+    width: 218px;
    margin-top: 30px;
    margin-right: 0;
  }
@@ -942,7 +975,7 @@ form.bs-docs-example {

 /* Tablet to desktop
 ------------------------- */
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
@@ -1094,7 +1127,26 @@ form.bs-docs-example {
    padding: 0;
  }

-  /* Modal example */
+  /* Examples: dropdowns */
+  .bs-docs-example-submenus > .pull-left {
+    float: none;
+    clear: both;
+  }
+  .bs-docs-example-submenus > .pull-left,
+  .bs-docs-example-submenus > .pull-left + .pull-left {
+    margin-left: 0;
+  }
+  .bs-docs-example-submenus p {
+    margin-bottom: 0;
+  }
+  .bs-docs-example-submenus .dropup > .dropdown-menu,
+  .bs-docs-example-submenus .dropdown > .dropdown-menu {
+    margin-bottom: 10px;
+    float: none;
+    max-width: 180px;
+  }
+
+  /* Examples: modal */
  .modal-example .modal {
    position: relative;
    top: auto;
@@ -1108,8 +1160,4 @@ form.bs-docs-example {
    padding-top: 20px;
    padding-bottom: 20px;
  }
-  /* Unfloat the back to top in footer to prevent odd text wrapping */
-  .footer .pull-right {
-    float: none;
-  }
 }
--- a/docs/assets/ico/favicon.png
+++ b/docs/assets/ico/favicon.png
--- a/docs/assets/js/README.md
+++ b/docs/assets/js/README.md
@@ -17,7 +17,7 @@ To target a specific plugin, just include the plugins name as a namespace along

 ---

-### PROGRAMATIC API
+### PROGRAMMATIC API

 We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.

--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -140,7 +140,7 @@
    })

    // request built javascript
-    $('.download-btn').on('click', function () {
+    $('.download-btn .btn').on('click', function () {

      var css = $("#components.download input:checked")
            .map(function () { return this.value })
--- a/docs/assets/js/bootstrap-affix.js
+++ b/docs/assets/js/bootstrap-affix.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-affix.js v2.2.1
+ * bootstrap-affix.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#affix
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -68,6 +68,8 @@
 /* AFFIX PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.affix
+
  $.fn.affix = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -85,6 +87,15 @@
  }


+ /* AFFIX NO CONFLICT
+  * ================= */
+
+  $.fn.affix.noConflict = function () {
+    $.fn.affix = old
+    return this
+  }
+
+
 /* AFFIX DATA-API
  * ============== */

--- a/docs/assets/js/bootstrap-alert.js
+++ b/docs/assets/js/bootstrap-alert.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-alert.js v2.2.1
+ * bootstrap-alert.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#alerts
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -68,6 +68,8 @@
 /* ALERT PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.alert
+
  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -80,6 +82,15 @@
  $.fn.alert.Constructor = Alert


+ /* ALERT NO CONFLICT
+  * ================= */
+
+  $.fn.alert.noConflict = function () {
+    $.fn.alert = old
+    return this
+  }
+
+
 /* ALERT DATA-API
  * ============== */

--- a/docs/assets/js/bootstrap-button.js
+++ b/docs/assets/js/bootstrap-button.js
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-button.js v2.2.1
+ * bootstrap-button.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#buttons
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -64,6 +64,8 @@
 /* BUTTON PLUGIN DEFINITION
  * ======================== */

+  var old = $.fn.button
+
  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -82,6 +84,15 @@
  $.fn.button.Constructor = Button


+ /* BUTTON NO CONFLICT
+  * ================== */
+
+  $.fn.button.noConflict = function () {
+    $.fn.button = old
+    return this
+  }
+
+
 /* BUTTON DATA-API
  * =============== */

--- a/docs/assets/js/bootstrap-carousel.js
+++ b/docs/assets/js/bootstrap-carousel.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- * bootstrap-carousel.js v2.2.1
+ * bootstrap-carousel.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -29,7 +29,6 @@
  var Carousel = function (element, options) {
    this.$element = $(element)
    this.options = options
-    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
      .on('mouseleave', $.proxy(this.cycle, this))
@@ -141,6 +140,8 @@
 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */

+  var old = $.fn.carousel
+
  $.fn.carousel = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -162,6 +163,14 @@
  $.fn.carousel.Constructor = Carousel


+ /* CAROUSEL NO CONFLICT
+  * ==================== */
+
+  $.fn.carousel.noConflict = function () {
+    $.fn.carousel = old
+    return this
+  }
+
 /* CAROUSEL DATA-API
  * ================= */

--- a/docs/assets/js/bootstrap-collapse.js
+++ b/docs/assets/js/bootstrap-collapse.js
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-collapse.js v2.2.1
+ * bootstrap-collapse.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#collapse
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -120,8 +120,10 @@
  }


- /* COLLAPSIBLE PLUGIN DEFINITION
-  * ============================== */
+ /* COLLAPSE PLUGIN DEFINITION
+  * ========================== */
+
+  var old = $.fn.collapse

  $.fn.collapse = function (option) {
    return this.each(function () {
@@ -140,9 +142,18 @@
  $.fn.collapse.Constructor = Collapse


- /* COLLAPSIBLE DATA-API
+ /* COLLAPSE NO CONFLICT
  * ==================== */

+  $.fn.collapse.noConflict = function () {
+    $.fn.collapse = old
+    return this
+  }
+
+
+ /* COLLAPSE DATA-API
+  * ================= */
+
  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
--- a/docs/assets/js/bootstrap-dropdown.js
+++ b/docs/assets/js/bootstrap-dropdown.js
@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrap-dropdown.js v2.2.1
+ * bootstrap-dropdown.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -53,9 +53,10 @@

      if (!isActive) {
        $parent.toggleClass('open')
-        $this.focus()
      }

+      $this.focus()
+
      return false
    }

@@ -82,7 +83,7 @@

      if (!isActive || (isActive && e.keyCode == 27)) return $this.click()

-      $items = $('[role=menu] li:not(.divider) a', $parent)
+      $items = $('[role=menu] li:not(.divider):visible a', $parent)

      if (!$items.length) return

@@ -124,6 +125,8 @@
  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

+  var old = $.fn.dropdown
+
  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -136,12 +139,22 @@
  $.fn.dropdown.Constructor = Dropdown


+ /* DROPDOWN NO CONFLICT
+  * ==================== */
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
  /* APPLY TO STANDARD DROPDOWN ELEMENTS
   * =================================== */

  $(document)
    .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
    .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

--- a/docs/assets/js/bootstrap-modal.js
+++ b/docs/assets/js/bootstrap-modal.js
@@ -1,5 +1,5 @@
 /* =========================================================
- * bootstrap-modal.js v2.2.1
+ * bootstrap-modal.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter, Inc.
@@ -193,6 +193,8 @@
 /* MODAL PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.modal
+
  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -213,6 +215,15 @@
  $.fn.modal.Constructor = Modal


+ /* MODAL NO CONFLICT
+  * ================= */
+
+  $.fn.modal.noConflict = function () {
+    $.fn.modal = old
+    return this
+  }
+
+
 /* MODAL DATA-API
  * ============== */

--- a/docs/assets/js/bootstrap-popover.js
+++ b/docs/assets/js/bootstrap-popover.js
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-popover.js v2.2.1
+ * bootstrap-popover.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#popovers
 * ===========================================================
 * Copyright 2012 Twitter, Inc.
@@ -44,7 +44,7 @@
        , content = this.getContent()

      $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
-      $tip.find('.popover-content > *')[this.options.html ? 'html' : 'text'](content)
+      $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)

      $tip.removeClass('fade top bottom left right in')
    }
@@ -81,6 +81,8 @@
 /* POPOVER PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.popover
+
  $.fn.popover = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -97,7 +99,16 @@
    placement: 'right'
  , trigger: 'click'
  , content: ''
-  , 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>'
+  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
  })

+
+ /* POPOVER NO CONFLICT
+  * =================== */
+
+  $.fn.popover.noConflict = function () {
+    $.fn.popover = old
+    return this
+  }
+
 }(window.jQuery);
--- a/docs/assets/js/bootstrap-scrollspy.js
+++ b/docs/assets/js/bootstrap-scrollspy.js
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-scrollspy.js v2.2.1
+ * bootstrap-scrollspy.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#scrollspy
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -59,7 +59,7 @@
              , $href = /^#\w/.test(href) && $(href)
            return ( $href
              && $href.length
-              && [[ $href.position().top, href ]] ) || null
+              && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
          })
          .sort(function (a, b) { return a[0] - b[0] })
          .each(function () {
@@ -121,6 +121,8 @@
 /* SCROLLSPY PLUGIN DEFINITION
  * =========================== */

+  var old = $.fn.scrollspy
+
  $.fn.scrollspy = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -138,6 +140,15 @@
  }


+ /* SCROLLSPY NO CONFLICT
+  * ===================== */
+
+  $.fn.scrollspy.noConflict = function () {
+    $.fn.scrollspy = old
+    return this
+  }
+
+
 /* SCROLLSPY DATA-API
  * ================== */

--- a/docs/assets/js/bootstrap-tab.js
+++ b/docs/assets/js/bootstrap-tab.js
@@ -1,5 +1,5 @@
 /* ========================================================
- * bootstrap-tab.js v2.2.1
+ * bootstrap-tab.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#tabs
 * ========================================================
 * Copyright 2012 Twitter, Inc.
@@ -110,6 +110,8 @@
 /* TAB PLUGIN DEFINITION
  * ===================== */

+  var old = $.fn.tab
+
  $.fn.tab = function ( option ) {
    return this.each(function () {
      var $this = $(this)
@@ -122,6 +124,15 @@
  $.fn.tab.Constructor = Tab


+ /* TAB NO CONFLICT
+  * =============== */
+
+  $.fn.tab.noConflict = function () {
+    $.fn.tab = old
+    return this
+  }
+
+
 /* TAB DATA-API
  * ============ */

--- a/docs/assets/js/bootstrap-tooltip.js
+++ b/docs/assets/js/bootstrap-tooltip.js
@@ -1,5 +1,5 @@
 /* ===========================================================
- * bootstrap-tooltip.js v2.2.1
+ * bootstrap-tooltip.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ===========================================================
@@ -250,6 +250,8 @@
 /* TOOLTIP PLUGIN DEFINITION
  * ========================= */

+  var old = $.fn.tooltip
+
  $.fn.tooltip = function ( option ) {
    return this.each(function () {
      var $this = $(this)
@@ -273,4 +275,13 @@
  , html: false
  }

+
+ /* TOOLTIP NO CONFLICT
+  * =================== */
+
+  $.fn.tooltip.noConflict = function () {
+    $.fn.tooltip = old
+    return this
+  }
+
 }(window.jQuery);
--- a/docs/assets/js/bootstrap-transition.js
+++ b/docs/assets/js/bootstrap-transition.js
@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.2.1
+ * bootstrap-transition.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#transitions
 * ===================================================
 * Copyright 2012 Twitter, Inc.
--- a/docs/assets/js/bootstrap-typeahead.js
+++ b/docs/assets/js/bootstrap-typeahead.js
@@ -1,5 +1,5 @@
 /* =============================================================
- * bootstrap-typeahead.js v2.2.1-j3
+ * bootstrap-typeahead.js v2.2.2-j3
 * http://twitter.github.com/bootstrap/javascript.html#typeahead
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -35,9 +35,9 @@
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
-    this.$menu = $(this.options.menu).appendTo('body')
    this.source = this.options.source
    this.strict = this.options.strict
+    this.$menu = $(this.options.menu)
    this.shown = false

    if (element.nodeName == 'SELECT') this.replaceSelect()
@@ -130,16 +130,18 @@
    }

  , show: function () {
-      var pos = $.extend({}, this.$element.offset(), {
+      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

-      this.$menu.css({
-        top: pos.top + pos.height
-      , left: pos.left
-      })
+      this.$menu
+        .insertAfter(this.$element)
+        .css({
+          top: pos.top + pos.height
+        , left: pos.left
+        })
+        .show()

-      this.$menu.show()
      this.shown = true
      return this
    }
@@ -370,7 +372,7 @@
    }

  , keydown: function (e) {
-      this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27])
+      this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
      this.move(e)
    }

@@ -442,6 +444,8 @@
  /* TYPEAHEAD PLUGIN DEFINITION
   * =========================== */

+  var old = $.fn.typeahead
+
  $.fn.typeahead = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -464,7 +468,16 @@
  $.fn.typeahead.Constructor = Typeahead


- /*   TYPEAHEAD DATA-API
+ /* TYPEAHEAD NO CONFLICT
+  * =================== */
+
+  $.fn.typeahead.noConflict = function () {
+    $.fn.typeahead = old
+    return this
+  }
+
+
+ /* TYPEAHEAD DATA-API
  * ================== */

  $(document)
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -1,5 +1,5 @@
 /* ===================================================
- * bootstrap-transition.js v2.2.1
+ * bootstrap-transition.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#transitions
 * ===================================================
 * Copyright 2012 Twitter, Inc.
@@ -58,7 +58,7 @@
  })

 }(window.jQuery);/* ==========================================================
- * bootstrap-alert.js v2.2.1
+ * bootstrap-alert.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#alerts
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -127,6 +127,8 @@
 /* ALERT PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.alert
+
  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -139,13 +141,22 @@
  $.fn.alert.Constructor = Alert


+ /* ALERT NO CONFLICT
+  * ================= */
+
+  $.fn.alert.noConflict = function () {
+    $.fn.alert = old
+    return this
+  }
+
+
 /* ALERT DATA-API
  * ============== */

  $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)

 }(window.jQuery);/* ============================================================
- * bootstrap-button.js v2.2.1
+ * bootstrap-button.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#buttons
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -210,6 +221,8 @@
 /* BUTTON PLUGIN DEFINITION
  * ======================== */

+  var old = $.fn.button
+
  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -228,6 +241,15 @@
  $.fn.button.Constructor = Button


+ /* BUTTON NO CONFLICT
+  * ================== */
+
+  $.fn.button.noConflict = function () {
+    $.fn.button = old
+    return this
+  }
+
+
 /* BUTTON DATA-API
  * =============== */

@@ -238,7 +260,7 @@
  })

 }(window.jQuery);/* ==========================================================
- * bootstrap-carousel.js v2.2.1
+ * bootstrap-carousel.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -268,7 +290,6 @@
  var Carousel = function (element, options) {
    this.$element = $(element)
    this.options = options
-    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
      .on('mouseleave', $.proxy(this.cycle, this))
@@ -380,6 +401,8 @@
 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */

+  var old = $.fn.carousel
+
  $.fn.carousel = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -401,6 +424,14 @@
  $.fn.carousel.Constructor = Carousel


+ /* CAROUSEL NO CONFLICT
+  * ==================== */
+
+  $.fn.carousel.noConflict = function () {
+    $.fn.carousel = old
+    return this
+  }
+
 /* CAROUSEL DATA-API
  * ================= */

@@ -413,7 +444,7 @@
  })

 }(window.jQuery);/* =============================================================
- * bootstrap-collapse.js v2.2.1
+ * bootstrap-collapse.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#collapse
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -534,8 +565,10 @@
  }


- /* COLLAPSIBLE PLUGIN DEFINITION
-  * ============================== */
+ /* COLLAPSE PLUGIN DEFINITION
+  * ========================== */
+
+  var old = $.fn.collapse

  $.fn.collapse = function (option) {
    return this.each(function () {
@@ -554,9 +587,18 @@
  $.fn.collapse.Constructor = Collapse


- /* COLLAPSIBLE DATA-API
+ /* COLLAPSE NO CONFLICT
  * ==================== */

+  $.fn.collapse.noConflict = function () {
+    $.fn.collapse = old
+    return this
+  }
+
+
+ /* COLLAPSE DATA-API
+  * ================= */
+
  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
@@ -568,7 +610,7 @@
  })

 }(window.jQuery);/* ============================================================
- * bootstrap-dropdown.js v2.2.1
+ * bootstrap-dropdown.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 * ============================================================
 * Copyright 2012 Twitter, Inc.
@@ -622,9 +664,10 @@

      if (!isActive) {
        $parent.toggleClass('open')
-        $this.focus()
      }

+      $this.focus()
+
      return false
    }

@@ -651,7 +694,7 @@

      if (!isActive || (isActive && e.keyCode == 27)) return $this.click()

-      $items = $('[role=menu] li:not(.divider) a', $parent)
+      $items = $('[role=menu] li:not(.divider):visible a', $parent)

      if (!$items.length) return

@@ -693,6 +736,8 @@
  /* DROPDOWN PLUGIN DEFINITION
   * ========================== */

+  var old = $.fn.dropdown
+
  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -705,17 +750,27 @@
  $.fn.dropdown.Constructor = Dropdown


+ /* DROPDOWN NO CONFLICT
+  * ==================== */
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
  /* APPLY TO STANDARD DROPDOWN ELEMENTS
   * =================================== */

  $(document)
    .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
    .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

 }(window.jQuery);/* =========================================================
- * bootstrap-modal.js v2.2.1
+ * bootstrap-modal.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter, Inc.
@@ -909,6 +964,8 @@
 /* MODAL PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.modal
+
  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -929,6 +986,15 @@
  $.fn.modal.Constructor = Modal


+ /* MODAL NO CONFLICT
+  * ================= */
+
+  $.fn.modal.noConflict = function () {
+    $.fn.modal = old
+    return this
+  }
+
+
 /* MODAL DATA-API
  * ============== */

@@ -949,7 +1015,7 @@

 }(window.jQuery);
 /* ===========================================================
- * bootstrap-tooltip.js v2.2.1
+ * bootstrap-tooltip.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ===========================================================
@@ -1200,6 +1266,8 @@
 /* TOOLTIP PLUGIN DEFINITION
  * ========================= */

+  var old = $.fn.tooltip
+
  $.fn.tooltip = function ( option ) {
    return this.each(function () {
      var $this = $(this)
@@ -1223,8 +1291,17 @@
  , html: false
  }

+
+ /* TOOLTIP NO CONFLICT
+  * =================== */
+
+  $.fn.tooltip.noConflict = function () {
+    $.fn.tooltip = old
+    return this
+  }
+
 }(window.jQuery);/* ===========================================================
- * bootstrap-popover.js v2.2.1
+ * bootstrap-popover.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#popovers
 * ===========================================================
 * Copyright 2012 Twitter, Inc.
@@ -1269,7 +1346,7 @@
        , content = this.getContent()

      $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
-      $tip.find('.popover-content > *')[this.options.html ? 'html' : 'text'](content)
+      $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)

      $tip.removeClass('fade top bottom left right in')
    }
@@ -1306,6 +1383,8 @@
 /* POPOVER PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.popover
+
  $.fn.popover = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -1322,11 +1401,20 @@
    placement: 'right'
  , trigger: 'click'
  , content: ''
-  , 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>'
+  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>'
  })

+
+ /* POPOVER NO CONFLICT
+  * =================== */
+
+  $.fn.popover.noConflict = function () {
+    $.fn.popover = old
+    return this
+  }
+
 }(window.jQuery);/* =============================================================
- * bootstrap-scrollspy.js v2.2.1
+ * bootstrap-scrollspy.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#scrollspy
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -1386,7 +1474,7 @@
              , $href = /^#\w/.test(href) && $(href)
            return ( $href
              && $href.length
-              && [[ $href.position().top, href ]] ) || null
+              && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
          })
          .sort(function (a, b) { return a[0] - b[0] })
          .each(function () {
@@ -1448,6 +1536,8 @@
 /* SCROLLSPY PLUGIN DEFINITION
  * =========================== */

+  var old = $.fn.scrollspy
+
  $.fn.scrollspy = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -1465,6 +1555,15 @@
  }


+ /* SCROLLSPY NO CONFLICT
+  * ===================== */
+
+  $.fn.scrollspy.noConflict = function () {
+    $.fn.scrollspy = old
+    return this
+  }
+
+
 /* SCROLLSPY DATA-API
  * ================== */

@@ -1476,7 +1575,7 @@
  })

 }(window.jQuery);/* ========================================================
- * bootstrap-tab.js v2.2.1
+ * bootstrap-tab.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#tabs
 * ========================================================
 * Copyright 2012 Twitter, Inc.
@@ -1587,6 +1686,8 @@
 /* TAB PLUGIN DEFINITION
  * ===================== */

+  var old = $.fn.tab
+
  $.fn.tab = function ( option ) {
    return this.each(function () {
      var $this = $(this)
@@ -1599,6 +1700,15 @@
  $.fn.tab.Constructor = Tab


+ /* TAB NO CONFLICT
+  * =============== */
+
+  $.fn.tab.noConflict = function () {
+    $.fn.tab = old
+    return this
+  }
+
+
 /* TAB DATA-API
  * ============ */

@@ -1608,7 +1718,7 @@
  })

 }(window.jQuery);/* =============================================================
- * bootstrap-typeahead.js v2.2.1-j3
+ * bootstrap-typeahead.js v2.2.2-j3
 * http://twitter.github.com/bootstrap/javascript.html#typeahead
 * =============================================================
 * Copyright 2012 Twitter, Inc.
@@ -1644,9 +1754,9 @@
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
-    this.$menu = $(this.options.menu).appendTo('body')
    this.source = this.options.source
    this.strict = this.options.strict
+    this.$menu = $(this.options.menu)
    this.shown = false

    if (element.nodeName == 'SELECT') this.replaceSelect()
@@ -1739,16 +1849,18 @@
    }

  , show: function () {
-      var pos = $.extend({}, this.$element.offset(), {
+      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

-      this.$menu.css({
-        top: pos.top + pos.height
-      , left: pos.left
-      })
+      this.$menu
+        .insertAfter(this.$element)
+        .css({
+          top: pos.top + pos.height
+        , left: pos.left
+        })
+        .show()

-      this.$menu.show()
      this.shown = true
      return this
    }
@@ -1979,7 +2091,7 @@
    }

  , keydown: function (e) {
-      this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27])
+      this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
      this.move(e)
    }

@@ -2051,6 +2163,8 @@
  /* TYPEAHEAD PLUGIN DEFINITION
   * =========================== */

+  var old = $.fn.typeahead
+
  $.fn.typeahead = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -2073,7 +2187,16 @@
  $.fn.typeahead.Constructor = Typeahead


- /*   TYPEAHEAD DATA-API
+ /* TYPEAHEAD NO CONFLICT
+  * =================== */
+
+  $.fn.typeahead.noConflict = function () {
+    $.fn.typeahead = old
+    return this
+  }
+
+
+ /* TYPEAHEAD DATA-API
  * ================== */

  $(document)
@@ -2663,7 +2786,7 @@

 }(window.jQuery)
 /* ==========================================================
- * bootstrap-affix.js v2.2.1
+ * bootstrap-affix.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#affix
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
@@ -2732,6 +2855,8 @@
 /* AFFIX PLUGIN DEFINITION
  * ======================= */

+  var old = $.fn.affix
+
  $.fn.affix = function (option) {
    return this.each(function () {
      var $this = $(this)
@@ -2749,6 +2874,15 @@
  }


+ /* AFFIX NO CONFLICT
+  * ================= */
+
+  $.fn.affix.noConflict = function () {
+    $.fn.affix = old
+    return this
+  }
+
+
 /* AFFIX DATA-API
  * ============== */

--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
--- a/docs/assets/js/holder/holder.js
+++ b/docs/assets/js/holder/holder.js
@@ -0,0 +1,342 @@
+/*
+
+Holder - 1.6 - client side image placeholders
+(c) 2012 Ivan Malopinsky / http://imsky.co
+
+Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
+Commercial use requires attribution.
+
+*/
+
+var Holder = Holder || {};
+(function (app, win) {
+
+var preempted = false,
+fallback = false,
+canvas = document.createElement('canvas');
+
+//getElementsByClassName polyfill
+document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
+
+//getComputedStyle polyfill
+window.getComputedStyle||(window.getComputedStyle=function(e,t){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
+
+//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
+function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}};
+
+//https://gist.github.com/991057 by Jed Schmidt with modifications
+function selector(a){
+	a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
+	var ret=[];	b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]);	return ret;
+}
+
+//shallow object property extend
+function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
+
+function text_size(width, height, template) {
+	var dimension_arr = [height, width].sort();
+	var maxFactor = Math.round(dimension_arr[1] / 16),
+		minFactor = Math.round(dimension_arr[0] / 16);
+	var text_height = Math.max(template.size, maxFactor);
+	return {
+		height: text_height
+	}
+}
+
+function draw(ctx, dimensions, template, ratio) {
+	var ts = text_size(dimensions.width, dimensions.height, template);
+	var text_height = ts.height;
+	var width = dimensions.width * ratio, height = dimensions.height * ratio;
+	canvas.width = width;
+	canvas.height = height;
+	ctx.textAlign = "center";
+	ctx.textBaseline = "middle";
+	ctx.fillStyle = template.background;
+	ctx.fillRect(0, 0, width, height);
+	ctx.fillStyle = template.foreground;
+	ctx.font = "bold " + text_height + "px sans-serif";
+	var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
+	if (ctx.measureText(text).width / width > 1) {
+		text_height = template.size / (ctx.measureText(text).width / width);
+	}
+	ctx.font = "bold " + (text_height * ratio) + "px sans-serif";
+	ctx.fillText(text, (width / 2), (height / 2), width);
+	return canvas.toDataURL("image/png");
+}
+
+function render(mode, el, holder, src) {
+
+	var dimensions = holder.dimensions,
+		theme = holder.theme,
+		text = holder.text;
+	var dimensions_caption = dimensions.width + "x" + dimensions.height;
+	theme = (text ? extend(theme, {
+		text: text
+	}) : theme);
+
+	var ratio = 1;
+	if(window.devicePixelRatio && window.devicePixelRatio > 1){
+		ratio = window.devicePixelRatio;
+	}
+	
+	if (mode == "image") {
+		el.setAttribute("data-src", src);
+		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
+		el.style.width = dimensions.width + "px";
+		el.style.height = dimensions.height + "px";
+
+		if (fallback) {
+			el.style.backgroundColor = theme.background;
+		}
+		else{
+			el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
+		}
+	} else {
+		if (!fallback) {
+			el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
+			el.style.backgroundSize = dimensions.width+"px "+dimensions.height+"px";
+		}
+	}
+};
+
+function fluid(el, holder, src) {
+	var dimensions = holder.dimensions,
+		theme = holder.theme,
+		text = holder.text;
+	var dimensions_caption = dimensions.width + "x" + dimensions.height;
+	theme = (text ? extend(theme, {
+		text: text
+	}) : theme);
+
+	var fluid = document.createElement("table");
+	fluid.setAttribute("cellspacing",0)
+	fluid.setAttribute("cellpadding",0)
+	fluid.setAttribute("border",0)
+
+	var row = document.createElement("tr")
+		.appendChild(document.createElement("td")
+		.appendChild(document.createTextNode(theme.text)));
+
+	fluid.style.backgroundColor = theme.background;
+	fluid.style.color = theme.foreground;
+	fluid.className = el.className + " holderjs-fluid";
+	fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px");
+	fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
+	fluid.id = el.id;
+
+	var frag = document.createDocumentFragment(),
+		tbody = document.createElement("tbody"),
+		tr = document.createElement("tr"),
+		td = document.createElement("td");
+		tr.appendChild(td);
+		tbody.appendChild(tr);
+		frag.appendChild(tbody);
+	
+	if (theme.text) {
+		td.appendChild(document.createTextNode(theme.text))
+		fluid.appendChild(frag);
+	} else {
+		td.appendChild(document.createTextNode(dimensions_caption))
+		fluid.appendChild(frag);
+		fluid_images.push(fluid);
+		setTimeout(fluid_update, 0);
+	}
+	
+	el.parentNode.replaceChild(fluid, el);
+}
+
+function fluid_update() {
+	for (i in fluid_images) {
+		var el = fluid_images[i];
+		var label = el.getElementsByTagName("td")[0].firstChild;
+		label.data = el.offsetWidth + "x" + el.offsetHeight;
+	}
+}
+
+function parse_flags(flags, options) {
+
+	var ret = {
+		theme: settings.themes.gray
+	}, render = false;
+
+	for (sl = flags.length, j = 0; j < sl; j++) {
+		var flag = flags[j];
+		if (app.flags.dimensions.match(flag)) {
+			render = true;
+			ret.dimensions = app.flags.dimensions.output(flag);
+		} else if (app.flags.fluid.match(flag)) {
+			render = true;
+			ret.dimensions = app.flags.fluid.output(flag);
+			ret.fluid = true;
+		} else if (app.flags.colors.match(flag)) {
+			ret.theme = app.flags.colors.output(flag);
+		} else if (options.themes[flag]) {
+			//If a theme is specified, it will override custom colors
+			ret.theme = options.themes[flag];
+		} else if (app.flags.text.match(flag)) {
+			ret.text = app.flags.text.output(flag);
+		}
+	}
+
+	return render ? ret : false;
+
+};
+
+if (!canvas.getContext) {
+	fallback = true;
+} else {
+	if (canvas.toDataURL("image/png")
+		.indexOf("data:image/png") < 0) {
+		//Android doesn't support data URI
+		fallback = true;
+	} else {
+		var ctx = canvas.getContext("2d");
+	}
+}
+
+var fluid_images = [];
+
+var settings = {
+	domain: "holder.js",
+	images: "img",
+	elements: ".holderjs",
+	themes: {
+		"gray": {
+			background: "#eee",
+			foreground: "#aaa",
+			size: 12
+		},
+			"social": {
+			background: "#3a5a97",
+			foreground: "#fff",
+			size: 12
+		},
+			"industrial": {
+			background: "#434A52",
+			foreground: "#C2F200",
+			size: 12
+		}
+	},
+	stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;border-collapse:collapse;border:0;vertical-align:middle;margin:0}"
+};
+
+
+app.flags = {
+	dimensions: {
+		regex: /(\d+)x(\d+)/,
+		output: function (val) {
+			var exec = this.regex.exec(val);
+			return {
+				width: +exec[1],
+				height: +exec[2]
+			}
+		}
+	},
+	fluid: {
+		regex: /([0-9%]+)x([0-9%]+)/,
+		output: function (val) {
+			var exec = this.regex.exec(val);
+			return {
+				width: exec[1],
+				height: exec[2]
+			}
+		}
+	},
+	colors: {
+		regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
+		output: function (val) {
+			var exec = this.regex.exec(val);
+			return {
+				size: settings.themes.gray.size,
+				foreground: "#" + exec[2],
+				background: "#" + exec[1]
+			}
+		}
+	},
+	text: {
+		regex: /text\:(.*)/,
+		output: function (val) {
+			return this.regex.exec(val)[1];
+		}
+	}
+}
+
+for (var flag in app.flags) {
+	app.flags[flag].match = function (val) {
+		return val.match(this.regex)
+	}
+}
+
+app.add_theme = function (name, theme) {
+	name != null && theme != null && (settings.themes[name] = theme);
+	return app;
+};
+
+app.add_image = function (src, el) {
+	var node = selector(el);
+	if (node.length) {
+		for (var i = 0, l = node.length; i < l; i++) {
+			var img = document.createElement("img")
+			img.setAttribute("data-src", src);
+			node[i].appendChild(img);
+		}
+	}
+	return app;
+};
+
+app.run = function (o) {
+	var options = extend(settings, o),
+		images_nodes = selector(options.images),
+		elements = selector(options.elements),
+		preempted = true,
+		images = [];
+
+	for (i = 0, l = images_nodes.length; i < l; i++) images.push(images_nodes[i]);
+
+	var holdercss = document.createElement("style");
+	holdercss.type = "text/css";
+	holdercss.styleSheet ? holdercss.styleSheet.cssText = options.stylesheet : holdercss.textContent = options.stylesheet;
+	document.getElementsByTagName("head")[0].appendChild(holdercss);
+
+	var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
+
+	for (var l = elements.length, i = 0; i < l; i++) {
+		var src = window.getComputedStyle(elements[i], null)
+			.getPropertyValue("background-image");
+		var flags = src.match(cssregex);
+		if (flags) {
+			var holder = parse_flags(flags[1].split("/"), options);
+			if (holder) {
+				render("background", elements[i], holder, src);
+			}
+		}
+	}
+
+	for (var l = images.length, i = 0; i < l; i++) {
+		var src = images[i].getAttribute("src") || images[i].getAttribute("data-src");
+		if (src != null && src.indexOf(options.domain) >= 0) {
+			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
+				.split("/"), options);
+			if (holder) {
+				if (holder.fluid) {
+					fluid(images[i], holder, src);
+				} else {
+					render("image", images[i], holder, src);
+				}
+			}
+		}
+	}
+	return app;
+};
+
+contentLoaded(win, function () {
+	if (window.addEventListener) {
+		window.addEventListener("resize", fluid_update, false);
+		window.addEventListener("orientationchange", fluid_update, false);
+	} else {
+		window.attachEvent("onresize", fluid_update)
+	}
+	preempted || app.run();
+});
+
+})(Holder, window);
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -195,7 +195,7 @@


          <h2 id="abbreviations">Abbreviations</h2>
-          <p>Stylized implemenation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>

          <h3><code>&lt;abbr&gt;</code></h3>
          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
@@ -229,7 +229,7 @@
            </address>
            <address>
              <strong>Full Name</strong><br>
-              <a href="mailto:#">first.last@gmail.com</a>
+              <a href="mailto:#">first.last@example.com</a>
            </address>
          </div>
 <pre class="prettyprint linenums">
@@ -242,7 +242,7 @@

 &lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
-  &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
+  &lt;a href="mailto:#"&gt;first.last@example.com&lt;/a&gt;
 &lt;/address&gt;
 </pre>

@@ -353,7 +353,7 @@
 </pre>

        <h3>Unstyled</h3>
-        <p>A list of items with no <code>list-style</code> or additional left padding.</p>
+        <p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
        <div class="bs-docs-example">
          <ul class="unstyled">
            <li>Lorem ipsum dolor sit amet</li>
@@ -377,6 +377,21 @@
 &lt;ul class="unstyled"&gt;
  &lt;li&gt;...&lt;/li&gt;
 &lt;/ul&gt;
+</pre>
+
+        <h3>Inline</h3>
+        <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
+        <div class="bs-docs-example">
+          <ul class="inline">
+            <li>Lorem ipsum</li>
+            <li>Phasellus iaculis</li>
+            <li>Nulla volutpat</li>
+          </ul>
+        </div>
+<pre class="prettyprint linenums">
+&lt;ul class="inline"&gt;
+  &lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
 </pre>

        <h3>Description</h3>
@@ -1311,6 +1326,54 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
    &lt;/ul&gt;
  &lt;/div&gt;
 &lt;/div&gt;
+</pre>
+
+          <h4>Segmented dropdown groups</h4>
+          <form class="bs-docs-example">
+            <div class="input-prepend">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Separated link</a></li>
+                </ul>
+              </div>
+              <input type="text">
+            </div>
+            <div class="input-append">
+              <input type="text">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Separated link</a></li>
+                </ul>
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;form&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+    &lt;input type="text"&gt;
+  &lt;/div&gt;
+  &lt;div class="input-append"&gt;
+    &lt;input type="text"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
 </pre>

          <h4>Search form</h4>
@@ -1419,7 +1482,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 &lt;/select&gt;
 </pre>

-          <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
+          <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls">
              <input class="span5" type="text" placeholder=".span5">
@@ -1601,6 +1664,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
          </form>
 <pre class="prettyprint linenums">
 &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+</pre>
+
+          <h3>Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
 </pre>

          <h3>Disabled inputs</h3>
@@ -1944,9 +2016,9 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin

          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
          <div class="bs-docs-example bs-docs-example-images">
-            <img src="http://placehold.it/140x140" class="img-rounded">
-            <img src="http://placehold.it/140x140" class="img-circle">
-            <img src="http://placehold.it/140x140" class="img-polaroid">
+            <img data-src="holder.js/140x140" class="img-rounded">
+            <img data-src="holder.js/140x140" class="img-circle">
+            <img data-src="holder.js/140x140" class="img-polaroid">
          </div>
 <pre class="prettyprint linenums">
 &lt;img src="..." class="img-rounded"&gt;
@@ -2197,15 +2269,18 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 &lt;/div&gt;
 </pre>

-          <h5>Small button</h5>
+          <h5>Button sizes</h5>
          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+            <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
          </div>
 <pre class="prettyprint linenums">
-&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
+&lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
 </pre>

-
          <h4>Navigation</h4>
          <div class="bs-docs-example">
            <div class="well" style="padding: 8px 0; margin-bottom: 0;">
@@ -2468,7 +2543,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -2491,7 +2565,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -2508,6 +2581,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/components.html
+++ b/docs/components.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -166,12 +166,12 @@

          <h3>Sub menus on dropdowns</h3>
          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
-          <div class="bs-docs-example" style="min-height: 180px;">
+          <div class="bs-docs-example bs-docs-example-submenus">

            <div class="pull-left">
              <p class="muted">Default</p>
              <div class="dropdown clearfix">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">Action</a></li>
                  <li><a tabindex="-1" href="#">Another action</a></li>
                  <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -190,10 +190,10 @@
              </div>
            </div>

-            <div class="pull-left" style="margin-left: 20px;">
+            <div class="pull-left">
              <p class="muted">Dropup</p>
              <div class="dropup">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">Action</a></li>
                  <li><a tabindex="-1" href="#">Another action</a></li>
                  <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -212,10 +212,10 @@
              </div>
            </div>

-            <div class="pull-left" style="margin-left: 20px;">
+            <div class="pull-left">
              <p class="muted">Left submenu</p>
              <div class="dropdown">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">Action</a></li>
                  <li><a tabindex="-1" href="#">Another action</a></li>
                  <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -1893,6 +1893,9 @@
            </tbody>
          </table>

+          <h3>Easily collapsible</h3>
+          <p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+
        </section>


@@ -1955,22 +1958,22 @@
            <ul class="thumbnails">
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
            </ul>
@@ -1982,7 +1985,7 @@
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <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>
@@ -1992,7 +1995,7 @@
              </li>
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <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>
@@ -2002,7 +2005,7 @@
              </li>
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <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>
@@ -2028,7 +2031,7 @@
 &lt;ul class="thumbnails"&gt;
  &lt;li class="span4"&gt;
    &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;img data-src="holder.js/300x200" alt=""&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  ...
@@ -2039,7 +2042,7 @@
 &lt;ul class="thumbnails"&gt;
  &lt;li class="span4"&gt;
    &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;img data-src="holder.js/300x200" alt=""&gt;
      &lt;h3&gt;Thumbnail label&lt;/h3&gt;
      &lt;p&gt;Thumbnail caption...&lt;/p&gt;
    &lt;/div&gt;
@@ -2053,27 +2056,27 @@
          <ul class="thumbnails">
            <li class="span4">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/360x270" alt="">
+                <img data-src="holder.js/360x270" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/260x120" alt="">
+                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/160x120" alt="">
+                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/260x120" alt="">
+                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/160x120" alt="">
+                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
          </ul>
@@ -2100,16 +2103,16 @@
          </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
+  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
  &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
 &lt;/div&gt;
 </pre>

          <h3>Dismiss buttons</h3>
          <p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.</p>
-          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;</pre>
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;</pre>
          <p>Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.</p>
-          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;</pre>

          <h3>Dismiss alerts via JavaScript</h3>
          <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
@@ -2129,7 +2132,7 @@
          </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
+  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
  &lt;h4&gt;Warning!&lt;/h4&gt;
  Best check yo self, you're not...
 &lt;/div&gt;
@@ -2365,7 +2368,7 @@
          <div class="bs-docs-example">
            <div class="media">
              <a class="pull-left" href="#">
-                <img class="media-object" src="http://placehold.it/64x64">
+                <img class="media-object" data-src="holder.js/64x64">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
@@ -2374,14 +2377,14 @@
            </div>
            <div class="media">
              <a class="pull-left" href="#">
-                <img class="media-object" src="http://placehold.it/64x64">
+                <img class="media-object" data-src="holder.js/64x64">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                <div class="media">
                  <a class="pull-left" href="#">
-                    <img class="media-object" src="http://placehold.it/64x64">
+                    <img class="media-object" data-src="holder.js/64x64">
                  </a>
                  <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>
@@ -2394,7 +2397,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="media"&gt;
  &lt;a class="pull-left" href="#"&gt;
-    &lt;img class="media-object" src="http://placehold.it/64x64"&gt;
+    &lt;img class="media-object" data-src="holder.js/64x64"&gt;
  &lt;/a&gt;
  &lt;div class="media-body"&gt;
    &lt;h4 class="media-heading"&gt;Media heading&lt;/h4&gt;
@@ -2418,7 +2421,7 @@
            <ul class="media-list">
              <li class="media">
                <a class="pull-left" href="#">
-                  <img class="media-object" src="http://placehold.it/64x64">
+                  <img class="media-object" data-src="holder.js/64x64">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
@@ -2426,7 +2429,7 @@
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#">
-                      <img class="media-object" src="http://placehold.it/64x64">
+                      <img class="media-object" data-src="holder.js/64x64">
                    </a>
                    <div class="media-body">
                      <h4 class="media-heading">Nested media heading</h4>
@@ -2434,7 +2437,7 @@
                      <!-- Nested media object -->
                      <div class="media">
                        <a class="pull-left" href="#">
-                          <img class="media-object" src="http://placehold.it/64x64">
+                          <img class="media-object" data-src="holder.js/64x64">
                        </a>
                        <div class="media-body">
                          <h4 class="media-heading">Nested media heading</h4>
@@ -2446,7 +2449,7 @@
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#">
-                      <img class="media-object" src="http://placehold.it/64x64">
+                      <img class="media-object" data-src="holder.js/64x64">
                    </a>
                    <div class="media-body">
                      <h4 class="media-heading">Nested media heading</h4>
@@ -2457,7 +2460,7 @@
              </li>
              <li class="media">
                <a class="pull-right" href="#">
-                  <img class="media-object" src="http://placehold.it/64x64">
+                  <img class="media-object" data-src="holder.js/64x64">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
@@ -2470,7 +2473,7 @@
 &lt;ul class="media-list"&gt;
  &lt;li class="media"&gt;
    &lt;a class="pull-left" href="#"&gt;
-      &lt;img class="media-object" src="http://placehold.it/64x64"&gt;
+      &lt;img class="media-object" data-src="holder.js/64x64"&gt;
    &lt;/a&gt;
    &lt;div class="media-body"&gt;
      &lt;h4 class="media-heading"&gt;Media heading&lt;/h4&gt;
@@ -2612,7 +2615,6 @@ class="clearfix"
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -2635,7 +2637,6 @@ class="clearfix"
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -2652,6 +2653,8 @@ class="clearfix"
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -395,7 +395,7 @@
                <label>@btnPrimaryBackground</label>
                <input type="text" class="span3" placeholder="@linkColor">
                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%);">
+                <input type="text" class="span3" placeholder="darken(@white, 10%)">

              </div><!-- /span -->
              <div class="span3">
@@ -495,7 +495,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -518,7 +517,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -535,6 +533,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -28,11 +28,17 @@

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
-      position: relative;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
+    .navbar-wrapper .navbar {
+
+    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
@@ -71,24 +77,26 @@
    }

    .carousel .container {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      position: relative;
+      z-index: 10;
    }

    .carousel-control {
+      height: 80px;
+      margin-top: 0;
+      font-size: 120px;
+      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
-      font-size: 120px;
-      margin-top: 0;
-      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
+      position: absolute;
+      top: 0;
+      left: 0;
      min-width: 100%;
      height: 500px;
    }
@@ -98,7 +106,7 @@
      position: static;
      max-width: 550px;
      padding: 0 20px;
-      margin-bottom: 100px;
+      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
@@ -219,7 +227,7 @@
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
-        margin-bottom: 40px;
+        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
@@ -250,11 +258,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
@@ -263,43 +271,45 @@

    <!-- NAVBAR
    ================================================== -->
-    <!-- Wrap the .navbar in .container to center it on the page and provide easy way to target it with .navbar-wrapper. -->
-    <div class="container navbar-wrapper">
+    <div class="navbar-wrapper">
+      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+      <div class="container">

-      <div class="navbar navbar-inverse">
-        <div class="navbar-inner">
-          <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </a>
-          <a class="brand" href="#">Project name</a>
-          <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
-          <div class="nav-collapse collapse">
-            <ul class="nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
-              <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li 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>
-          </div><!--/.nav-collapse -->
-        </div><!-- /.navbar-inner -->
-      </div><!-- /.navbar -->
+        <div class="navbar navbar-inverse">
+          <div class="navbar-inner">
+            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </a>
+            <a class="brand" href="#">Project name</a>
+            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
+            <div class="nav-collapse collapse">
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+                <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a href="#">Action</a></li>
+                    <li><a href="#">Another action</a></li>
+                    <li><a href="#">Something else here</a></li>
+                    <li class="divider"></li>
+                    <li 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>
+            </div><!--/.nav-collapse -->
+          </div><!-- /.navbar-inner -->
+        </div><!-- /.navbar -->

-    </div><!-- /.container -->
+      </div> <!-- /.container -->
+    </div><!-- /.navbar-wrapper -->



@@ -353,19 +363,19 @@
      <!-- Three columns of text below the carousel -->
      <div class="row">
        <div class="span4">
-          <img class="img-circle" src="http://placehold.it/140x140">
+          <img class="img-circle" data-src="holder.js/140x140">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
-          <img class="img-circle" src="http://placehold.it/140x140">
+          <img class="img-circle" data-src="holder.js/140x140">
          <h2>Heading</h2>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
-          <img class="img-circle" src="http://placehold.it/140x140">
+          <img class="img-circle" data-src="holder.js/140x140">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
--- a/docs/examples/fluid.html
+++ b/docs/examples/fluid.html
@@ -26,11 +26,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/hero.html
+++ b/docs/examples/hero.html
@@ -23,11 +23,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/marketing-alternate.html
+++ b/docs/examples/marketing-alternate.html
@@ -86,11 +86,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/marketing-narrow.html
+++ b/docs/examples/marketing-narrow.html
@@ -54,11 +54,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/signin.html
+++ b/docs/examples/signin.html
@@ -50,11 +50,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/starter-template.html
+++ b/docs/examples/starter-template.html
@@ -22,11 +22,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -71,11 +71,11 @@
    <![endif]-->

    <!-- Fav and touch icons -->
-    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -246,7 +246,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -269,7 +268,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -286,6 +284,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -324,7 +324,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -347,7 +346,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -364,6 +362,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/index.html
+++ b/docs/index.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -199,19 +199,19 @@

    <div class="row-fluid">
      <div class="span4">
-        <img src="assets/img/bs-docs-twitter-github.png">
+        <img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
        <h2>By nerds, for nerds.</h2>
        <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
      </div>
      <div class="span4">
-        <img src="assets/img/bs-docs-responsive-illustrations.png">
+        <img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
        <h2>Made for everyone.</h2>
        <p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
      </div>
      <div class="span4">
-        <img src="assets/img/bs-docs-bootstrap-features.png">
+        <img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
        <h2>Packed with features.</h2>
-        <p>A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
+        <p>A 12-column responsive <a href="./scaffolding.html#gridSystem">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
      </div>
    </div>

@@ -254,7 +254,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -277,7 +276,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -294,6 +292,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -138,9 +138,17 @@ $("#myModal").modal('show')                // initializes and invokes show immed
 </pre>
          <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>

+          <h3>No Conflict</h3>
+          <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances,  namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
+
+<pre class="prettyprint linenums">
+var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+</pre>
+
          <h3>Events</h3>
          <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-          <p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
+          <p>All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.</p>
 <pre class="prettyprint linenums">
 $('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // stops modal from being shown
@@ -185,7 +193,7 @@ $('#myModal').on('show', function (e) {
          <h3>Static example</h3>
          <p>A rendered modal with header, body, and set of actions in the footer.</p>
          <div class="bs-docs-example" style="background-color: #f5f5f5;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
+            <div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Modal header</h3>
@@ -511,7 +519,7 @@ $('#myModal').on('hidden', function () {

          <h3>Methods</h3>
          <h4>$().dropdown('toggle')</h4>
-          <p>A programatic api for toggling menus for a given navbar or tabbed navigation.</p>
+          <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
        </section>


@@ -640,7 +648,7 @@ $('[data-spy="scroll"]').each(function () {


          <h2>Example tabs</h2>
-          <p>Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.</p>
+          <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
          <div class="bs-docs-example">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
@@ -1128,7 +1136,7 @@ $('#my-alert').bind('closed', function () {
            <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>

            <h4>Stateful</h4>
-            <p>Add data-loading-text="Loading..." to use a loading state on a button.</p>
+            <p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
                Loading state
@@ -1137,14 +1145,14 @@ $('#my-alert').bind('closed', function () {
            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>

            <h4>Single toggle</h4>
-            <p>Add data-toggle="button" to activate toggling on a single button.</p>
+            <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
            </div>
-            <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>

            <h4>Checkbox</h4>
-            <p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
+            <p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <div class="btn-group" data-toggle="buttons-checkbox">
                <button type="button" class="btn btn-primary">Left</button>
@@ -1154,14 +1162,14 @@ $('#my-alert').bind('closed', function () {
            </div>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
-  &lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
 &lt;/div&gt;
 </pre>

            <h4>Radio</h4>
-            <p>Add data-toggle="buttons-radio" for radio style toggling on btn-group.</p>
+            <p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-primary">Left</button>
@@ -1171,9 +1179,9 @@ $('#my-alert').bind('closed', function () {
            </div>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group" data-toggle="buttons-radio"&gt;
-  &lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
 &lt;/div&gt;
 </pre>

@@ -1994,7 +2002,7 @@ $('[data-spy="affix"]').each(function () {
               <td>offset</td>
               <td>number | function | object</td>
               <td>10</td>
-               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
+               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
             </tr>
            </tbody>
          </table>
@@ -2013,7 +2021,6 @@ $('[data-spy="affix"]').each(function () {
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -2036,7 +2043,6 @@ $('[data-spy="affix"]').each(function () {
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -2053,6 +2059,8 @@ $('[data-spy="affix"]').each(function () {
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

  </head>

@@ -124,7 +124,7 @@
          <p>These styles can be found within <strong>scaffolding.less</strong>.</p>

          <h3>Reset via Normalize</h3>
-          <p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
+          <p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>

        </section>

@@ -302,13 +302,21 @@
 </pre>

          <h2>Fluid nesting</h2>
-          <p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
+          <p>Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.</p>
          <div class="row-fluid show-grid">
            <div class="span12">
              Fluid 12
              <div class="row-fluid show-grid">
                <div class="span6">
                  Fluid 6
+                  <div class="row-fluid show-grid">
+                    <div class="span6">
+                      Fluid 6
+                    </div>
+                    <div class="span6">
+                      Fluid 6
+                    </div>
+                  </div>
                </div>
                <div class="span6">
                  Fluid 6
@@ -321,7 +329,13 @@
  &lt;div class="span12"&gt;
    Fluid 12
    &lt;div class="row-fluid"&gt;
-      &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
+      &lt;div class="span6"&gt;
+        Fluid 6
+        &lt;div class="row-fluid"&gt;
+          &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
+          &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
      &lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
@@ -578,7 +592,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -601,7 +614,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -618,6 +630,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -19,11 +19,11 @@
    <![endif]-->

    <!-- Le fav and touch icons -->
-    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+                    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+                                   <link rel="shortcut icon" href="assets/ico/favicon.png">

    {{#production}}
    <script type="text/javascript">
@@ -89,7 +89,6 @@
    ================================================== -->
    <footer class="footer">
      <div class="container">
-        <p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
        <p>{{_i}}Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
        <p>{{_i}}Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.{{/i}}</p>
        <p>{{_i}}Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
@@ -112,7 +111,6 @@
    <!-- 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/jquery.js"></script>
-    <script src="assets/js/google-code-prettify/prettify.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>
@@ -129,6 +127,8 @@
    <script src="assets/js/bootstrap-inputmask.js"></script>
    <script src="assets/js/bootstrap-rowlink.js"></script>
    <script src="assets/js/bootstrap-fileupload.js"></script>
+    <script src="assets/js/holder/holder.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>

  </body>
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -130,7 +130,7 @@

          {{! Abbreviations }}
          <h2 id="abbreviations">{{_i}}Abbreviations{{/i}}</h2>
-          <p>{{_i}}Stylized implemenation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}</p>
+          <p>{{_i}}Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}</p>

          <h3><code>&lt;abbr&gt;</code></h3>
          <p>{{_i}}For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.{{/i}}</p>
@@ -165,7 +165,7 @@
            </address>
            <address>
              <strong>{{_i}}Full Name{{/i}}</strong><br>
-              <a href="mailto:#">{{_i}}first.last@gmail.com{{/i}}</a>
+              <a href="mailto:#">{{_i}}first.last@example.com{{/i}}</a>
            </address>
          </div>
 <pre class="prettyprint linenums">
@@ -178,7 +178,7 @@

 &lt;address&gt;
  &lt;strong&gt;{{_i}}Full Name{{/i}}&lt;/strong&gt;&lt;br&gt;
-  &lt;a href="mailto:#"&gt;{{_i}}first.last@gmail.com{{/i}}&lt;/a&gt;
+  &lt;a href="mailto:#"&gt;{{_i}}first.last@example.com{{/i}}&lt;/a&gt;
 &lt;/address&gt;
 </pre>

@@ -290,7 +290,7 @@
 </pre>

        <h3>{{_i}}Unstyled{{/i}}</h3>
-        <p>{{_i}}A list of items with no <code>list-style</code> or additional left padding.{{/i}}</p>
+        <p>{{_i}}Remove the default <code>list-style</code> and left padding on list items (immediate children only).{{/i}}</p>
        <div class="bs-docs-example">
          <ul class="unstyled">
            <li>Lorem ipsum dolor sit amet</li>
@@ -314,6 +314,21 @@
 &lt;ul class="unstyled"&gt;
  &lt;li&gt;...&lt;/li&gt;
 &lt;/ul&gt;
+</pre>
+
+        <h3>{{_i}}Inline{{/i}}</h3>
+        <p>{{_i}}Place all list items on a single line with <code>inline-block</code> and some light padding.{{/i}}</p>
+        <div class="bs-docs-example">
+          <ul class="inline">
+            <li>Lorem ipsum</li>
+            <li>Phasellus iaculis</li>
+            <li>Nulla volutpat</li>
+          </ul>
+        </div>
+<pre class="prettyprint linenums">
+&lt;ul class="inline"&gt;
+  &lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
 </pre>

        <h3>{{_i}}Description{{/i}}</h3>
@@ -1248,6 +1263,54 @@
    &lt;/ul&gt;
  &lt;/div&gt;
 &lt;/div&gt;
+</pre>
+
+          <h4>{{_i}}Segmented dropdown groups{{/i}}</h4>
+          <form class="bs-docs-example">
+            <div class="input-prepend">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                </ul>
+              </div>
+              <input type="text">
+            </div>
+            <div class="input-append">
+              <input type="text">
+              <div class="btn-group">
+                <button class="btn" tabindex="-1">Action</button>
+                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                  <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                </ul>
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;form&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+    &lt;input type="text"&gt;
+  &lt;/div&gt;
+  &lt;div class="input-append"&gt;
+    &lt;input type="text"&gt;
+    &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
 </pre>

          <h4>{{_i}}Search form{{/i}}</h4>
@@ -1356,7 +1419,7 @@
 &lt;/select&gt;
 </pre>

-          <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
+          <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.{{/i}}</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls">
              <input class="span5" type="text" placeholder=".span5">
@@ -1538,6 +1601,15 @@
          </form>
 <pre class="prettyprint linenums">
 &lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
+</pre>
+
+          <h3>{{_i}}Invalid inputs{{/i}}</h3>
+          <p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.{{/i}}</p>
+          <form class="bs-docs-example form-inline">
+            <input class="span3" type="email" placeholder="test@example.com" required>
+          </form>
+<pre class="prettyprint linenums">
+&lt;input class="span3" type="email" required&gt;
 </pre>

          <h3>{{_i}}Disabled inputs{{/i}}</h3>
@@ -1881,9 +1953,9 @@

          <p>{{_i}}Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.{{/i}}</p>
          <div class="bs-docs-example bs-docs-example-images">
-            <img src="http://placehold.it/140x140" class="img-rounded">
-            <img src="http://placehold.it/140x140" class="img-circle">
-            <img src="http://placehold.it/140x140" class="img-polaroid">
+            <img data-src="holder.js/140x140" class="img-rounded">
+            <img data-src="holder.js/140x140" class="img-circle">
+            <img data-src="holder.js/140x140" class="img-polaroid">
          </div>
 <pre class="prettyprint linenums">
 &lt;img src="..." class="img-rounded"&gt;
@@ -2134,15 +2206,18 @@
 &lt;/div&gt;
 </pre>

-          <h5>{{_i}}Small button{{/i}}</h5>
+          <h5>{{_i}}Button sizes{{/i}}</h5>
          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+            <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
+            <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
          </div>{{! /bs-docs-example }}
 <pre class="prettyprint linenums">
-&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
+&lt;a class="btn btn-large" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
+&lt;a class="btn btn-mini" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; Star&lt;/a&gt;
 </pre>

-
          <h4>{{_i}}Navigation{{/i}}</h4>
          <div class="bs-docs-example">
            <div class="well" style="padding: 8px 0; margin-bottom: 0;">
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -95,12 +95,12 @@

          <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
          <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
-          <div class="bs-docs-example" style="min-height: 180px;">
+          <div class="bs-docs-example bs-docs-example-submenus">

            <div class="pull-left">
              <p class="muted">Default</p>
              <div class="dropdown clearfix">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@@ -119,10 +119,10 @@
              </div>
            </div>{{! /.pull-left }}

-            <div class="pull-left" style="margin-left: 20px;">
+            <div class="pull-left">
              <p class="muted">Dropup</p>
              <div class="dropup">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@@ -141,10 +141,10 @@
              </div>
            </div>{{! /.pull-left }}

-            <div class="pull-left" style="margin-left: 20px;">
+            <div class="pull-left">
              <p class="muted">Left submenu</p>
              <div class="dropdown">
-                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                  <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
                  <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@@ -1822,6 +1822,9 @@
            </tbody>
          </table>

+          <h3>{{_i}}Easily collapsible{{/i}}</h3>
+          <p>{{_i}}For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.{{/i}}</p>
+
        </section>


@@ -1884,22 +1887,22 @@
            <ul class="thumbnails">
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
              <li class="span3">
                <a href="#" class="thumbnail">
-                  <img src="http://placehold.it/260x180" alt="">
+                  <img data-src="holder.js/260x180" alt="">
                </a>
              </li>
            </ul>
@@ -1911,7 +1914,7 @@
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>{{_i}}Thumbnail label{{/i}}</h3>
                    <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>
@@ -1921,7 +1924,7 @@
              </li>
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>{{_i}}Thumbnail label{{/i}}</h3>
                    <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>
@@ -1931,7 +1934,7 @@
              </li>
              <li class="span4">
                <div class="thumbnail">
-                  <img src="http://placehold.it/300x200" alt="">
+                  <img data-src="holder.js/300x200" alt="">
                  <div class="caption">
                    <h3>{{_i}}Thumbnail label{{/i}}</h3>
                    <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>
@@ -1957,7 +1960,7 @@
 &lt;ul class="thumbnails"&gt;
  &lt;li class="span4"&gt;
    &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;img data-src="holder.js/300x200" alt=""&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  ...
@@ -1968,7 +1971,7 @@
 &lt;ul class="thumbnails"&gt;
  &lt;li class="span4"&gt;
    &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;img data-src="holder.js/300x200" alt=""&gt;
      &lt;h3&gt;{{_i}}Thumbnail label{{/i}}&lt;/h3&gt;
      &lt;p&gt;{{_i}}Thumbnail caption...{{/i}}&lt;/p&gt;
    &lt;/div&gt;
@@ -1982,27 +1985,27 @@
          <ul class="thumbnails">
            <li class="span4">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/360x270" alt="">
+                <img data-src="holder.js/360x270" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/260x120" alt="">
+                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/160x120" alt="">
+                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
            <li class="span3">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/260x120" alt="">
+                <img data-src="holder.js/260x120" alt="">
              </a>
            </li>
            <li class="span2">
              <a href="#" class="thumbnail">
-                <img src="http://placehold.it/160x120" alt="">
+                <img data-src="holder.js/160x120" alt="">
              </a>
            </li>
          </ul>
@@ -2029,16 +2032,16 @@
          </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
+  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&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>

          <h3>{{_i}}Dismiss buttons{{/i}}</h3>
          <p>{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code>&lt;a&gt;</code> tag.{{/i}}</p>
-          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;</pre>
+          <pre class="prettyprint linenums">&lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;</pre>
          <p>{{_i}}Alternatively, you may use a <code>&lt;button&gt;</code> element with the data attribute, which we have opted to do for our docs. When using <code>&lt;button&gt;</code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
-          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;</pre>
+          <pre class="prettyprint linenums">&lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;</pre>

          <h3>{{_i}}Dismiss alerts via JavaScript{{/i}}</h3>
          <p>{{_i}}Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.{{/i}}</p>
@@ -2058,7 +2061,7 @@
          </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;button type="button" class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
+  &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
  &lt;h4&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
  {{_i}}Best check yo self, you're not...{{/i}}
 &lt;/div&gt;
@@ -2294,7 +2297,7 @@
          <div class="bs-docs-example">
            <div class="media">
              <a class="pull-left" href="#">
-                <img class="media-object" src="http://placehold.it/64x64">
+                <img class="media-object" data-src="holder.js/64x64">
              </a>
              <div class="media-body">
                <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
@@ -2303,14 +2306,14 @@
            </div>
            <div class="media">
              <a class="pull-left" href="#">
-                <img class="media-object" src="http://placehold.it/64x64">
+                <img class="media-object" data-src="holder.js/64x64">
              </a>
              <div class="media-body">
                <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                <div class="media">
                  <a class="pull-left" href="#">
-                    <img class="media-object" src="http://placehold.it/64x64">
+                    <img class="media-object" data-src="holder.js/64x64">
                  </a>
                  <div class="media-body">
                    <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
@@ -2323,7 +2326,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="media"&gt;
  &lt;a class="pull-left" href="#"&gt;
-    &lt;img class="media-object" src="http://placehold.it/64x64"&gt;
+    &lt;img class="media-object" data-src="holder.js/64x64"&gt;
  &lt;/a&gt;
  &lt;div class="media-body"&gt;
    &lt;h4 class="media-heading"&gt;{{_i}}Media heading{{/i}}&lt;/h4&gt;
@@ -2347,7 +2350,7 @@
            <ul class="media-list">
              <li class="media">
                <a class="pull-left" href="#">
-                  <img class="media-object" src="http://placehold.it/64x64">
+                  <img class="media-object" data-src="holder.js/64x64">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
@@ -2355,7 +2358,7 @@
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#">
-                      <img class="media-object" src="http://placehold.it/64x64">
+                      <img class="media-object" data-src="holder.js/64x64">
                    </a>
                    <div class="media-body">
                      <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
@@ -2363,7 +2366,7 @@
                      <!-- Nested media object -->
                      <div class="media">
                        <a class="pull-left" href="#">
-                          <img class="media-object" src="http://placehold.it/64x64">
+                          <img class="media-object" data-src="holder.js/64x64">
                        </a>
                        <div class="media-body">
                          <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
@@ -2375,7 +2378,7 @@
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#">
-                      <img class="media-object" src="http://placehold.it/64x64">
+                      <img class="media-object" data-src="holder.js/64x64">
                    </a>
                    <div class="media-body">
                      <h4 class="media-heading">{{_i}}Nested media heading{{/i}}</h4>
@@ -2386,7 +2389,7 @@
              </li>
              <li class="media">
                <a class="pull-right" href="#">
-                  <img class="media-object" src="http://placehold.it/64x64">
+                  <img class="media-object" data-src="holder.js/64x64">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
@@ -2399,7 +2402,7 @@
 &lt;ul class="media-list"&gt;
  &lt;li class="media"&gt;
    &lt;a class="pull-left" href="#"&gt;
-      &lt;img class="media-object" src="http://placehold.it/64x64"&gt;
+      &lt;img class="media-object" data-src="holder.js/64x64"&gt;
    &lt;/a&gt;
    &lt;div class="media-body"&gt;
      &lt;h4 class="media-heading"&gt;{{_i}}Media heading{{/i}}&lt;/h4&gt;
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -324,7 +324,7 @@
                <label>@btnPrimaryBackground</label>
                <input type="text" class="span3" placeholder="@linkColor">
                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%);">
+                <input type="text" class="span3" placeholder="darken(@white, 10%)">

              </div><!-- /span -->
              <div class="span3">
@@ -404,7 +404,7 @@
              </h1>
            </div>
            <div class="download-btn">
-              <a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download {{version}}']);"{{/production}}>Customize and Download</a>
+              <a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download {{version}}']);"{{/production}}>{{_i}}Customize and Download{{/i}}</a>
              <h4>{{_i}}What's included?{{/i}}</h4>
              <p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
            </div>
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -20,7 +20,7 @@
        <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>{{_i}}Extend{{/i}}</a>
      </li>
      <li>
-        {{_i}}Version {{/i}}{{version}}
+        {{_i}}Version{{/i}} {{version}}
      </li>
    </ul>
  </div>
@@ -128,19 +128,19 @@

    <div class="row-fluid">
      <div class="span4">
-        <img src="assets/img/bs-docs-twitter-github.png">
+        <img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
        <h2>{{_i}}By nerds, for nerds.{{/i}}</h2>
        <p>{{_i}}Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.{{/i}}</p>
      </div>
      <div class="span4">
-        <img src="assets/img/bs-docs-responsive-illustrations.png">
+        <img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
        <h2>{{_i}}Made for everyone.{{/i}}</h2>
        <p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
      </div>
      <div class="span4">
-        <img src="assets/img/bs-docs-bootstrap-features.png">
+        <img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
        <h2>{{_i}}Packed with features.{{/i}}</h2>
-        <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
+        <p>{{_i}}A 12-column responsive <a href="./scaffolding.html#gridSystem">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
      </div>
    </div>

--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -67,9 +67,17 @@ $("#myModal").modal('show')                // initializes and invokes show immed
 </pre>
          <p>{{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.{{/i}}</p>

+          <h3>{{_i}}No Conflict{{/i}}</h3>
+          <p>{{_i}}Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances,  namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.{{/i}}</p>
+
+<pre class="prettyprint linenums">
+var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+</pre>
+
          <h3>{{_i}}Events{{/i}}</h3>
          <p>{{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.{{/i}}</p>
-          <p>{{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}</p>
+          <p>{{_i}}All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.{{/i}}</p>
 <pre class="prettyprint linenums">
 $('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // stops modal from being shown
@@ -115,7 +123,7 @@ $('#myModal').on('show', function (e) {
          <h3>{{_i}}Static example{{/i}}</h3>
          <p>{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}</p>
          <div class="bs-docs-example" style="background-color: #f5f5f5;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
+            <div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>{{_i}}Modal header{{/i}}</h3>
@@ -441,7 +449,7 @@ $('#myModal').on('hidden', function () {

          <h3>{{_i}}Methods{{/i}}</h3>
          <h4>$().dropdown('toggle')</h4>
-          <p>{{_i}}A programatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}</p>
+          <p>{{_i}}A programmatic api for toggling menus for a given navbar or tabbed navigation.{{/i}}</p>
        </section>


@@ -570,7 +578,7 @@ $('[data-spy="scroll"]').each(function () {


          <h2>{{_i}}Example tabs{{/i}}</h2>
-          <p>{{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}</p>
+          <p>{{_i}}Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.{{/i}}</p>
          <div class="bs-docs-example">
            <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -1058,7 +1066,7 @@ $('#my-alert').bind('closed', function () {
            <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>

            <h4>{{_i}}Stateful{{/i}}</h4>
-            <p>{{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}</p>
+            <p>{{_i}}Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.{{/i}}</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
                {{_i}}Loading state{{/i}}
@@ -1067,14 +1075,14 @@ $('#my-alert').bind('closed', function () {
            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>

            <h4>{{_i}}Single toggle{{/i}}</h4>
-            <p>{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}</p>
+            <p>{{_i}}Add <code>data-toggle="button"</code> to activate toggling on a single button.{{/i}}</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <button type="button" class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
            </div>{{! /example }}
-            <pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
+            <pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>

            <h4>{{_i}}Checkbox{{/i}}</h4>
-            <p>{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}</p>
+            <p>{{_i}}Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.{{/i}}</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <div class="btn-group" data-toggle="buttons-checkbox">
                <button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
@@ -1084,14 +1092,14 @@ $('#my-alert').bind('closed', function () {
            </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
-  &lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
 &lt;/div&gt;
 </pre>

            <h4>{{_i}}Radio{{/i}}</h4>
-            <p>{{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}</p>
+            <p>{{_i}}Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.{{/i}}</p>
            <div class="bs-docs-example" style="padding-bottom: 24px;">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-primary">{{_i}}Left{{/i}}</button>
@@ -1101,9 +1109,9 @@ $('#my-alert').bind('closed', function () {
            </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;div class="btn-group" data-toggle="buttons-radio"&gt;
-  &lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
-  &lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
+  &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
 &lt;/div&gt;
 </pre>

@@ -1924,7 +1932,7 @@ $('[data-spy="affix"]').each(function () {
               <td>{{_i}}offset{{/i}}</td>
               <td>{{_i}}number | function | object{{/i}}</td>
               <td>{{_i}}10{{/i}}</td>
-               <td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}</td>
+               <td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}</td>
             </tr>
            </tbody>
          </table>
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -53,7 +53,7 @@
          <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>

          <h3>{{_i}}Reset via Normalize{{/i}}</h3>
-          <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
+          <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>

        </section>

@@ -231,13 +231,21 @@
 </pre>

          <h2>{{_i}}Fluid nesting{{/i}}</h2>
-          <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
+          <p>{{_i}}Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.{{/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 class="row-fluid show-grid">
+                    <div class="span6">
+                      {{_i}}Fluid 6{{/i}}
+                    </div>
+                    <div class="span6">
+                      {{_i}}Fluid 6{{/i}}
+                    </div>
+                  </div>
                </div>
                <div class="span6">
                  {{_i}}Fluid 6{{/i}}
@@ -250,7 +258,13 @@
  &lt;div class="span12"&gt;
    {{_i}}Fluid 12{{/i}}
    &lt;div class="row-fluid"&gt;
-      &lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
+      &lt;div class="span6"&gt;
+        {{_i}}Fluid 6{{/i}}
+        &lt;div class="row-fluid"&gt;
+          &lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
+          &lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
      &lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;