Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip

author: Ivan Khalopik <[email protected]> 2013-06-10 10:31:51 +0300
committer: Ivan Khalopik <[email protected]> 2013-06-10 10:31:51 +0300
commit: e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b (patch)
tree: 2d6f41184d19466d6f9fa016ba521260413435cb /docs
parent: 3285f4c3062f4a56eaed2461a3128a2e6a3ba9cc (diff)
parent: d74a9634b0cb21a712f5e805c7a21132dc9bee5e (diff)
download: bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.tar.xz
bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.zip
20 files changed, 878 insertions, 638 deletions
diff --git a/docs/_includes/nav-css.html b/docs/_includes/nav-css.html
index 437b2e3bd..534c9c2ed 100644
--- a/docs/_includes/nav-css.html
+++ b/docs/_includes/nav-css.html
@@ -12,7 +12,10 @@
 <li>
   <a href="#grid">Grid system</a>
   <ul class="nav">
-    <li><a href="#grid-example">Example usage</a></li>
+    <li><a href="#grid-options">Available options</a></li>
+    <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
+    <li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
+    <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
     <li><a href="#grid-offsetting">Offset columns</a></li>
     <li><a href="#grid-nesting">Nested columns</a></li>
     <li><a href="#grid-column-ordering">Column ordering</a></li>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index d7d49e1b6..68bcbf8d2 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -20,7 +20,7 @@
 
     <div class="container bs-docs-container">
       <div class="row">
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <div class="bs-sidebar">
             <ul class="nav bs-sidenav">
               {% if page.slug == "getting-started" %}
@@ -37,7 +37,7 @@
             </ul>
           </div>
         </div>
-        <div class="col col-lg-9">
+        <div class="col-lg-9">
           {{ content }}
         </div>
       </div>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 53dcf2edc..f9f1fb932 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -763,12 +763,54 @@ pre code {
   clear: both;
 }
 
+@media (min-width: 768px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
 .row .row {
   margin-right: -15px;
   margin-left: -15px;
 }
 
-.col {
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
   position: relative;
   float: left;
   width: 100%;
@@ -777,223 +819,243 @@ pre code {
   padding-left: 15px;
 }
 
-.col-sm-12 {
-  width: 100%;
+.col-1 {
+  width: 8.333333333333332%;
 }
 
-.col-sm-11 {
-  width: 91.66666666666666%;
+.col-2 {
+  width: 16.666666666666664%;
 }
 
-.col-sm-10 {
-  width: 83.33333333333334%;
+.col-3 {
+  width: 25%;
 }
 
-.col-sm-9 {
-  width: 75%;
+.col-4 {
+  width: 33.33333333333333%;
 }
 
-.col-sm-8 {
-  width: 66.66666666666666%;
+.col-5 {
+  width: 41.66666666666667%;
 }
 
-.col-sm-7 {
-  width: 58.333333333333336%;
+.col-6 {
+  width: 50%;
 }
 
-.col-sm-6 {
-  width: 50%;
+.col-7 {
+  width: 58.333333333333336%;
 }
 
-.col-sm-5 {
-  width: 41.66666666666667%;
+.col-8 {
+  width: 66.66666666666666%;
 }
 
-.col-sm-4 {
-  width: 33.33333333333333%;
+.col-9 {
+  width: 75%;
 }
 
-.col-sm-3 {
-  width: 25%;
+.col-10 {
+  width: 83.33333333333334%;
 }
 
-.col-sm-2 {
-  width: 16.666666666666664%;
+.col-11 {
+  width: 91.66666666666666%;
 }
 
-.col-sm-1 {
-  width: 8.333333333333332%;
+.col-12 {
+  width: 100%;
 }
 
-@media screen and (min-width: 768px) {
-  .col-lg-12 {
-    width: 100%;
+@media (min-width: 768px) {
+  .container {
+    max-width: 728px;
   }
-  .col-lg-11 {
-    width: 91.66666666666666%;
+  .col-sm-1 {
+    width: 8.333333333333332%;
   }
-  .col-lg-10 {
-    width: 83.33333333333334%;
+  .col-sm-2 {
+    width: 16.666666666666664%;
   }
-  .col-lg-9 {
-    width: 75%;
+  .col-sm-3 {
+    width: 25%;
   }
-  .col-lg-8 {
-    width: 66.66666666666666%;
+  .col-sm-4 {
+    width: 33.33333333333333%;
   }
-  .col-lg-7 {
-    width: 58.333333333333336%;
+  .col-sm-5 {
+    width: 41.66666666666667%;
   }
-  .col-lg-6 {
+  .col-sm-6 {
     width: 50%;
   }
-  .col-lg-5 {
-    width: 41.66666666666667%;
+  .col-sm-7 {
+    width: 58.333333333333336%;
   }
-  .col-lg-4 {
-    width: 33.33333333333333%;
+  .col-sm-8 {
+    width: 66.66666666666666%;
   }
-  .col-lg-3 {
-    width: 25%;
+  .col-sm-9 {
+    width: 75%;
   }
-  .col-lg-2 {
-    width: 16.666666666666664%;
+  .col-sm-10 {
+    width: 83.33333333333334%;
   }
-  .col-lg-1 {
-    width: 8.333333333333332%;
+  .col-sm-11 {
+    width: 91.66666666666666%;
   }
-  .col-offset-12 {
-    margin-left: 100%;
+  .col-sm-12 {
+    width: 100%;
   }
-  .col-offset-11 {
-    margin-left: 91.66666666666666%;
+  .col-offset-1 {
+    margin-left: 8.333333333333332%;
   }
-  .col-offset-10 {
-    margin-left: 83.33333333333334%;
+  .col-offset-2 {
+    margin-left: 16.666666666666664%;
   }
-  .col-offset-9 {
-    margin-left: 75%;
+  .col-offset-3 {
+    margin-left: 25%;
   }
-  .col-offset-8 {
-    margin-left: 66.66666666666666%;
+  .col-offset-4 {
+    margin-left: 33.33333333333333%;
   }
-  .col-offset-7 {
-    margin-left: 58.333333333333336%;
+  .col-offset-5 {
+    margin-left: 41.66666666666667%;
   }
   .col-offset-6 {
     margin-left: 50%;
   }
-  .col-offset-5 {
-    margin-left: 41.66666666666667%;
-  }
-  .col-offset-4 {
-    margin-left: 33.33333333333333%;
+  .col-offset-7 {
+    margin-left: 58.333333333333336%;
   }
-  .col-offset-3 {
-    margin-left: 25%;
+  .col-offset-8 {
+    margin-left: 66.66666666666666%;
   }
-  .col-offset-2 {
-    margin-left: 16.666666666666664%;
+  .col-offset-9 {
+    margin-left: 75%;
   }
-  .col-offset-1 {
-    margin-left: 8.333333333333332%;
+  .col-offset-10 {
+    margin-left: 83.33333333333334%;
   }
-  .col-push-12 {
-    left: 100%;
+  .col-offset-11 {
+    margin-left: 91.66666666666666%;
   }
-  .col-push-11 {
-    left: 91.66666666666666%;
+  .col-push-1 {
+    left: 8.333333333333332%;
   }
-  .col-push-10 {
-    left: 83.33333333333334%;
+  .col-push-2 {
+    left: 16.666666666666664%;
   }
-  .col-push-9 {
-    left: 75%;
+  .col-push-3 {
+    left: 25%;
   }
-  .col-push-8 {
-    left: 66.66666666666666%;
+  .col-push-4 {
+    left: 33.33333333333333%;
   }
-  .col-push-7 {
-    left: 58.333333333333336%;
+  .col-push-5 {
+    left: 41.66666666666667%;
   }
   .col-push-6 {
     left: 50%;
   }
-  .col-push-5 {
-    left: 41.66666666666667%;
-  }
-  .col-push-4 {
-    left: 33.33333333333333%;
+  .col-push-7 {
+    left: 58.333333333333336%;
   }
-  .col-push-3 {
-    left: 25%;
+  .col-push-8 {
+    left: 66.66666666666666%;
   }
-  .col-push-2 {
-    left: 16.666666666666664%;
+  .col-push-9 {
+    left: 75%;
   }
-  .col-push-1 {
-    left: 8.333333333333332%;
+  .col-push-10 {
+    left: 83.33333333333334%;
   }
-  .col-pull-12 {
-    right: 100%;
+  .col-push-11 {
+    left: 91.66666666666666%;
   }
-  .col-pull-11 {
-    right: 91.66666666666666%;
+  .col-pull-1 {
+    right: 8.333333333333332%;
   }
-  .col-pull-10 {
-    right: 83.33333333333334%;
+  .col-pull-2 {
+    right: 16.666666666666664%;
   }
-  .col-pull-9 {
-    right: 75%;
+  .col-pull-3 {
+    right: 25%;
   }
-  .col-pull-8 {
-    right: 66.66666666666666%;
+  .col-pull-4 {
+    right: 33.33333333333333%;
   }
-  .col-pull-7 {
-    right: 58.333333333333336%;
+  .col-pull-5 {
+    right: 41.66666666666667%;
   }
   .col-pull-6 {
     right: 50%;
   }
-  .col-pull-5 {
-    right: 41.66666666666667%;
-  }
-  .col-pull-4 {
-    right: 33.33333333333333%;
+  .col-pull-7 {
+    right: 58.333333333333336%;
   }
-  .col-pull-3 {
-    right: 25%;
+  .col-pull-8 {
+    right: 66.66666666666666%;
   }
-  .col-pull-2 {
-    right: 16.666666666666664%;
+  .col-pull-9 {
+    right: 75%;
   }
-  .col-pull-1 {
-    right: 8.333333333333332%;
+  .col-pull-10 {
+    right: 83.33333333333334%;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
+  .col-pull-11 {
+    right: 91.66666666666666%;
   }
 }
 
-@media screen and (min-width: 992px) {
+@media (min-width: 992px) {
   .container {
     max-width: 940px;
   }
+  .col-lg-1 {
+    width: 8.333333333333332%;
+  }
+  .col-lg-2 {
+    width: 16.666666666666664%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-4 {
+    width: 33.33333333333333%;
+  }
+  .col-lg-5 {
+    width: 41.66666666666667%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-7 {
+    width: 58.333333333333336%;
+  }
+  .col-lg-8 {
+    width: 66.66666666666666%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-10 {
+    width: 83.33333333333334%;
+  }
+  .col-lg-11 {
+    width: 91.66666666666666%;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
 }
 
-@media screen and (min-width: 1200px) {
+@media (min-width: 1200px) {
   .container {
     max-width: 1170px;
   }
 }
 
-/*[class*="col-span-"].pull-right {
-  float: right;
-}*/
-
 table {
   max-width: 100%;
   background-color: transparent;
@@ -1488,6 +1550,12 @@ fieldset[disabled] input[type="checkbox"] {
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
 }
 
+.has-warning .input-group-addon {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #c09853;
+}
+
 .has-error .control-label {
   color: #b94a48;
 }
@@ -1505,6 +1573,12 @@ fieldset[disabled] input[type="checkbox"] {
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
 }
 
+.has-error .input-group-addon {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #b94a48;
+}
+
 .has-success .control-label {
   color: #468847;
 }
@@ -1522,6 +1596,12 @@ fieldset[disabled] input[type="checkbox"] {
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
 }
 
+.has-success .input-group-addon {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #468847;
+}
+
 input:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
@@ -2717,10 +2797,10 @@ input[type="button"].btn-block {
   color: #ffffff;
   text-decoration: none;
   background-color: #357ebd;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
-  background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
-  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
-  background-image: linear-gradient(to bottom, #428bca, #357ebd);
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
+  background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
+  background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
 }
@@ -2731,10 +2811,10 @@ input[type="button"].btn-block {
   color: #ffffff;
   text-decoration: none;
   background-color: #357ebd;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
-  background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
-  background-image: -moz-linear-gradient(top, #428bca, #357ebd);
-  background-image: linear-gradient(to bottom, #428bca, #357ebd);
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
+  background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
+  background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
+  background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
   background-repeat: repeat-x;
   outline: 0;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@@ -4895,10 +4975,10 @@ a.list-group-item.active > .badge,
 .carousel-control.left {
   background-color: rgba(0, 0, 0, 0.0001);
   background-color: transparent;
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
+  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 }
@@ -4908,10 +4988,10 @@ a.list-group-item.active > .badge,
   left: auto;
   background-color: rgba(0, 0, 0, 0.5);
   background-color: transparent;
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
+  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
+  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 }
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 305247251..db1cb1778 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -246,14 +246,14 @@ body {
 .show-grid {
   margin-bottom: 15px;
 }
-.show-grid .col {
+.show-grid [class^="col-"] {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
-}
-.show-grid .col:hover {
-  background-color: #ddd;
+  /* Todo: reconcile these */
+  background-color: rgba(185,74,72,.15);
+  border: 1px solid rgba(185,74,72,.2);
 }
 
 
@@ -520,6 +520,7 @@ body {
 
 /* Utility classes table
 ------------------------- */
+.bs-table th small,
 .responsive-utilities th small {
   display: block;
   font-weight: normal;
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 30a7c0d6e..db86701fb 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -9,7 +9,7 @@
     var $window = $(window)
 
     // Disable certain links in docs
-    $('section [href^=#]').click(function (e) {
+    $('[href=#]').click(function (e) {
       e.preventDefault()
     })
 
@@ -27,14 +27,6 @@
       $('.bs-top').affix()
     }, 100)
 
-    // add tipsies to grid for scaffolding
-    if ($('#grid-system').length) {
-      $('#grid-system').tooltip({
-          selector: '.show-grid > [class*="span"]'
-        , title: function () { return $(this).width() + 'px' }
-      })
-    }
-
     // tooltip demo
     $('.tooltip-demo').tooltip({
       selector: "a[data-toggle=tooltip]"
diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
index b7082dc21..744b27676 100644
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -434,7 +434,7 @@
   // =================
 
   $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
-    var $this = $(this), href
+    var $this   = $(this), href
     var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
     var options = $.extend({}, $target.data(), $this.data())
     var slideIndex
@@ -442,12 +442,19 @@
     $target.carousel(options)
 
     if (slideIndex = $this.attr('data-slide-to')) {
-      $target.data('bs-carousel').pause().to(slideIndex).cycle()
+      $target.data('bs.carousel').pause().to(slideIndex).cycle()
     }
 
     e.preventDefault()
   })
 
+  $(window).on('load', function () {
+    $('[data-ride="carousel"]').each(function () {
+      var $carousel = $(this)
+      $carousel.carousel($carousel.data())
+    })
+  })
+
 }(window.jQuery);
 /* ========================================================================
  * Bootstrap: collapse.js v3.0.0
@@ -865,18 +872,18 @@
   Modal.prototype.enforceFocus = function () {
     $(document)
       .off('focusin.bs.modal') // guard against infinite focus loop
-      .on('focusin.bs.modal', function (e) {
-      if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
-        this.$element.focus()
-      }
-    }, this)
+      .on('focusin.bs.modal', $.proxy(function (e) {
+        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
+          this.$element.focus()
+        }
+      }, this))
   }
 
   Modal.prototype.escape = function () {
     if (this.isShown && this.options.keyboard) {
-      this.$element.on('keyup.dismiss.bs.modal', function ( e ) {
+      this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
         e.which == 27 && this.hide()
-      }, this)
+      }, this))
     } else if (!this.isShown) {
       this.$element.off('keyup.dismiss.bs.modal')
     }
@@ -1093,7 +1100,7 @@
     return options
   }
 
-  Tooltip.prototype.enter = function (e) {
+  Tooltip.prototype.enter = function (obj) {
     var defaults = this.getDefaults()
     var options  = {}
 
@@ -1101,26 +1108,29 @@
       if (defaults[key] != value) options[key] = value
     })
 
-    var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type)
+    var self = obj instanceof this.constructor ?
+      obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
 
     if (!self.options.delay || !self.options.delay.show) return self.show()
 
     clearTimeout(this.timeout)
 
     self.hoverState = 'in'
-    this.timeout    = setTimeout(function() {
+    this.timeout    = setTimeout(function () {
       if (self.hoverState == 'in') self.show()
     }, self.options.delay.show)
   }
 
-  Tooltip.prototype.leave = function (e) {
-    var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type)
+  Tooltip.prototype.leave = function (obj) {
+    var self = obj instanceof this.constructor ?
+      obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
+
+    clearTimeout(this.timeout)
 
-    if (this.timeout) clearTimeout(this.timeout)
     if (!self.options.delay || !self.options.delay.hide) return self.hide()
 
     self.hoverState = 'out'
-    this.timeout    = setTimeout(function() {
+    this.timeout    = setTimeout(function () {
       if (self.hoverState == 'out') self.hide()
     }, self.options.delay.hide)
   }
@@ -1317,7 +1327,7 @@
 
   Tooltip.prototype.toggle = function (e) {
     var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
-    self.tip().hasClass('in') ? self.hide() : self.show()
+    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
   }
 
   Tooltip.prototype.destroy = function () {
diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js
index 9b5d5dc9f..8703c8ae8 100644
--- a/docs/assets/js/bootstrap.min.js
+++ b/docs/assets/js/bootstrap.min.js
@@ -3,4 +3,4 @@
 * Copyright 2012 Twitter, Inc.
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 */
-+function(e){"use strict";function t(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var n in t)if(e.style[n]!==undefined)return{end:t[n]}}e(function(){e.support.transition=t()})}(window.jQuery),+function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed.bs.alert").remove()}var n=e(this),r=n.attr("data-target");r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));var i=e(r);t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close.bs.alert"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("bs.alert");i||r.data("bs.alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.bs.alert.data-api",t,n.prototype.close)}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r)};t.DEFAULTS={loadingText:"loading..."},t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.is("input")?"val":"html",i=n.data();e+="Text",i.resetText||n.data("resetText",n[r]()),n[r](i[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("bs.button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.bs.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),+function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.paused=this.sliding=this.interval=this.$active=this.$items=null,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.DEFAULTS={interval:5e3,pause:"hover"},t.prototype.cycle=function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},t.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},t.prototype.to=function(t){var n=this,r=this.getActiveIndex();if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){n.to(t)}):r==t?this.pause().cycle():this.slide(t>r?"next":"prev",e(this.$items[t]))},t.prototype.pause=function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},t.prototype.next=function(){if(this.sliding)return;return this.slide("next")},t.prototype.prev=function(){if(this.sliding)return;return this.slide("prev")},t.prototype.slide=function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();var f=e.Event("slide.bs.carousel",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("bs.carousel"),s=e.extend({},t.DEFAULTS,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("bs.carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("bs-carousel").pause().to(o).cycle(),t.preventDefault()})}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r),this.transitioning=null,this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.DEFAULTS={toggle:!0},t.prototype.dimension=function(){var e=this.$element.hasClass("width");return e?"width":"height"},t.prototype.show=function(){if(this.transitioning||this.$element.hasClass("in"))return;var t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){var i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show.bs.collapse"),"shown.bs.collapse"),e.support.transition&&this.$element[t](this.$element[0][n])},t.prototype.hide=function(){if(this.transitioning||!this.$element.hasClass("in"))return;var t=this.dimension();this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide.bs.collapse"),"hidden"),this.$element[t](0)},t.prototype.reset=function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},t.prototype.transition=function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},t.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},t.DEFAULTS,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),+function(e){"use strict";function i(){e(t).remove(),e(n).each(function(t){var n=s(e(this));if(!n.hasClass("open"))return;n.trigger(t=e.Event("hide.bs.dropdown"));if(t.isDefaultPrevented())return;n.removeClass("open").trigger("hidden.bs.dropdown")})}function s(t){var n=t.attr("data-target");n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,""));var r=n&&e(n);return r&&r.length?r:t.parent()}var t=".dropdown-backdrop",n="[data-toggle=dropdown]",r=function(t){var n=e(t).on("click.bs.dropdown",this.toggle)};r.prototype.toggle=function(t){var n=e(this);if(n.is(".disabled, :disabled"))return;var r=s(n),o=r.hasClass("open");i();if(!o){"ontouchstart"in document.documentElement&&e('<div class="dropdown-backdrop"/>').insertBefore(e(this)).on("click",i),r.trigger(t=e.Event("show.bs.dropdown"));if(t.isDefaultPrevented())return;r.toggleClass("open").trigger("shown.bs.dropdown")}return n.focus(),!1},r.prototype.keydown=function(t){if(!/(38|40|27)/.test(t.keyCode))return;var r=e(this);t.preventDefault(),t.stopPropagation();if(r.is(".disabled, :disabled"))return;var i=s(r),o=i.hasClass("open");if(!o||o&&t.keyCode==27)return t.which==27&&i.find(n).focus(),r.click();var u=e("[role=menu] li:not(.divider):visible a",i);if(!u.length)return;var a=u.index(u.filter(":focus"));t.keyCode==38&&a>0&&a--,t.keyCode==40&&a<u.length-1&&a++,~a||(a=0),u.eq(a).focus()};var o=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var n=e(this),i=n.data("dropdown");i||n.data("dropdown",i=new r(this)),typeof t=="string"&&i[t].call(n)})},e.fn.dropdown.Constructor=r,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=o,this},e(document).on("click.bs.dropdown.data-api",i).on("click.bs.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.bs.dropdown.data-api",n,r.prototype.toggle).on("keydown.bs.dropdown.data-api",n+", [role=menu]",r.prototype.keydown)}(window.jQuery),+function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},t.prototype.toggle=function(){return this[this.isShown?"hide":"show"]()},t.prototype.show=function(){var t=this,n=e.Event("show.bs.modal");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown.bs.modal")}):t.$element.focus().trigger("shown.bs.modal")})},t.prototype.hide=function(t){t&&t.preventDefault(),t=e.Event("hide.bs.modal"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},t.prototype.enforceFocus=function(){e(document).off("focusin.bs.modal").on("focusin.bs.modal",function(e){this.$element[0]!==e.target&&!this.$element.has(e.target).length&&this.$element.focus()},this)},t.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",function(e){e.which==27&&this.hide()},this):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},t.prototype.hideWithTransition=function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},t.prototype.hideModal=function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden.bs.modal")})},t.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},t.prototype.backdrop=function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("bs.modal"),s=e.extend({},t.DEFAULTS,r.data(),typeof n=="object"&&n);i||r.data("bs.modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("bs.modal.shown",".modal",function(){r.addClass("modal-open")}).on("bs.modal.hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),+function(e){"use strict";var t=function(e,t){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",e,t)};t.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},t.prototype.init=function(t,n,r){this.enabled=!0,this.type=t,this.$element=e(n),this.options=this.getOptions(r);var i=this.options.trigger.split(" ");for(var s=i.length;s--;){var o=i[s];if(o=="click")this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this));else if(o!="manual"){var u=o=="hover"?"mouseenter":"focus",a=o=="hover"?"mouseleave":"blur";this.$element.on(u+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(a+"."+this.type,this.options.selector,e.proxy(this.leave,this))}}this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},t.prototype.getDefaults=function(){return t.DEFAULTS},t.prototype.getOptions=function(t){return t=e.extend({},this.getDefaults(),this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},t.prototype.enter=function(t){var n=this.getDefaults(),r={};this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)});var i=e(t.currentTarget)[this.type](r).data("bs."+this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},t.prototype.leave=function(t){var n=e(t.currentTarget)[this.type](this._options).data("bs."+this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},t.prototype.show=function(){var t=e.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(t);if(t.isDefaultPrevented())return;var n=this.tip();this.setContent(),this.options.animation&&n.addClass("fade");var r=typeof this.options.placement=="function"?this.options.placement.call(this,n[0],this.$element[0]):this.options.placement;n.detach().css({top:0,left:0,display:"block"}),this.options.container?n.appendTo(this.options.container):n.insertAfter(this.$element);var i,s=this.getPosition(),o=n[0].offsetWidth,u=n[0].offsetHeight;switch(r){case"bottom":i={top:s.top+s.height,left:s.left+s.width/2-o/2};break;case"top":i={top:s.top-u,left:s.left+s.width/2-o/2};break;case"left":i={top:s.top+s.height/2-u/2,left:s.left-o};break;case"right":i={top:s.top+s.height/2-u/2,left:s.left+s.width}}this.applyPlacement(i,r),this.$element.trigger("shown.bs."+this.type)}},t.prototype.applyPlacement=function(e,t){var n,r=this.tip(),i=r[0].offsetWidth,s=r[0].offsetHeight;r.offset(e).addClass(t).addClass("in");var o=r[0].offsetWidth,u=r[0].offsetHeight;t=="top"&&u!=s&&(n=!0,e.top=e.top+s-u);if(t=="bottom"||t=="top"){var a=0;e.left<0&&(a=e.left*-2,e.left=0,r.offset(e),o=r[0].offsetWidth,u=r[0].offsetHeight),this.replaceArrow(a-i+o,o,"left")}else this.replaceArrow(u-s,u,"top");n&&r.offset(e)},t.prototype.replaceArrow=function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},t.prototype.setContent=function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},t.prototype.hide=function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide.bs."+this.type);this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden.bs."+this.type),this},t.prototype.fixTitle=function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},t.prototype.hasContent=function(){return this.getTitle()},t.prototype.getPosition=function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},t.prototype.getTitle=function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},t.prototype.tip=function(){return this.$tip=this.$tip||e(this.options.template)},t.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},t.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},t.prototype.enable=function(){this.enabled=!0},t.prototype.disable=function(){this.enabled=!1},t.prototype.toggleEnabled=function(){this.enabled=!this.enabled},t.prototype.toggle=function(t){var n=t?e(t.currentTarget)[this.type](this._options).data("bs."+this.type):this;n.tip().hasClass("in")?n.hide():n.show()},t.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("bs.tooltip"),s=typeof n=="object"&&n;i||r.data("bs.tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),+function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.DEFAULTS=e.extend({},e.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype),t.prototype.constructor=t,t.prototype.getDefaults=function(){return t.DEFAULTS},t.prototype.setContent=function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},t.prototype.hasContent=function(){return this.getTitle()||this.getContent()},t.prototype.getContent=function(){var e=typeof this.options.content=="function"?this.options.content.call(this.$element[0]):this.options.content;return e||this.$element.attr("data-content")},t.prototype.tip=function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},t.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData(this.type)};var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("bs.popover"),s=typeof n=="object"&&n;i||r.data("bs.popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),+function(e){"use strict";function t(n,r){var i,s=e.proxy(this.process,this),o=e(n).is("body")?e(window):e(n);this.$body=e("body"),this.$scrollElement=o.on("scroll.bs.scroll-spy.data-api",s),this.options=e.extend({},t.DEFAULTS,r),this.selector=(this.options.target||(i=e(n).attr("href"))&&i.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=e([]),this.targets=e([]),this.activeTarget=null,this.refresh(),this.process()}t.DEFAULTS={offset:10},t.prototype.refresh=function(){this.offsets=e([]),this.targets=e([]);var t=this,n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},t.prototype.process=function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},t.prototype.activate=function(t){this.activeTarget=t,e(this.selector).parents(".active").removeClass("active");var n=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',r=e(n).parents("li").addClass("active");r.parent(".dropdown-menu").length&&(r=r.closest("li.dropdown").addClass("active")),r.trigger("activate")};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("bs.scrollspy"),s=typeof n=="object"&&n;i||r.data("bs.scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),+function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype.show=function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target");r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;var i=n.find(".active:last a")[0],s=e.Event("show.bs.tab",{relatedTarget:i});t.trigger(s);if(s.isDefaultPrevented())return;var o=e(r);this.activate(t.parent("li"),n),this.activate(o,o.parent(),function(){t.trigger({type:"shown.bs.tab",relatedTarget:i})})},t.prototype.activate=function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("bs.tab");i||r.data("bs.tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.options=e.extend({},t.DEFAULTS,r),this.$window=e(window).on("scroll.bs.affix.data-api",e.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",e.proxy(this.checkPositionWithEventLoop,this)),this.$element=e(n),this.affixed=this.unpin=null,this.checkPosition()};t.DEFAULTS={offset:0},t.prototype.checkPositionWithEventLoop=function(){setTimeout(e.proxy(this.checkPosition,this),1)},t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.top,o=i.bottom,u="affix affix-top affix-bottom";typeof i!="object"&&(o=s=i),typeof s=="function"&&(s=i.top()),typeof o=="function"&&(o=i.bottom());var a=this.unpin!=null&&n+this.unpin<=r.top?!1:o!=null&&r.top+this.$element.height()>=t-o?"bottom":s!=null&&n<=s?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("bs.affix"),s=typeof n=="object"&&n;i||r.data("bs.affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
-\ No newline at end of file
++function(e){"use strict";function t(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var n in t)if(e.style[n]!==undefined)return{end:t[n]}}e(function(){e.support.transition=t()})}(window.jQuery),+function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed.bs.alert").remove()}var n=e(this),r=n.attr("data-target");r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));var i=e(r);t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close.bs.alert"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("bs.alert");i||r.data("bs.alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.bs.alert.data-api",t,n.prototype.close)}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r)};t.DEFAULTS={loadingText:"loading..."},t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.is("input")?"val":"html",i=n.data();e+="Text",i.resetText||n.data("resetText",n[r]()),n[r](i[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("bs.button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.bs.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})}(window.jQuery),+function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.paused=this.sliding=this.interval=this.$active=this.$items=null,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.DEFAULTS={interval:5e3,pause:"hover"},t.prototype.cycle=function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},t.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},t.prototype.to=function(t){var n=this,r=this.getActiveIndex();if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){n.to(t)}):r==t?this.pause().cycle():this.slide(t>r?"next":"prev",e(this.$items[t]))},t.prototype.pause=function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},t.prototype.next=function(){if(this.sliding)return;return this.slide("next")},t.prototype.prev=function(){if(this.sliding)return;return this.slide("prev")},t.prototype.slide=function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();var f=e.Event("slide.bs.carousel",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("bs.carousel"),s=e.extend({},t.DEFAULTS,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("bs.carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o;i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("bs.carousel").pause().to(o).cycle(),t.preventDefault()}),e(window).on("load",function(){e('[data-ride="carousel"]').each(function(){var t=e(this);t.carousel(t.data())})})}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r),this.transitioning=null,this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.DEFAULTS={toggle:!0},t.prototype.dimension=function(){var e=this.$element.hasClass("width");return e?"width":"height"},t.prototype.show=function(){if(this.transitioning||this.$element.hasClass("in"))return;var t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){var i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show.bs.collapse"),"shown.bs.collapse"),e.support.transition&&this.$element[t](this.$element[0][n])},t.prototype.hide=function(){if(this.transitioning||!this.$element.hasClass("in"))return;var t=this.dimension();this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide.bs.collapse"),"hidden"),this.$element[t](0)},t.prototype.reset=function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},t.prototype.transition=function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},t.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=e.extend({},t.DEFAULTS,r.data(),typeof n=="object"&&n);i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})}(window.jQuery),+function(e){"use strict";function i(){e(t).remove(),e(n).each(function(t){var n=s(e(this));if(!n.hasClass("open"))return;n.trigger(t=e.Event("hide.bs.dropdown"));if(t.isDefaultPrevented())return;n.removeClass("open").trigger("hidden.bs.dropdown")})}function s(t){var n=t.attr("data-target");n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,""));var r=n&&e(n);return r&&r.length?r:t.parent()}var t=".dropdown-backdrop",n="[data-toggle=dropdown]",r=function(t){var n=e(t).on("click.bs.dropdown",this.toggle)};r.prototype.toggle=function(t){var n=e(this);if(n.is(".disabled, :disabled"))return;var r=s(n),o=r.hasClass("open");i();if(!o){"ontouchstart"in document.documentElement&&e('<div class="dropdown-backdrop"/>').insertBefore(e(this)).on("click",i),r.trigger(t=e.Event("show.bs.dropdown"));if(t.isDefaultPrevented())return;r.toggleClass("open").trigger("shown.bs.dropdown")}return n.focus(),!1},r.prototype.keydown=function(t){if(!/(38|40|27)/.test(t.keyCode))return;var r=e(this);t.preventDefault(),t.stopPropagation();if(r.is(".disabled, :disabled"))return;var i=s(r),o=i.hasClass("open");if(!o||o&&t.keyCode==27)return t.which==27&&i.find(n).focus(),r.click();var u=e("[role=menu] li:not(.divider):visible a",i);if(!u.length)return;var a=u.index(u.filter(":focus"));t.keyCode==38&&a>0&&a--,t.keyCode==40&&a<u.length-1&&a++,~a||(a=0),u.eq(a).focus()};var o=e.fn.dropdown;e.fn.dropdown=function(t){return this.each(function(){var n=e(this),i=n.data("dropdown");i||n.data("dropdown",i=new r(this)),typeof t=="string"&&i[t].call(n)})},e.fn.dropdown.Constructor=r,e.fn.dropdown.noConflict=function(){return e.fn.dropdown=o,this},e(document).on("click.bs.dropdown.data-api",i).on("click.bs.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("click.bs.dropdown.data-api",n,r.prototype.toggle).on("keydown.bs.dropdown.data-api",n+", [role=menu]",r.prototype.keydown)}(window.jQuery),+function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},t.prototype.toggle=function(){return this[this.isShown?"hide":"show"]()},t.prototype.show=function(){var t=this,n=e.Event("show.bs.modal");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.focus().trigger("shown.bs.modal")}):t.$element.focus().trigger("shown.bs.modal")})},t.prototype.hide=function(t){t&&t.preventDefault(),t=e.Event("hide.bs.modal"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,this.escape(),e(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},t.prototype.enforceFocus=function(){e(document).off("focusin.bs.modal").on("focusin.bs.modal",e.proxy(function(e){this.$element[0]!==e.target&&!this.$element.has(e.target).length&&this.$element.focus()},this))},t.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",e.proxy(function(e){e.which==27&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},t.prototype.hideWithTransition=function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},t.prototype.hideModal=function(){var e=this;this.$element.hide(),this.backdrop(function(){e.removeBackdrop(),e.$element.trigger("hidden.bs.modal")})},t.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},t.prototype.backdrop=function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.$backdrop.click(this.options.backdrop=="static"?e.proxy(this.$element[0].focus,this.$element[0]):e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t):t()):t&&t()};var n=e.fn.modal;e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("bs.modal"),s=e.extend({},t.DEFAULTS,r.data(),typeof n=="object"&&n);i||r.data("bs.modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.Constructor=t,e.fn.modal.noConflict=function(){return e.fn.modal=n,this},e(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})});var r=e(document.body).on("bs.modal.shown",".modal",function(){r.addClass("modal-open")}).on("bs.modal.hidden",".modal",function(){r.removeClass("modal-open")})}(window.jQuery),+function(e){"use strict";var t=function(e,t){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",e,t)};t.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},t.prototype.init=function(t,n,r){this.enabled=!0,this.type=t,this.$element=e(n),this.options=this.getOptions(r);var i=this.options.trigger.split(" ");for(var s=i.length;s--;){var o=i[s];if(o=="click")this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this));else if(o!="manual"){var u=o=="hover"?"mouseenter":"focus",a=o=="hover"?"mouseleave":"blur";this.$element.on(u+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(a+"."+this.type,this.options.selector,e.proxy(this.leave,this))}}this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},t.prototype.getDefaults=function(){return t.DEFAULTS},t.prototype.getOptions=function(t){return t=e.extend({},this.getDefaults(),this.$element.data(),t),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},t.prototype.enter=function(t){var n=this.getDefaults(),r={};this._options&&e.each(this._options,function(e,t){n[e]!=t&&(r[e]=t)});var i=t instanceof this.constructor?t:e(t.currentTarget)[this.type](r).data("bs."+this.type);if(!i.options.delay||!i.options.delay.show)return i.show();clearTimeout(this.timeout),i.hoverState="in",this.timeout=setTimeout(function(){i.hoverState=="in"&&i.show()},i.options.delay.show)},t.prototype.leave=function(t){var n=t instanceof this.constructor?t:e(t.currentTarget)[this.type](this._options).data("bs."+this.type);clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},t.prototype.show=function(){var t=e.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(t);if(t.isDefaultPrevented())return;var n=this.tip();this.setContent(),this.options.animation&&n.addClass("fade");var r=typeof this.options.placement=="function"?this.options.placement.call(this,n[0],this.$element[0]):this.options.placement;n.detach().css({top:0,left:0,display:"block"}),this.options.container?n.appendTo(this.options.container):n.insertAfter(this.$element);var i,s=this.getPosition(),o=n[0].offsetWidth,u=n[0].offsetHeight;switch(r){case"bottom":i={top:s.top+s.height,left:s.left+s.width/2-o/2};break;case"top":i={top:s.top-u,left:s.left+s.width/2-o/2};break;case"left":i={top:s.top+s.height/2-u/2,left:s.left-o};break;case"right":i={top:s.top+s.height/2-u/2,left:s.left+s.width}}this.applyPlacement(i,r),this.$element.trigger("shown.bs."+this.type)}},t.prototype.applyPlacement=function(e,t){var n,r=this.tip(),i=r[0].offsetWidth,s=r[0].offsetHeight;r.offset(e).addClass(t).addClass("in");var o=r[0].offsetWidth,u=r[0].offsetHeight;t=="top"&&u!=s&&(n=!0,e.top=e.top+s-u);if(t=="bottom"||t=="top"){var a=0;e.left<0&&(a=e.left*-2,e.left=0,r.offset(e),o=r[0].offsetWidth,u=r[0].offsetHeight),this.replaceArrow(a-i+o,o,"left")}else this.replaceArrow(u-s,u,"top");n&&r.offset(e)},t.prototype.replaceArrow=function(e,t,n){this.arrow().css(n,e?50*(1-e/t)+"%":"")},t.prototype.setContent=function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},t.prototype.hide=function(){function i(){var t=setTimeout(function(){n.off(e.support.transition.end).detach()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.detach()})}var t=this,n=this.tip(),r=e.Event("hide.bs."+this.type);this.$element.trigger(r);if(r.isDefaultPrevented())return;return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?i():n.detach(),this.$element.trigger("hidden.bs."+this.type),this},t.prototype.fixTitle=function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").attr("title","")},t.prototype.hasContent=function(){return this.getTitle()},t.prototype.getPosition=function(){var t=this.$element[0];return e.extend({},typeof t.getBoundingClientRect=="function"?t.getBoundingClientRect():{width:t.offsetWidth,height:t.offsetHeight},this.$element.offset())},t.prototype.getTitle=function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},t.prototype.tip=function(){return this.$tip=this.$tip||e(this.options.template)},t.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},t.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},t.prototype.enable=function(){this.enabled=!0},t.prototype.disable=function(){this.enabled=!1},t.prototype.toggleEnabled=function(){this.enabled=!this.enabled},t.prototype.toggle=function(t){var n=t?e(t.currentTarget)[this.type](this._options).data("bs."+this.type):this;n.tip().hasClass("in")?n.leave(n):n.enter(n)},t.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var n=e.fn.tooltip;e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("bs.tooltip"),s=typeof n=="object"&&n;i||r.data("bs.tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.noConflict=function(){return e.fn.tooltip=n,this}}(window.jQuery),+function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.DEFAULTS=e.extend({},e.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype),t.prototype.constructor=t,t.prototype.getDefaults=function(){return t.DEFAULTS},t.prototype.setContent=function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},t.prototype.hasContent=function(){return this.getTitle()||this.getContent()},t.prototype.getContent=function(){var e=typeof this.options.content=="function"?this.options.content.call(this.$element[0]):this.options.content;return e||this.$element.attr("data-content")},t.prototype.tip=function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},t.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData(this.type)};var n=e.fn.popover;e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("bs.popover"),s=typeof n=="object"&&n;i||r.data("bs.popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.noConflict=function(){return e.fn.popover=n,this}}(window.jQuery),+function(e){"use strict";function t(n,r){var i,s=e.proxy(this.process,this),o=e(n).is("body")?e(window):e(n);this.$body=e("body"),this.$scrollElement=o.on("scroll.bs.scroll-spy.data-api",s),this.options=e.extend({},t.DEFAULTS,r),this.selector=(this.options.target||(i=e(n).attr("href"))&&i.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=e([]),this.targets=e([]),this.activeTarget=null,this.refresh(),this.process()}t.DEFAULTS={offset:10},t.prototype.refresh=function(){this.offsets=e([]),this.targets=e([]);var t=this,n=this.$body.find(this.selector).map(function(){var n=e(this),r=n.data("target")||n.attr("href"),i=/^#\w/.test(r)&&e(r);return i&&i.length&&[[i.position().top+(!e.isWindow(t.$scrollElement.get(0))&&t.$scrollElement.scrollTop()),r]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},t.prototype.process=function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},t.prototype.activate=function(t){this.activeTarget=t,e(this.selector).parents(".active").removeClass("active");var n=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',r=e(n).parents("li").addClass("active");r.parent(".dropdown-menu").length&&(r=r.closest("li.dropdown").addClass("active")),r.trigger("activate")};var n=e.fn.scrollspy;e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("bs.scrollspy"),s=typeof n=="object"&&n;i||r.data("bs.scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.noConflict=function(){return e.fn.scrollspy=n,this},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),+function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype.show=function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target");r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;var i=n.find(".active:last a")[0],s=e.Event("show.bs.tab",{relatedTarget:i});t.trigger(s);if(s.isDefaultPrevented())return;var o=e(r);this.activate(t.parent("li"),n),this.activate(o,o.parent(),function(){t.trigger({type:"shown.bs.tab",relatedTarget:i})})},t.prototype.activate=function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")};var n=e.fn.tab;e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("bs.tab");i||r.data("bs.tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e.fn.tab.noConflict=function(){return e.fn.tab=n,this},e(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.options=e.extend({},t.DEFAULTS,r),this.$window=e(window).on("scroll.bs.affix.data-api",e.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",e.proxy(this.checkPositionWithEventLoop,this)),this.$element=e(n),this.affixed=this.unpin=null,this.checkPosition()};t.DEFAULTS={offset:0},t.prototype.checkPositionWithEventLoop=function(){setTimeout(e.proxy(this.checkPosition,this),1)},t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.top,o=i.bottom,u="affix affix-top affix-bottom";typeof i!="object"&&(o=s=i),typeof s=="function"&&(s=i.top()),typeof o=="function"&&(o=i.bottom());var a=this.unpin!=null&&n+this.unpin<=r.top?!1:o!=null&&r.top+this.$element.height()>=t-o?"bottom":s!=null&&n<=s?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))};var n=e.fn.affix;e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("bs.affix"),s=typeof n=="object"&&n;i||r.data("bs.affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.noConflict=function(){return e.fn.affix=n,this},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
+\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index 20fdd70dd..44a823a9d 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -300,7 +300,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
         <div class="controls">
           <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-            <input class="col col-lg-2" id="inputIcon" type="text">
+            <input class="col-lg-2" id="inputIcon" type="text">
           </div>
         </div>
       </div>
@@ -311,7 +311,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
   <div class="controls">
     <div class="input-group">
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="col col-lg-2" id="inputIcon" type="text">
+      <input class="col-lg-2" id="inputIcon" type="text">
     </div>
   </div>
 </div>
@@ -1302,7 +1302,7 @@ body { padding-bottom: 70px; }
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col col-lg-8" placeholder="Search">
+              <input type="text" class="col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -1379,7 +1379,7 @@ body { padding-bottom: 70px; }
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col col-lg-8" placeholder="Search">
+              <input type="text" class="col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -1757,22 +1757,22 @@ body { padding-bottom: 70px; }
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-example">
       <div class="row">
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
@@ -1781,7 +1781,7 @@ body { padding-bottom: 70px; }
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-3">
+  <div class="col-lg-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/260x180" alt="">
     </a>
@@ -1794,7 +1794,7 @@ body { padding-bottom: 70px; }
     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
     <div class="bs-example">
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -1804,7 +1804,7 @@ body { padding-bottom: 70px; }
             </div>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -1814,7 +1814,7 @@ body { padding-bottom: 70px; }
             </div>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -1828,7 +1828,7 @@ body { padding-bottom: 70px; }
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-3">
+  <div class="col-lg-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="">
       <div class="caption">
diff --git a/docs/css.html b/docs/css.html
index 264d4c672..7cc50602e 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -63,88 +63,220 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     <div class="page-header">
       <h1>Grid system</h1>
     </div>
-    <p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
+    <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
 
-    <h3 id="grid-example">Grid example</h3>
-    <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-lg-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-lg-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
-    <p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p>
+    <h3 id="grid-options">Grid options</h3>
+    <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
+    <table class="table table-bordered table-striped bs-table">
+      <thead>
+        <tr>
+          <th></th>
+          <th>
+            Tiny grid
+            <small>Phones (&lt;480px)</small>
+          </th>
+          <th>
+            Small grid
+            <small>Tablets (&lt;768px)</small>
+          </th>
+          <th>
+            Medium-large grid
+            <small>Destkops (&gt;768px)</small>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Grid behavior</th>
+          <td>Horizontal at all times</td>
+          <td colspan="2">Collapsed to start, horizontal above breakpoints</td>
+        </tr>
+        <tr>
+          <th>Class prefix</th>
+          <td><code>.col-</code></td>
+          <td><code>.col-sm-</code></td>
+          <td><code>.col-lg-</code></td>
+        </tr>
+        <tr>
+          <th># of columns</th>
+          <td colspan="3">12</td>
+        </tr>
+        <tr>
+          <th>Nestable</th>
+          <td colspan="3">Yes</td>
+        </tr>
+        <tr>
+          <th>Offsets</th>
+          <td class="text-muted">N/A</td>
+          <td colspan="2">Yes</td>
+        </tr>
+        <tr>
+          <th>Column ordering</th>
+          <td class="text-muted">N/A</td>
+          <td colspan="2">Yes</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
+    <p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
+    <div class="bs-docs-grid">
+      <div class="row show-grid">
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-lg-8">8</div>
+        <div class="col-lg-4">4</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4">4</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-lg-6">6</div>
+        <div class="col-lg-6">6</div>
+      </div>
+    </div>
+{% highlight html %}
+<div class="row">
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+</div>
+<div class="row show-grid">
+  <div class="col-lg-8">8</div>
+  <div class="col-lg-4">4</div>
+</div>
+<div class="row">
+  <div class="col-lg-4">4</div>
+  <div class="col-lg-4">4</div>
+  <div class="col-lg-4">4</div>
+</div>
+<div class="row">
+  <div class="col-lg-6">6</div>
+  <div class="col-lg-6">6</div>
+</div>
+{% endhighlight %}
+
+    <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
+    <p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p>
+    <div class="bs-docs-grid">
+      <div class="row show-grid">
+        <div class="col-12 col-lg-8">8</div>
+        <div class="col-6 col-lg-4">4</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-6 col-lg-4">4</div>
+        <div class="col-6 col-lg-4">4</div>
+        <div class="col-6 col-lg-4">4</div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-6 col-lg-6">6</div>
+        <div class="col-6 col-lg-6">6</div>
+      </div>
+    </div>
+{% highlight html %}
+<div class="row">
+  <div class="col-12 col-lg-8">8</div>
+  <div class="col-6 col-lg-4">4</div>
+</div>
+<div class="row">
+  <div class="col-6 col-lg-4">4</div>
+  <div class="col-6 col-lg-4">4</div>
+  <div class="col-6 col-lg-4">4</div>
+</div>
+<div class="row">
+  <div class="col-6 col-lg-6">6</div>
+  <div class="col-6 col-lg-6">6</div>
+</div>
+{% endhighlight %}
+
+    <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
+    <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
+        <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4">4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+        <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col col-lg-6">6</div>
-        <div class="col col-lg-6">6</div>
+        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+        <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
       </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
+  <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
 </div>
 <div class="row">
-  <div class="col col-lg-4">4</div>
-  <div class="col col-lg-4">4</div>
-  <div class="col col-lg-4">4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
 </div>
 <div class="row">
-  <div class="col col-lg-6">6</div>
-  <div class="col col-lg-6">6</div>
+  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+  <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
 </div>
 {% endhighlight %}
 
+    <div class="bs-callout">
+      <h4>Need more examples?</h4>
+      <p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
+      <p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
+    </div>
+
     <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4 col-offset-4">4 offset 4</div>
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4 col-offset-4">4 offset 4</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
-        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-offset-3">3 offset 3</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col col-lg-6 col-offset-3">6 offset 3</div>
+        <div class="col-lg-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-4">...</div>
-  <div class="col col-lg-4 col-offset-4">...</div>
+  <div class="col-lg-4">...</div>
+  <div class="col-lg-4 col-offset-4">...</div>
 </div>
 <div class="row">
-  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
-  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-offset-3">3 offset 3</div>
 </div>
 <div class="row">
-  <div class="col col-lg-6 col-offset-3">...</div>
+  <div class="col-lg-6 col-offset-3">...</div>
 </div>
 {% endhighlight %}
 
@@ -152,13 +284,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     <h3 id="grid-nesting">Nesting columns</h3>
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
-      <div class="col col-lg-9">
+      <div class="col-lg-9">
         Level 1: 9 columns
         <div class="row show-grid">
-          <div class="col col-lg-6">
+          <div class="col-lg-6">
             Level 2: 6 columns
           </div>
-          <div class="col col-lg-6">
+          <div class="col-lg-6">
             Level 2: 6 columns
           </div>
         </div>
@@ -166,13 +298,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-9">
+  <div class="col-lg-9">
     Level 1: 9 columns
     <div class="row">
-      <div class="col col-lg-6">
+      <div class="col-lg-6">
         Level 2: 6 columns
       </div>
-      <div class="col col-lg-6">
+      <div class="col-lg-6">
         Level 2: 6 columns
       </div>
     </div>
@@ -183,29 +315,14 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col col-lg-9 col-push-3">9</div>
-      <div class="col col-lg-3 col-pull-9">3</div>
+      <div class="col-lg-9 col-push-3">9</div>
+      <div class="col-lg-3 col-pull-9">3</div>
     </div>
 
 {% highlight html %}
 <div class="row show-grid">
-  <div class="col col-lg-9 col-push-3">9</div>
-  <div class="col col-lg-3 col-pull-9">3</div>
-</div>
-{% endhighlight %}
-
-    <h3 id="grid-small">Small device grid</h3>
-    <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
-    <div class="row show-grid">
-      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-      <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
-    </div>
-{% highlight html %}
-<div class="row">
-  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-  <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
+  <div class="col-lg-9 col-push-3">9</div>
+  <div class="col-lg-3 col-pull-9">3</div>
 </div>
 {% endhighlight %}
 
@@ -504,7 +621,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
 {% highlight html %}
 <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
+  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 </blockquote>
 {% endhighlight %}
 
@@ -918,8 +1035,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use contextual classes to color table rows.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
-        <col class="col col-lg-1">
-        <col class="col col-lg-7">
+        <col class="col-lg-1">
+        <col class="col-lg-7">
       </colgroup>
       <thead>
         <tr>
@@ -1078,14 +1195,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
     <form class="bs-example form-horizontal">
       <div class="row">
-        <label for="inputEmail" class="col col-lg-2 control-label">Email</label>
-        <div class="col col-lg-10">
+        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+        <div class="col-lg-10">
           <input type="text" id="inputEmail" placeholder="Email">
         </div>
       </div>
       <div class="row">
-        <label for="" class="col col-lg-2 control-label">Password</label>
-        <div class="col col-lg-10">
+        <label for="" class="col-lg-2 control-label">Password</label>
+        <div class="col-lg-10">
           <input type="password" id="inputPassword" placeholder="Password">
           <div class="checkbox">
             <label>
@@ -1093,7 +1210,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </label>
           </div>
         </div>
-        <div class="col col-lg-10 col-offset-2">
+        <div class="col-lg-10 col-offset-2">
           <button type="submit" class="btn btn-default">Sign in</button>
         </div>
       </div>
@@ -1101,14 +1218,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-horizontal">
   <div class="row">
-    <label for="inputEmail" class="col col-lg-2 control-label">Email</label>
-    <div class="col col-lg-10">
+    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+    <div class="col-lg-10">
       <input type="text" id="inputEmail" placeholder="Email">
     </div>
   </div>
   <div class="row">
-    <label for="" class="col col-lg-2 control-label">Password</label>
-    <div class="col col-lg-10">
+    <label for="" class="col-lg-2 control-label">Password</label>
+    <div class="col-lg-10">
       <input type="password" id="inputPassword" placeholder="Password">
       <div class="checkbox">
         <label>
@@ -1116,7 +1233,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </label>
       </div>
     </div>
-    <div class="col col-lg-10 col-offset-2">
+    <div class="col-lg-10 col-offset-2">
       <button type="submit" class="btn btn-default">Sign in</button>
     </div>
   </div>
@@ -1400,34 +1517,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-example">
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-6">
+      <div class="input-group col-lg-6">
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
       <br>
-      <div class="input-group col col-lg-3">
+      <div class="input-group col-lg-3">
         <span class="input-group-addon">$</span>
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-6">
+<div class="input-group col-lg-6">
   <input type="text">
   <span class="input-group-addon">.00</span>
 </div>
 
-<div class="input-group col col-lg-3">
+<div class="input-group col-lg-3">
   <span class="input-group-addon">$</span>
   <input type="text">
   <span class="input-group-addon">.00</span>
@@ -1437,33 +1554,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
     <form class="bs-example">
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon input-small">@</span>
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon input-small">@</span>
   <input type="text" class="input-small" placeholder="Username">
 </div>
@@ -1472,14 +1589,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
     <form class="bs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <span class="input-group-btn">
           <button class="btn btn-default" type="button">Go!</button>
         </span>
         <input type="text">
       </div>
       <br>
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <span class="input-group-btn">
           <button class="btn btn-default" type="button">Go!</button>
@@ -1487,14 +1604,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <span class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
   </span>
   <input type="text">
 </div>
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <span class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
@@ -1505,7 +1622,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Button dropdowns</h4>
     <p></p>
     <form class="bs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1519,7 +1636,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text">
       </div><!-- /input-group -->
       <br>
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1534,7 +1651,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /input-group -->
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1548,7 +1665,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <input type="text">
 </div><!-- /input-group -->
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1565,7 +1682,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Segmented dropdown groups</h4>
     <form class="bs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default" tabindex="-1">Action</button>
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1584,7 +1701,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <br>
 
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default" tabindex="-1">Action</button>
@@ -1602,14 +1719,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
 </div>
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
@@ -1639,27 +1756,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
     <form class="bs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="col col-lg-2">
-          <input type="text" placeholder="col col-large-2">
+        <div class="col-lg-2">
+          <input type="text" placeholder="col-large-2">
         </div>
-        <div class="col col-lg-3">
-          <input type="text" placeholder="col col-large-3">
+        <div class="col-lg-3">
+          <input type="text" placeholder="col-large-3">
         </div>
-        <div class="col col-lg-4">
-          <input type="text" placeholder="col col-large-4">
+        <div class="col-lg-4">
+          <input type="text" placeholder="col-large-4">
         </div>
       </div>
     </form>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-2">
-    <input type="text" placeholder="col col-large-2">
+  <div class="col-lg-2">
+    <input type="text" placeholder="col-large-2">
   </div>
-  <div class="col col-lg-3">
-    <input type="text" placeholder="col col-large-3">
+  <div class="col-lg-3">
+    <input type="text" placeholder="col-large-3">
   </div>
-  <div class="col col-lg-4">
-    <input type="text" placeholder="col col-large-4">
+  <div class="col-lg-4">
+    <input type="text" placeholder="col-large-4">
   </div>
 </div>
 {% endhighlight %}
diff --git a/docs/customize.html b/docs/customize.html
index 6b3c627d0..19957867f 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -17,7 +17,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h3>Basics</h3>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Layout</h4>
           <div class="checkbox">
             <label>
@@ -44,7 +44,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Global CSS</h4>
           <div class="checkbox">
             <label>
@@ -77,7 +77,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Utility classes</h4>
           <div class="checkbox">
             <label>
@@ -102,7 +102,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h3>Components</h3>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Navigation</h4>
           <div class="checkbox">
             <label>
@@ -135,7 +135,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Content blocks</h4>
           <div class="checkbox">
             <label>
@@ -162,7 +162,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Behavioral (requires JS)</h4>
           <div class="checkbox">
             <label>
@@ -204,7 +204,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
 
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Media</h4>
           <div class="checkbox">
             <label>
@@ -231,7 +231,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <h4>Miscellaneous</h4>
           <div class="checkbox">
             <label>
@@ -276,7 +276,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="/javascript/">JavaScript</a> page in the docs.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Linked to components</h4>
           <div class="checkbox">
             <label>
@@ -327,7 +327,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
             </label>
           </div>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Magic</h4>
           <div class="checkbox">
             <label>
@@ -374,7 +374,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h3>Body background</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@body-bg</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
@@ -383,7 +383,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h3>Typography</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@font-family-sans-serif</label>
           <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
           <p class="help-block">Default sans-serif fonts.</p>
@@ -394,7 +394,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace">
           <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@font-family-base</label>
           <input type="text" placeholder="@font-family-sans-serif">
           <p class="help-block">Used to globally set font-family in Bootstrap.</p>
@@ -415,7 +415,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h3>Colors</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <p>Define custom colors used in several contexts.</p>
           <label>@brand-primary</label>
           <input type="text" placeholder="#428bca">
@@ -433,7 +433,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="#5bc0de">
           <p class="help-block">Used to indicate informational content.</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <p>Define your preferred colors for standard text and links.</p>
           <label>@text-color</label>
           <input type="text" placeholder="@gray-dark">
@@ -450,13 +450,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h3>Media queries breakpoints</h3>
       <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@screen-tiny</label>
           <input type="text" placeholder="480px">
           <label>@screen-small</label>
           <input type="text" placeholder="768px">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@screen-medium</label>
           <input type="text" placeholder="992px">
           <label>@screen-large</label>
@@ -467,7 +467,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h3>Grid system</h3>
       <p>Define your custom responsive grid.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@grid-columns</label>
           <input type="text" placeholder="12">
           <p class="help-block">Number of columns in the grid.</p>
@@ -475,7 +475,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="30px">
           <p class="help-block">Padding between columns.</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@grid-float-breakpoint</label>
           <input type="text" placeholder="@screen-tablet">
           <p class="help-block">Point at which the navbar stops collapsing.</p>
@@ -485,7 +485,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h3>Components</h3>
       <p>Define common padding and border radius sizes and more.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Padding</h4>
           <label>@padding-base-vertical</label>
           <input type="text" placeholder="8px">
@@ -500,7 +500,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@padding-small-horizontal</label>
           <input type="text" placeholder="10px">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Border radius sizes</h4>
           <label>@border-radius-base</label>
           <input type="text" placeholder="4px">
@@ -513,7 +513,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h4>Active background color</h4>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@component-active-bg</label>
           <input type="text" placeholder="@brand-primary">
           <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
@@ -523,7 +523,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h2 id="variables-buttons">Buttons</h2>
       <p>For each of Bootstrap's buttons, define text, background and border color.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Default</h4>
           <label>@btn-default-color</label>
           <input type="text" placeholder="#fff">
@@ -546,7 +546,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@btn-info-border</label>
           <input type="text" placeholder="@btn-info-bg">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Success</h4>
           <label>@btn-success-color</label>
           <input type="text" placeholder="@btn-default-color">
@@ -574,7 +574,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h2 id="variables-form-states">Form states and alerts</h2>
       <p>Define colors for form feedback states and, by default, alerts.</p>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Success</h4>
           <label>@state-success-text</label>
           <input type="text" placeholder="#468847">
@@ -590,7 +590,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@state-warning-border</label>
           <input type="text" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Danger</h4>
           <label>@state-danger-text</label>
           <input type="text" placeholder="#b94a48">
@@ -614,7 +614,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <label>@alert-border-radius</label>
       <input type="text" placeholder="@border-radius-base">
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Success</h4>
           <label>@alert-success-text</label>
           <input type="text" placeholder="@state-success-text">
@@ -630,7 +630,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@alert-warning-border</label>
           <input type="text" placeholder="@state-warning-border">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Danger</h4>
           <label>@alert-danger-text</label>
           <input type="text" placeholder="@state-danger-text">
@@ -650,7 +650,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-navbar">Navbar</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Default navbar</h3>
           <h4>Basics</h4>
           <label>@navbar-height</label>
@@ -682,7 +682,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@navbar-brand-hover-bg</label>
           <input type="text" placeholder="transparent">
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Inverted navbar</h3>
           <h4>Basics</h4>
           <label>@navbar-inverse-color</label>
@@ -716,7 +716,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-tables">Tables</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@table-bg</label>
           <input type="text" placeholder="transparent">
           <p class="help-block">Default background color used for all tables.</p>
@@ -725,7 +725,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="#f9f9f9">
           <p class="help-block">Background color used for <code>.table-striped</code>.</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@table-bg-hover</label>
           <input type="text" placeholder="#f5f5f5">
           <p class="help-block">Background color used for <code>.table-hover</code>.</p>
@@ -737,7 +737,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-forms">Forms</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Background</h3>
           <label>@input-bg</label>
           <input type="text" placeholder="#fff">
@@ -751,7 +751,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="@gray-light">
           <p class="help-block">Placeholder text color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Border</h3>
           <label>@input-border</label>
           <input type="text" placeholder="#ccc">
@@ -764,7 +764,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-dropdowns">Dropdowns</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Background</h3>
           <label>@dropdown-bg</label>
           <input type="text" placeholder="#fff">
@@ -776,7 +776,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="@dropdown-link-active-bg">
           <p class="help-block">Hovered dropdown menu entry background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h3>Colors</h3>
           <label>@dropdown-link-color</label>
           <input type="text" placeholder="@gray-dark">
@@ -791,7 +791,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h3>Dividers</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@dropdown-divider-top</label>
           <input type="text" placeholder="#e5e5e5">
           <p class="help-block">Dropdown divider top border color</p>
@@ -804,7 +804,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h2 id="variables-panels-wells">Panels and wells</h2>
       <h3>Default panel styles</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@panel-bg</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Panel body background color</p>
@@ -815,7 +815,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="#f5f5f5">
           <p class="help-block">Panel footer background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@panel-border</label>
           <input type="text" placeholder="#ddd">
           <p class="help-block">Panel border color</p>
@@ -826,7 +826,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h3>Contextual panel colors</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Primary</h4>
           <label>@panel-primary-text</label>
           <input type="text" placeholder="#fff">
@@ -858,7 +858,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="@state-info-bg">
           <p class="help-block">Info heading background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <h4>Warning</h4>
           <label>@panel-warning-text</label>
           <input type="text" placeholder="@state-warning-text">
@@ -888,17 +888,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-jumbotron">Jumbotron</h2>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@jumbotron-bg</label>
           <input type="text" placeholder="@gray-lighter">
           <p class="help-block">Jumbotron background color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@jumbotron-heading-color</label>
           <input type="text" placeholder="inherit">
           <p class="help-block">Jumbotron heading color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@jumbotron-lead-color</label>
           <input type="text" placeholder="inherit">
           <p class="help-block">Jumbotron lead paragraph color</p>
@@ -906,17 +906,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h2 id="variables-modals">Modals</h2>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@modal-inner-padding</label>
           <input type="text" placeholder="20px">
           <p class="help-block">Padding applied to the modal body</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@modal-title-padding</label>
           <input type="text" placeholder="15px">
           <p class="help-block">Padding applied to the modal title</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@modal-title-line-height</label>
           <input type="text" placeholder="@line-height-base">
           <p class="help-block">Modal title line-height</p>
@@ -925,17 +925,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h2 id="variables-list-group">List group</h2>
       <h3>Background</h3>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-bg</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Default background color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-hover-bg</label>
           <input type="text" placeholder="#f5f5f5">
           <p class="help-block">Background color of single list elements on hover</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-active-bg</label>
           <input type="text" placeholder="@component-active-bg">
           <p class="help-block">Background color of active list elements</p>
@@ -943,17 +943,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h3>Borders</h3>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-border</label>
           <input type="text" placeholder="#ddd">
           <p class="help-block">Default border color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-border-radius</label>
           <input type="text" placeholder="@border-radius-base">
           <p class="help-block">List group border radius</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@list-group-active-border</label>
           <input type="text" placeholder="@list-group-active-bg">
           <p class="help-block">Border color of active list elements</p>
@@ -964,7 +964,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <p class="help-block">Text color of active list elements</p>
       <h2 id="variables-thumbnails">Thumbnails</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@thumbnail-caption-color</label>
           <input type="text" placeholder="@text-color">
           <p class="help-block">Custom text color for thumbnail captions</p>
@@ -972,7 +972,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="@body-bg">
           <p class="help-block">Thumbnail background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@thumbnail-border</label>
           <input type="text" placeholder="#ddd">
           <p class="help-block">Thumbnail border color</p>
@@ -983,34 +983,34 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h2 id="variables-progress">Progress bars</h2>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bg</label>
           <input type="text" placeholder="#f5f5f5">
           <p class="help-block">Background color of the whole progress component</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bar-bg</label>
           <input type="text" placeholder="@brand-primary">
           <p class="help-block">Default progress bar color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bar-success-bg</label>
           <input type="text" placeholder="@brand-success">
           <p class="help-block">Success progress bar color</p>
         </div>
       </div>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bar-warning-bg</label>
           <input type="text" placeholder="@brand-warning">
           <p class="help-block">Warning progress bar color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bar-danger-bg</label>
           <input type="text" placeholder="@brand-danger">
           <p class="help-block">Danger progress bar color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@progress-bar-info-bg</label>
           <input type="text" placeholder="@brand-info">
           <p class="help-block">Info progress bar color</p>
@@ -1018,17 +1018,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h2 id="variables-pagination">Pagination</h2>
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@pagination-bg</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Background color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@pagination-border</label>
           <input type="text" placeholder="#ddd">
           <p class="help-block">Border color</p>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <label>@pagination-active-bg</label>
           <input type="text" placeholder="#f5f5f5">
           <p class="help-block">Active background color</p>
@@ -1037,7 +1037,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
 
       <h2 id="variables-labels">Labels</h2>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@label-success-bg</label>
           <input type="text" placeholder="@brand-success">
           <p class="help-block">Success label background color</p>
@@ -1045,7 +1045,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="@brand-info">
           <p class="help-block">Info label background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@label-warning-bg</label>
           <input type="text" placeholder="@brand-warning">
           <p class="help-block">Warning label background color</p>
@@ -1057,7 +1057,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
       <h3>Tooltip styles</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@tooltip-color</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Tooltip text color</p>
@@ -1065,7 +1065,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="rgba(0,0,0,.9)">
           <p class="help-block">Tooltip background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@tooltip-arrow-width</label>
           <input type="text" placeholder="5px">
           <p class="help-block">Tooltip arrow width</p>
@@ -1076,7 +1076,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h3>Popover styles</h3>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@popover-bg</label>
           <input type="text" placeholder="#fff">
           <p class="help-block">Popover body background color</p>
@@ -1084,7 +1084,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <input type="text" placeholder="darken(@popover-bg, 3%)">
           <p class="help-block">Popover title background color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@popover-arrow-width</label>
           <input type="text" placeholder="10px">
           <p class="help-block">Popover arrow width</p>
@@ -1094,12 +1094,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
         </div>
       </div>
       <div class="row">
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@popover-arrow-outer-width</label>
           <input type="text" placeholder="(@popover-arrow-width 1)">
           <p class="help-block">Popover outer arrow width</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@popover-arrow-outer-color</label>
           <input type="text" placeholder="rgba(0,0,0,.25)">
           <p class="help-block">Popover outer arrow color</p>
@@ -1107,12 +1107,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       </div>
       <h2 id="variables-other">Other</h2>
       <div class="row">
-      <div class="col col-lg-6">
+      <div class="col-lg-6">
           <label>@hr-border</label>
           <input type="text" placeholder="@gray-lighter">
           <p class="help-block">Horizontal line color</p>
         </div>
-        <div class="col col-lg-6">
+        <div class="col-lg-6">
           <label>@component-offset-horizontal</label>
           <input type="text" placeholder="180px">
           <p class="help-block">Horizontal offset for forms and lists</p>
diff --git a/docs/docs.html b/docs/docs.html
index fe30046b5..3318ca620 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -123,63 +123,63 @@ title: Bootstrap Documentation
 
     <h3>Examples</h3>
     <div class="row bs-docs-examples">
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/starter-template/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
         </a>
         <h4>Starter template</h4>
         <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/grid/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
         </a>
         <h4>Basic grid layouts</h4>
         <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
         </a>
         <h4>Basic marketing site</h4>
         <p>Features a jumbotron for primary message and three supporting elements.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
         </a>
         <h4>Narrow marketing</h4>
         <p>Slim, lightweight marketing template for small projects or teams.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
         </a>
         <h4>Justified nav</h4>
         <p>Marketing page with equal-width navigation links in a modified navbar.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/signin/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
         </a>
         <h4>Sign in</h4>
         <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
         </a>
         <h4>Sticky footer</h4>
         <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
         </a>
         <h4>Sticky footer w/ navbar</h4>
         <p>Add a fixed navbar to the default sticky footer template.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/carousel/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
         </a>
@@ -187,21 +187,21 @@ title: Bootstrap Documentation
         <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
       </div>
 
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
         </a>
         <h4>Navbar</h4>
         <p>Basic template for showcasing how the navbar works.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
         </a>
         <h4>Static top navbar</h4>
         <p>Basic template for showcasing the static navbar variation.</p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
         </a>
@@ -351,81 +351,81 @@ title: Bootstrap Documentation
     <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
-        <div class="col col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
+        <div class="col-lg-1">1</div>
       </div>
       <div class="row show-grid">
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4">4</div>
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4">4</div>
       </div>
       <div class="row show-grid">
-        <div class="col col-lg-6">6</div>
-        <div class="col col-lg-6">6</div>
+        <div class="col-lg-6">6</div>
+        <div class="col-lg-6">6</div>
       </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
-  <div class="col col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
+  <div class="col-lg-1">1</div>
 </div>
 <div class="row">
-  <div class="col col-lg-4">4</div>
-  <div class="col col-lg-4">4</div>
-  <div class="col col-lg-4">4</div>
+  <div class="col-lg-4">4</div>
+  <div class="col-lg-4">4</div>
+  <div class="col-lg-4">4</div>
 </div>
 <div class="row">
-  <div class="col col-lg-6">6</div>
-  <div class="col col-lg-6">6</div>
+  <div class="col-lg-6">6</div>
+  <div class="col-lg-6">6</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col col-lg-4">4</div>
-        <div class="col col-lg-4 col-offset-4">4 offset 4</div>
+        <div class="col-lg-4">4</div>
+        <div class="col-lg-4 col-offset-4">4 offset 4</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
-        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col-lg-3 col-offset-3">3 offset 3</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col col-lg-6 col-offset-3">6 offset 3</div>
+        <div class="col-lg-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-4">...</div>
-  <div class="col col-lg-4 col-offset-4">...</div>
+  <div class="col-lg-4">...</div>
+  <div class="col-lg-4 col-offset-4">...</div>
 </div>
 <div class="row">
-  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
-  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col-lg-3 col-offset-3">3 offset 3</div>
 </div>
 <div class="row">
-  <div class="col col-lg-6 col-offset-3">...</div>
+  <div class="col-lg-6 col-offset-3">...</div>
 </div>
 {% endhighlight %}
 
@@ -433,13 +433,13 @@ title: Bootstrap Documentation
     <h3 id="grid-nesting">Nesting columns</h3>
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
-      <div class="col col-lg-9">
+      <div class="col-lg-9">
         Level 1: 9 columns
         <div class="row show-grid">
-          <div class="col col-lg-6">
+          <div class="col-lg-6">
             Level 2: 6 columns
           </div>
-          <div class="col col-lg-6">
+          <div class="col-lg-6">
             Level 2: 6 columns
           </div>
         </div>
@@ -447,13 +447,13 @@ title: Bootstrap Documentation
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-9">
+  <div class="col-lg-9">
     Level 1: 9 columns
     <div class="row">
-      <div class="col col-lg-6">
+      <div class="col-lg-6">
         Level 2: 6 columns
       </div>
-      <div class="col col-lg-6">
+      <div class="col-lg-6">
         Level 2: 6 columns
       </div>
     </div>
@@ -464,29 +464,29 @@ title: Bootstrap Documentation
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col col-lg-9 col-push-3">9</div>
-      <div class="col col-lg-3 col-pull-9">3</div>
+      <div class="col-lg-9 col-push-3">9</div>
+      <div class="col-lg-3 col-pull-9">3</div>
     </div>
 
 {% highlight html %}
 <div class="row show-grid">
-  <div class="col col-lg-9 col-push-3">9</div>
-  <div class="col col-lg-3 col-pull-9">3</div>
+  <div class="col-lg-9 col-push-3">9</div>
+  <div class="col-lg-3 col-pull-9">3</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-small">Small device grid</h3>
     <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
     <div class="row show-grid">
-      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-      <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
+      <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
-  <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
+  <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
 </div>
 {% endhighlight %}
 
@@ -1199,8 +1199,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use contextual classes to color table rows.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
-        <col class="col col-lg-1">
-        <col class="col col-lg-7">
+        <col class="col-lg-1">
+        <col class="col-lg-7">
       </colgroup>
       <thead>
         <tr>
@@ -1565,10 +1565,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example form-inline">
-      <input class="col col-lg-3" type="email" placeholder="[email protected]" required>
+      <input class="col-lg-3" type="email" placeholder="[email protected]" required>
     </form>
 {% highlight html %}
-<input class="col col-lg-3" type="email" placeholder="[email protected]" required>
+<input class="col-lg-3" type="email" placeholder="[email protected]" required>
 {% endhighlight %}
 
     <h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1596,10 +1596,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
-          <input type="text" class="col col-lg-4" placeholder="Disabled input">
+          <input type="text" class="col-lg-4" placeholder="Disabled input">
         </div>
         <div>
-          <select class="col col-lg-4">
+          <select class="col-lg-4">
             <option>Disabled select</option>
           </select>
         </div>
@@ -1615,10 +1615,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form class="form-inline">
   <fieldset disabled>
     <div>
-      <input type="text" class="col col-lg-4" placeholder="Disabled input">
+      <input type="text" class="col-lg-4" placeholder="Disabled input">
     </div>
     <div>
-      <select class="col col-lg-4">
+      <select class="col-lg-4">
         <option>Disabled select</option>
       </select>
     </div>
@@ -1695,34 +1695,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example">
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-6">
+      <div class="input-group col-lg-6">
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
       <br>
-      <div class="input-group col col-lg-3">
+      <div class="input-group col-lg-3">
         <span class="input-group-addon">$</span>
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-6">
+<div class="input-group col-lg-6">
   <input type="text">
   <span class="input-group-addon">.00</span>
 </div>
 
-<div class="input-group col col-lg-3">
+<div class="input-group col-lg-3">
   <span class="input-group-addon">$</span>
   <input type="text">
   <span class="input-group-addon">.00</span>
@@ -1732,33 +1732,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
     <form class="bs-docs-example">
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col col-lg-9">
+      <div class="input-group col-lg-9">
         <span class="input-group-addon input-small">@</span>
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col col-lg-9">
+<div class="input-group col-lg-9">
   <span class="input-group-addon input-small">@</span>
   <input type="text" class="input-small" placeholder="Username">
 </div>
@@ -1767,14 +1767,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
     <form class="bs-docs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
         </span>
         <input type="text">
       </div>
       <br>
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
@@ -1782,14 +1782,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
   </span>
   <input type="text">
 </div>
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
@@ -1800,7 +1800,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Button dropdowns</h4>
     <p></p>
     <form class="bs-docs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1814,7 +1814,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text">
       </div><!-- /input-group -->
       <br>
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1829,7 +1829,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /input-group -->
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1843,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <input type="text">
 </div><!-- /input-group -->
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1860,7 +1860,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Segmented dropdown groups</h4>
     <form class="bs-docs-example">
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
           <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1879,7 +1879,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <br>
 
-      <div class="input-group col col-lg-7">
+      <div class="input-group col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
@@ -1897,14 +1897,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html %}
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
 </div>
 
-<div class="input-group col col-lg-7">
+<div class="input-group col-lg-7">
   <input type="text">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
@@ -1934,27 +1934,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="col col-lg-2">
-          <input type="text" placeholder="col col-large-2">
+        <div class="col-lg-2">
+          <input type="text" placeholder="col-large-2">
         </div>
-        <div class="col col-lg-3">
-          <input type="text" placeholder="col col-large-3">
+        <div class="col-lg-3">
+          <input type="text" placeholder="col-large-3">
         </div>
-        <div class="col col-lg-4">
-          <input type="text" placeholder="col col-large-4">
+        <div class="col-lg-4">
+          <input type="text" placeholder="col-large-4">
         </div>
       </div>
     </form>
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-2">
-    <input type="text" placeholder="col col-large-2">
+  <div class="col-lg-2">
+    <input type="text" placeholder="col-large-2">
   </div>
-  <div class="col col-lg-3">
-    <input type="text" placeholder="col col-large-3">
+  <div class="col-lg-3">
+    <input type="text" placeholder="col-large-3">
   </div>
-  <div class="col col-lg-4">
-    <input type="text" placeholder="col col-large-4">
+  <div class="col-lg-4">
+    <input type="text" placeholder="col-large-4">
   </div>
 </div>
 {% endhighlight %}
@@ -2651,7 +2651,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <div class="controls">
           <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-            <input class="col col-lg-2" id="inputIcon" type="text">
+            <input class="col-lg-2" id="inputIcon" type="text">
           </div>
         </div>
       </div>
@@ -2662,7 +2662,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="controls">
     <div class="input-group">
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="col col-lg-2" id="inputIcon" type="text">
+      <input class="col-lg-2" id="inputIcon" type="text">
     </div>
   </div>
 </div>
@@ -3685,7 +3685,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col col-lg-8" placeholder="Search">
+              <input type="text" class="col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -3762,7 +3762,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col col-lg-8" placeholder="Search">
+              <input type="text" class="col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -4152,22 +4152,22 @@ body {
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col col-lg-3">
+        <div class="col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
@@ -4176,7 +4176,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-3">
+  <div class="col-lg-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/260x180" alt="">
     </a>
@@ -4189,7 +4189,7 @@ body {
     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4199,7 +4199,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4209,7 +4209,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col col-lg-4">
+        <div class="col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4223,7 +4223,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col col-lg-3">
+  <div class="col-lg-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="">
       <div class="caption">
@@ -6578,7 +6578,7 @@ $('.carousel').carousel({
             <h2>Example</h2>
             <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
-              <input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+              <input type="text" class="col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div><!-- /example -->
 {% highlight html %}
 <input type="text" data-provide="typeahead">
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 75e0838e3..7719e804b 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -236,11 +236,11 @@ body {
 
     <div class="navbar navbar-inverse navbar-static-top">
       <div class="container">
-	    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+	    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
 	      <span class="icon-bar"></span>
 	      <span class="icon-bar"></span>
 	      <span class="icon-bar"></span>
-	    </a>
+	    </button>
         <a class="navbar-brand" href="#">Project name</a>
         <div class="nav-collapse collapse">
           <ul class="nav navbar-nav">
@@ -323,19 +323,19 @@ body {
 
   <!-- Three columns of text below the carousel -->
   <div class="row">
-    <div class="col col-lg-4">
+    <div class="col-lg-4">
       <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.</p>
       <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
     </div><!-- /.col-lg-4 -->
-    <div class="col col-lg-4">
+    <div class="col-lg-4">
       <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.</p>
       <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
     </div><!-- /.col-lg-4 -->
-    <div class="col col-lg-4">
+    <div class="col-lg-4">
       <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>
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
index d14602e4e..14e8ecdf6 100644
--- a/docs/examples/grid.html
+++ b/docs/examples/grid.html
@@ -24,8 +24,8 @@ title: Grid template
   [class*="col-lg-"] {
     padding-top: 15px;
     padding-bottom: 15px;
-    background-color: #f5f5f5;
-    border: 1px solid #e5e5e5;
+    background-color: rgba(185,74,72,.15);
+    border: 1px solid rgba(185,74,72,.2);
   }
 </style>
 
@@ -37,22 +37,22 @@ title: Grid template
 
   <h4>Three equal columns</h4>
   <div class="row">
-    <div class="col col-lg-4">.col .col-lg-4</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
   </div>
 
   <h4>Three unequal columns</h4>
   <div class="row">
-    <div class="col col-lg-3">.col .col-lg-3</div>
-    <div class="col col-lg-6">.col .col-lg-6</div>
-    <div class="col col-lg-3">.col .col-lg-3</div>
+    <div class="col-lg-3">.col-lg-3</div>
+    <div class="col-lg-6">.col-lg-6</div>
+    <div class="col-lg-3">.col-lg-3</div>
   </div>
 
   <h4>Two columns</h4>
   <div class="row">
-    <div class="col col-lg-8">.col .col-lg-8</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-8">.col-lg-8</div>
+    <div class="col-lg-4">.col-lg-4</div>
   </div>
 
   <h4>Full width, single column</h4>
@@ -60,14 +60,44 @@ title: Grid template
 
   <h4>Two columns with two nested columns</h4>
   <div class="row">
-    <div class="col col-lg-8">
-      .col .col-lg-8
+    <div class="col-lg-8">
+      .col-lg-8
       <div class="row">
-        <div class="col col-lg-6">.col .col-lg-6</div>
-        <div class="col col-lg-6">.col .col-lg-6</div>
+        <div class="col-lg-6">.col-lg-6</div>
+        <div class="col-lg-6">.col-lg-6</div>
       </div>
     </div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+  </div>
+
+  <h4>Mixed: mobile and desktop</h4>
+  <div class="row">
+    <div class="col-12 col-lg-8">.col-12 .col-lg-8</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
+    <div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
+  </div>
+
+  <h4>Mixed: mobile, tablet, and desktop</h4>
+  <div class="row">
+    <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+    <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
   </div>
 
 
diff --git a/docs/examples/jumbotron-narrow.html b/docs/examples/jumbotron-narrow.html
index a6fd4e950..b94b00096 100644
--- a/docs/examples/jumbotron-narrow.html
+++ b/docs/examples/jumbotron-narrow.html
@@ -104,7 +104,7 @@ title: Narrow page template
   </div>
 
   <div class="row marketing">
-    <div class="col col-lg-6">
+    <div class="col-lg-6">
       <h4>Subheading</h4>
       <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 
@@ -115,7 +115,7 @@ title: Narrow page template
       <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
     </div>
 
-    <div class="col col-lg-6">
+    <div class="col-lg-6">
       <h4>Subheading</h4>
       <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 
diff --git a/docs/examples/jumbotron.html b/docs/examples/jumbotron.html
index 3627f7ef4..897313449 100644
--- a/docs/examples/jumbotron.html
+++ b/docs/examples/jumbotron.html
@@ -39,11 +39,11 @@ title: Jumbotron template
 
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
-    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
-    </a>
+    </button>
     <a class="navbar-brand" href="#">Project name</a>
     <div class="nav-collapse collapse">
       <ul class="nav navbar-nav">
@@ -85,17 +85,17 @@ title: Jumbotron template
 
     <!-- Example row of columns -->
     <div class="row">
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
      </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <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 btn-default" href="#">View details &raquo;</a></p>
diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index afc03a1a8..edf8cfae6 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -118,17 +118,17 @@ title: Justified nav template
 
     <!-- Example row of columns -->
     <div class="row">
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
       </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
         <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
      </div>
-      <div class="col col-lg-4">
+      <div class="col-lg-4">
         <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.</p>
         <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
diff --git a/docs/examples/navbar-fixed-top.html b/docs/examples/navbar-fixed-top.html
index d56cadfac..2f73f08e4 100644
--- a/docs/examples/navbar-fixed-top.html
+++ b/docs/examples/navbar-fixed-top.html
@@ -20,11 +20,11 @@ title: Fixed navbar template
     <!-- Fixed navbar -->
     <div class="navbar navbar-fixed-top">
       <div class="container">
-        <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
-        </a>
+        </button>
         <a class="navbar-brand" href="#">Project name</a>
         <div class="nav-collapse collapse">
           <ul class="nav navbar-nav">
diff --git a/docs/examples/navbar-static-top.html b/docs/examples/navbar-static-top.html
index 065d16d5f..f22746900 100644
--- a/docs/examples/navbar-static-top.html
+++ b/docs/examples/navbar-static-top.html
@@ -16,11 +16,11 @@ title: Static navbar template
 <!-- Static navbar -->
 <div class="navbar navbar-static-top">
   <div class="container">
-    <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
-    </a>
+    </button>
     <a class="navbar-brand" href="#">Project name</a>
     <div class="nav-collapse collapse">
       <ul class="nav navbar-nav">
diff --git a/docs/examples/navbar.html b/docs/examples/navbar.html
index 4c0f9938b..f8b25482e 100644
--- a/docs/examples/navbar.html
+++ b/docs/examples/navbar.html
@@ -22,11 +22,11 @@ title: Navbar template
   <!-- Static navbar -->
   <div class="navbar">
     <div class="container">
-      <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
-      </a>
+      </button>
       <a class="navbar-brand" href="#">Project name</a>
       <div class="nav-collapse collapse">
         <ul class="nav navbar-nav">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index f5f550f8f..018c8ed0a 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -116,91 +116,98 @@ bootstrap/
 {% endhighlight %}
 
     <h3 id="examples-list">Examples</h3>
-    <div class="row bs-examples">
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/starter-template/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
-        </a>
-        <h4>Starter template</h4>
-        <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
+    <div class="bs-examples">
+      <div class="row">
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/starter-template/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
+          </a>
+          <h4>Starter template</h4>
+          <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/grid/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
+          </a>
+          <h4>Basic grid layouts</h4>
+          <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
+          </a>
+          <h4>Basic marketing site</h4>
+          <p>Features a jumbotron for primary message and three supporting elements.</p>
+        </div>
       </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/grid/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
-        </a>
-        <h4>Basic grid layouts</h4>
-        <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
+      <div class="row">
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
+          </a>
+          <h4>Narrow marketing</h4>
+          <p>Slim, lightweight marketing template for small projects or teams.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
+          </a>
+          <h4>Justified nav</h4>
+          <p>Marketing page with equal-width navigation links in a modified navbar.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/signin/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
+          </a>
+          <h4>Sign in</h4>
+          <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
+        </div>
       </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
-        </a>
-        <h4>Basic marketing site</h4>
-        <p>Features a jumbotron for primary message and three supporting elements.</p>
+      <div class="row">
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
+          </a>
+          <h4>Sticky footer</h4>
+          <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
+          </a>
+          <h4>Sticky footer w/ navbar</h4>
+          <p>Add a fixed navbar to the default sticky footer template.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/carousel/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
+          </a>
+          <h4>Carousel jumbotron</h4>
+          <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
+        </div>
       </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
-        </a>
-        <h4>Narrow marketing</h4>
-        <p>Slim, lightweight marketing template for small projects or teams.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
-        </a>
-        <h4>Justified nav</h4>
-        <p>Marketing page with equal-width navigation links in a modified navbar.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/signin/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
-        </a>
-        <h4>Sign in</h4>
-        <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
-        </a>
-        <h4>Sticky footer</h4>
-        <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
-        </a>
-        <h4>Sticky footer w/ navbar</h4>
-        <p>Add a fixed navbar to the default sticky footer template.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/carousel/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
-        </a>
-        <h4>Carousel jumbotron</h4>
-        <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
-      </div>
-
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/navbar/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
-        </a>
-        <h4>Navbar</h4>
-        <p>Basic template for showcasing how the navbar works.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
-        </a>
-        <h4>Static top navbar</h4>
-        <p>Basic template for showcasing the static navbar variation.</p>
-      </div>
-      <div class="col col-lg-4">
-        <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
-          <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
-        </a>
-        <h4>Fixed top navbar</h4>
-        <p>Basic template for showcasing the fixed navbar variation.</p>
+      <div class="row">
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/navbar/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
+          </a>
+          <h4>Navbar</h4>
+          <p>Basic template for showcasing how the navbar works.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
+          </a>
+          <h4>Static top navbar</h4>
+          <p>Basic template for showcasing the static navbar variation.</p>
+        </div>
+        <div class="col-lg-4">
+          <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
+            <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
+          </a>
+          <h4>Fixed top navbar</h4>
+          <p>Basic template for showcasing the fixed navbar variation.</p>
+        </div>
       </div>
     </div>
   </div>
author	Ivan Khalopik <[email protected]>	2013-06-10 10:31:51 +0300
committer	Ivan Khalopik <[email protected]>	2013-06-10 10:31:51 +0300
commit	e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b (patch)
tree	2d6f41184d19466d6f9fa016ba521260413435cb /docs
parent	3285f4c3062f4a56eaed2461a3128a2e6a3ba9cc (diff)
parent	d74a9634b0cb21a712f5e805c7a21132dc9bee5e (diff)
download	bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.tar.xz bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.zip