From e1bb907050bbf1598f58a53fc64e2432753d5b24 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 24 Dec 2014 03:26:51 -0800
Subject: rearrange contents docs--type, tables, images, forms, etc--into own
 docs section

---
 docs/_data/nav.yml            |   9 +-
 docs/_layouts/default.html    |  11 +-
 docs/assets/css/docs.min.css  |   2 +-
 docs/assets/scss/docs.scss    |   1 +
 docs/components/buttons.md    | 118 ---------
 docs/components/code.md       |  49 ----
 docs/components/forms.md      | 517 ------------------------------------
 docs/components/images.md     |  37 ---
 docs/components/tables.md     | 593 ------------------------------------------
 docs/components/typography.md | 354 -------------------------
 docs/content/buttons.md       | 118 +++++++++
 docs/content/code.md          |  49 ++++
 docs/content/forms.md         | 517 ++++++++++++++++++++++++++++++++++++
 docs/content/images.md        |  37 +++
 docs/content/tables.md        | 593 ++++++++++++++++++++++++++++++++++++++++++
 docs/content/typography.md    | 354 +++++++++++++++++++++++++
 16 files changed, 1684 insertions(+), 1675 deletions(-)
 delete mode 100644 docs/components/buttons.md
 delete mode 100644 docs/components/code.md
 delete mode 100644 docs/components/forms.md
 delete mode 100644 docs/components/images.md
 delete mode 100644 docs/components/tables.md
 delete mode 100644 docs/components/typography.md
 create mode 100644 docs/content/buttons.md
 create mode 100644 docs/content/code.md
 create mode 100644 docs/content/forms.md
 create mode 100644 docs/content/images.md
 create mode 100644 docs/content/tables.md
 create mode 100644 docs/content/typography.md

diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 336ddbee7..23282c727 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -43,7 +43,7 @@
         - title: Print
         - title: Test cases
 
-- title: Components
+- title: Content
   pages:
     - title: Typography
       sections:
@@ -59,8 +59,6 @@
         - title: Address
         - title: Blockquotes
         - title: Lists
-    - title: Jumbotron
-    - title: Page header
     - title: Images
     - title: Code
       sections:
@@ -72,6 +70,11 @@
     - title: Tables
     - title: Forms
     - title: Buttons
+
+- title: Components
+  pages:
+    - title: Jumbotron
+    - title: Page header
     - title: Button group
     - title: Button dropdown
     - title: Input group
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 4fcda0e03..5b4e1c501 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -17,12 +17,17 @@
         {% elsif page.url contains "layout" %}
           <h1>Layout</h1>
           <p class="lead">Grid system, containers, media object, and responsive utilities for organization pages.</p>
-        {% elsif page.url contains "components" %}
+          {% elsif page.url contains "content" %}
           <h1>Components</h1>
           <p class="lead">
-            Global styles for common HTML elements, as well as dozens of reusable components like dropdowns, input groups, navigation, alerts, and much more.
+            Styles and patterns for common HTML elements like typography, tables, forms, and more.
           </p>
-        {% elsif page.url contains "javascript" %}
+          {% elsif page.url contains "components" %}
+          <h1>Components</h1>
+          <p class="lead">
+            Custom design patterns built as reusable components, including dropdowns, input groups, navigation, alerts, and more.
+          </p>
+          {% elsif page.url contains "javascript" %}
           <h1>JavaScript</h1>
           <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
         {% elsif page.url contains "examples" %}
diff --git a/docs/assets/css/docs.min.css b/docs/assets/css/docs.min.css
index 5b1ebbc59..e27d335c8 100644
--- a/docs/assets/css/docs.min.css
+++ b/docs/assets/css/docs.min.css
@@ -3,4 +3,4 @@
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see http://creativecommons.org/licenses/by/3.0/.
- */.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF563D7C', endColorstr='#FF6F5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;text-align:center;background-color:#563d7c}.bs-docs-header .container{position:relative}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;color:rgba(255,255,255,.65)}@media (min-width:768px){.bs-docs-header{text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bs-docs-container>table>thead>tr>th,.bs-docs-container>table>thead>tr>td,.bs-docs-container>table>tbody>tr>th,.bs-docs-container>table>tbody>tr>td,.bs-docs-container>table>tfoot>tr>th,.bs-docs-container>table>tfoot>tr>td{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29262F', endColorstr='#FF322F38', GradientType=0)}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-search{position:relative;margin-left:1.25rem;margin-right:1.25rem;margin-bottom:1.5rem}.bs-docs-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;color:rgba(255,255,255,.5);background-color:#423d4b;border-color:#4e4859}.bs-docs-search .form-control:focus{border-color:rgba(255,255,255,.25);box-shadow:0 0 .5rem rgba(255,255,255,.25)}.bs-docs-search-results{top:108%;right:0;display:block;padding:0;font-size:.9rem;overflow:hidden;border:0}.bs-docs-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bs-docs-search-results>li:first-child{padding-top:.25rem}.bs-docs-search-results>li:last-child{padding-bottom:.25rem}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:3rem}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;box-shadow:0 0 .5rem rgba(102,175,233,.6)}
\ No newline at end of file
+ */.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}body{position:relative}.btn-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:hover,.btn-outline-inverse:focus,.btn-outline-inverse:active{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bs-docs-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;font-weight:500;line-height:8.8rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bs-docs-booticon.inverse{color:#563d7c;background-color:#fff}.bs-docs-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bs-docs-nav{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bs-home-nav .bs-nav-b{display:none}.bs-docs-nav .navbar-brand,.bs-docs-nav .navbar-nav>li>a{font-weight:500;color:#cdbfe3}.bs-docs-nav .navbar-brand{color:#fff}.bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a,.bs-docs-nav .navbar-nav>.active>a:hover{color:#fff;background-color:#563d7c}.bs-docs-nav .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-nav .navbar-header .navbar-toggle{border-color:#322f38}.bs-docs-nav .navbar-header .navbar-toggle:hover,.bs-docs-nav .navbar-header .navbar-toggle:focus{background-color:#29262f;border-color:#29262f}.bs-docs-footer{margin-top:6rem;font-size:85%;color:#777;text-align:center;border-top:1px solid #e5e5e5}.bs-docs-footer-links{padding-left:0;margin-top:20px;color:#999}.bs-docs-footer-links li{display:inline;padding:0 2px}.bs-docs-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-docs-footer p{margin-bottom:0}.bs-docs .bs-docs-footer{text-align:left}}.bs-docs-social{margin-bottom:1.5rem;text-align:center}.bs-docs-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bs-docs-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bs-docs-social-buttons .twitter-follow-button{width:225px!important}.bs-docs-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}@media (min-width:768px){.bs-docs .bs-docs-social{margin-left:-.5rem;text-align:left}}.bs-docs-masthead{position:relative;padding:2rem 1rem;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#563d7c),to(#6f5499));background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:-o-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF563D7C', endColorstr='#FF6F5499', GradientType=0)}.bs-docs-masthead .bs-docs-booticon{margin:0 auto 2rem}.bs-docs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-docs-masthead .lead{margin:0 auto 2rem;font-size:1.25rem;color:#fff}.bs-docs-masthead .version{margin-top:-1rem;margin-bottom:2rem;color:#9783b9}.bs-docs-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem}@media (min-width:480px){.bs-docs-masthead .btn{width:auto}}@media (min-width:768px){.bs-docs-masthead{padding:5rem 0}.bs-docs-masthead h1{font-size:4rem}.bs-docs-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bs-docs-masthead .lead{width:80%;font-size:2rem}}.bs-docs-header{padding-top:2rem;padding-bottom:2rem;margin-bottom:2rem;text-align:center;background-color:#563d7c}.bs-docs-header .container{position:relative}.bs-docs-header h1{margin-top:0;color:#fff}.bs-docs-header p{margin-bottom:0;font-weight:300;color:rgba(255,255,255,.65)}@media (min-width:768px){.bs-docs-header{text-align:left}.bs-docs-header h1{font-size:4rem;line-height:1}}@media (min-width:992px){.bs-docs-header{padding-top:4rem;padding-bottom:4rem}.bs-docs-header h1,.bs-docs-header p{margin-right:380px}}.carbonad{width:auto!important;height:auto!important;padding:1.25rem!important;margin:2rem -2rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:transparent!important;border:solid #866ab3!important;border-width:1px 0!important}.carbonad-img{margin:0!important}.carbonad-text,.carbonad-tag{display:block!important;float:none!important;width:auto!important;height:auto!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-text a,.carbonad-tag a{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:480px){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bs-docs-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:768px){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:2rem;right:4rem;width:330px!important;padding:1rem!important;margin:0!important}.bs-docs-masthead .carbonad{position:static}}.bs-docs-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bs-docs-featurette+.bs-docs-footer{margin-top:0;border-top:0}.bs-docs-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.bs-docs-featurette h3{margin-bottom:.5rem;font-weight:400;color:#333}.bs-docs-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bs-docs-featurette-img:hover{color:#0275d8;text-decoration:none}.bs-docs-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bs-docs-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bs-docs-featurette{padding-top:6rem;padding-bottom:6rem}.bs-docs-featurette-title{font-size:2.5rem}.bs-docs-featurette .lead{max-width:80%;margin-right:auto;margin-left:auto}.bs-docs-featurette .img-responsive{margin-top:0}}.bs-docs-featured-sites{margin-right:-1px;margin-left:-1px}.bs-docs-featured-sites .col-xs-6{padding:1px}.bs-docs-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bs-docs-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bs-docs-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.bs-examples .img-thumbnail{margin-bottom:.75rem}.bs-examples h4{margin-bottom:.25rem}.bs-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bs-examples{margin-right:-.75rem;margin-left:-.75rem}.bs-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bs-docs-container{position:relative;max-width:62rem;padding:1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-docs-container{padding:2rem}}@media (min-width:992px){.bs-docs-container{padding:2rem 4rem}}.bs-docs-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bs-docs-container>table>thead>tr>th,.bs-docs-container>table>thead>tr>td,.bs-docs-container>table>tbody>tr>th,.bs-docs-container>table>tbody>tr>td,.bs-docs-container>table>tfoot>tr>th,.bs-docs-container>table>tfoot>tr>td{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bs-docs-sidebar{padding:0;margin-bottom:0;background-color:#322f38}.bs-docs-sidebar .navbar-toggle{position:absolute;top:5px;right:0;z-index:5}.bs-docs-sidebar .navbar-toggle .icon-bar{background-color:#fff}.bs-docs-sidebar .navbar-header{float:none;margin-right:-15px}.bs-docs-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bs-docs{padding-left:240px}.bs-docs-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:240px;overflow-x:hidden;overflow-y:auto;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29262f),to(#322f38));background-image:-webkit-linear-gradient(top,#29262f 0,#322f38 100%);background-image:-o-linear-gradient(top,#29262f 0,#322f38 100%);background-image:linear-gradient(to bottom,#29262f 0,#322f38 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29262F', endColorstr='#FF322F38', GradientType=0)}}.bs-docs-sidebar .navbar-brand{display:block;float:none;height:auto;padding:2rem 1.25rem;font-size:20px;font-weight:500;line-height:1;color:#fff}.bs-docs-sidebar-brand:hover,.bs-docs-sidebar-brand:focus{color:#fff;text-decoration:none}.bs-docs-search{position:relative;margin-left:1.25rem;margin-right:1.25rem;margin-bottom:1.5rem}.bs-docs-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;color:rgba(255,255,255,.5);background-color:#423d4b;border-color:#4e4859}.bs-docs-search .form-control:focus{border-color:rgba(255,255,255,.25);-webkit-box-shadow:0 0 .5rem rgba(255,255,255,.25);box-shadow:0 0 .5rem rgba(255,255,255,.25)}.bs-docs-search-results{top:108%;right:0;display:block;padding:0;font-size:.9rem;overflow:hidden;border:0}.bs-docs-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bs-docs-search-results>li:first-child{padding-top:.25rem}.bs-docs-search-results>li:last-child{padding-bottom:.25rem}.bs-docs-sidenav{display:none}.bs-docs-toc-link{display:block;padding:4px 20px;font-size:16px;color:#fff}.bs-docs-toc-link:hover,.bs-docs-toc-link:focus{color:#ffe484;text-decoration:none}.active>.bs-docs-toc-link{font-weight:500;color:#ffe484}.active>.bs-docs-sidenav{display:block}.bs-docs-toc-item.active{margin-top:15px;margin-bottom:15px}.bs-docs-toc-item:first-child{margin-top:0}.bs-docs-toc-item:last-child{margin-bottom:30px}.bs-docs-sidebar .nav>li>a{display:block;padding:4px 20px;font-size:14px;color:#99979c}.bs-docs-sidebar .nav>li>a:hover,.bs-docs-sidebar .nav>li>a:focus{color:#ffe484;text-decoration:none;background-color:transparent}.bs-docs-sidebar .nav>.active>a,.bs-docs-sidebar .nav>.active:hover>a,.bs-docs-sidebar .nav>.active:focus>a{font-weight:500;color:#ffe484;background-color:transparent}.bs-docs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-docs-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.bs-docs-sidebar .nav .nav>.active>a,.bs-docs-sidebar .nav .nav>.active:hover>a,.bs-docs-sidebar .nav .nav>.active:focus>a{font-weight:500}.bs-docs-sidebar .nav>.active>.nav{display:block}.bs-docs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:13px}.bs-docs-content>h1{padding-top:2rem;margin-top:3rem}.bs-docs-content>h1:first-child{margin-top:0}.bs-docs-content>h1+p{font-size:1.25rem;font-weight:300}.bs-docs-content>h2{margin-top:3rem}.bs-docs-content>h3{margin-top:1.5rem}.bs-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bs-callout h4{margin-top:0;margin-bottom:.25rem}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{border-radius:.25rem}.bs-callout+.bs-callout{margin-top:-.25rem}.bs-callout-danger{border-left-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{border-left-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{border-left-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem;border-radius:.25rem}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}}.color-swatches .bs-purple{background-color:#563d7c}.color-swatches .bs-purple-light{background-color:#cdbfe3}.color-swatches .bs-purple-lighter{background-color:#e5e1ea}.color-swatches .bs-gray{background-color:#f9f9f9}.bs-team .team-member{line-height:2rem;color:#555}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bs-team img{float:left;width:2rem;margin-right:.5rem;border-radius:.25rem}.bs-docs-browser-bugs td p{margin-bottom:0}.bs-docs-browser-bugs th:first-child{width:18%}.bs-example>.row{margin-bottom:1rem}.bs-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bs-example{position:relative;padding:1.5rem;margin-top:1rem;margin-bottom:-1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bs-example:before,.bs-example:after{content:" ";display:table}.bs-example:after{clear:both}@media (min-width:480px){.bs-example{border-width:.2rem}}.bs-example .container{width:auto}.bs-example>.card{float:left;max-width:15rem;margin:.25rem}.bs-example>.nav+.nav{margin-top:1rem}.bs-example>:last-child,.bs-example>.table-responsive:last-child>.table{margin-bottom:0!important}.bs-example>.close{float:none}.bs-example-type .table .type-info{color:#999;vertical-align:middle}.bs-example-type .table td{padding:1rem 0;border-color:#eee}.bs-example-type .table tr:first-child td{border-top:0}.bs-example-type h1,.bs-example-type h2,.bs-example-type h3,.bs-example-type h4,.bs-example-type h5,.bs-example-type h6{margin:0}.bs-example-bg-classes p{padding:1rem}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:.25rem}.bs-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bs-example-control-sizing select,.bs-example-control-sizing input[type=text]+input[type=text]{margin-top:.5rem}.bs-example-form .input-group{margin-bottom:.5rem}.bs-example>textarea.form-control{resize:vertical}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.bs-navbar-top-example .navbar-header,.bs-navbar-bottom-example .navbar-header{margin-left:0}.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:relative;margin-right:0;margin-left:0}.bs-navbar-top-example{padding-bottom:45px}.bs-navbar-top-example .navbar-fixed-top{top:-1px}.bs-navbar-bottom-example{padding-top:45px}.bs-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bs-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bs-navbar-top-example .navbar-fixed-top,.bs-navbar-bottom-example .navbar-fixed-bottom{position:absolute}}.bs-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bs-example>.dropdown>.dropdown-toggle{float:left}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bs-example-tabs .nav-tabs{margin-bottom:1rem}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bs-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bs-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.highlight{padding:1.5rem;margin-top:1rem;margin-bottom:1rem;background-color:#f7f7f9}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td{text-align:center}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.visible-on .col-xs-6 .hidden-xs,.visible-on .col-xs-6 .hidden-sm,.visible-on .col-xs-6 .hidden-md,.visible-on .col-xs-6 .hidden-lg,.hidden-on .col-xs-6 .hidden-xs,.hidden-on .col-xs-6 .hidden-sm,.hidden-on .col-xs-6 .hidden-md,.hidden-on .col-xs-6 .hidden-lg{color:#999;border:1px solid #ddd}.visible-on .col-xs-6 .visible-xs-block,.visible-on .col-xs-6 .visible-sm-block,.visible-on .col-xs-6 .visible-md-block,.visible-on .col-xs-6 .visible-lg-block,.hidden-on .col-xs-6 .visible-xs-block,.hidden-on .col-xs-6 .visible-sm-block,.hidden-on .col-xs-6 .visible-md-block,.hidden-on .col-xs-6 .visible-lg-block{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bs-brand-item{padding:4rem 0;text-align:center}.bs-brand-item+.bs-brand-item{border-top:1px solid #fff}.bs-brand-logos .inverse{color:#fff;background-color:#563d7c}.bs-brand-item .svg{width:9rem;height:9rem}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-docs-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bs-brand-item{display:table-cell;width:1%}.bs-brand-item+.bs-brand-item{border-top:0;border-left:1px solid #fff}.bs-brand-item h1{font-size:4rem}}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem 0 .2rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.zero-clipboard{display:block}}#focusedInput{border-color:#66afe9;outline:0;outline:thin dotted \9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}
\ No newline at end of file
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 1336d71d3..b9c70e1d7 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -786,6 +786,7 @@ body {
 
   > h2 {
     margin-top: 3rem;
+    font-weight: normal;
   }
 
   > h3 {
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
deleted file mode 100644
index ac2ccc6cf..000000000
--- a/docs/components/buttons.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-layout: page
-title: Buttons
----
-
-Use any of the available button classes to quickly create a styled button.
-
-{% example html %}
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
-
-<!-- Secondary, outline button -->
-<button type="button" class="btn btn-secondary">Secondary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
-<button type="button" class="btn btn-link">Link</button>
-{% endexample %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Conveying meaning to assistive technologies</h4>
-  <p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
-</div>
-
-## Button tags
-
-Use the button classes on an `<a>`, `<button>`, or `<input>` element.
-
-{% example html %}
-<a class="btn btn-secondary" href="#" role="button">Link</a>
-<button class="btn btn-secondary" type="submit">Button</button>
-<input class="btn btn-secondary" type="button" value="Input">
-<input class="btn btn-secondary" type="submit" value="Submit">
-{% endexample %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Links acting as buttons</h4>
-  <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
-</div>
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Cross-browser rendering</h4>
-  <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
-</div>
-
-## Sizes
-
-Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
-
-{% example html %}
-<button type="button" class="btn btn-primary btn-lg">Large button</button>
-<button type="button" class="btn btn-secondary btn-lg">Large button</button>
-{% endexample %}
-
-{% example html %}
-<button type="button" class="btn btn-primary btn-sm">Small button</button>
-<button type="button" class="btn btn-secondary btn-sm">Small button</button>
-{% endexample %}
-
-{% example html %}
-<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
-<button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
-{% endexample %}
-
-Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
-
-{% example html %}
-<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
-<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
-{% endexample %}
-
-## Active state
-
-Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
-
-{% example html %}
-<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
-<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
-{% endexample %}
-
-## Disabled state
-
-Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element.
-
-{% example html %}
-<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
-<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
-{% endexample %}
-
-As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
-
-{% example html %}
-<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
-<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
-{% endexample %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Cross-browser compatibility</h4>
-  <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
-</div>
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Link functionality caveat</h4>
-  <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
-</div>
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Context-specific usage</h4>
-  <p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
-</div>
diff --git a/docs/components/code.md b/docs/components/code.md
deleted file mode 100644
index 19c02c84e..000000000
--- a/docs/components/code.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: page
-title: Code
----
-
-Styles for inline code snippets and longer, multiline blocks of code.
-
-## Inline code
-
-Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
-
-{% example html %}
-For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-{% endexample %}
-
-## User input
-
-Use the `<kbd>` to indicate input that is typically entered via keyboard.
-
-{% example html %}
-To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
-To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
-{% endexample %}
-
-## Preformatted text
-
-Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.
-
-{% example html %}
-<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
-{% endexample %}
-
-You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
-
-## Variables
-
-For indicating variables use the `<var>` tag.
-
-{% example html %}
-<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
-{% endexample %}
-
-## Sample output
-
-For indicating blocks sample output from a program use the `<samp>` tag.
-
-{% example html %}
-<samp>This text is meant to be treated as sample output from a computer program.</samp>
-{% endexample %}
diff --git a/docs/components/forms.md b/docs/components/forms.md
deleted file mode 100644
index 7d274c2a0..000000000
--- a/docs/components/forms.md
+++ /dev/null
@@ -1,517 +0,0 @@
----
-layout: page
-title: Forms
----
-
-Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
-
-## Example form
-
-Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
-
-{% example html %}
-<form>
-  <div class="form-group">
-    <label for="exampleInputEmail1">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-  </div>
-  <div class="form-group">
-    <label for="exampleInputPassword1">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-  </div>
-  <div class="form-group">
-    <label for="exampleInputFile">File input</label>
-    <input type="file" id="exampleInputFile">
-    <p class="help-block">Example block-level help text here.</p>
-  </div>
-  <div class="checkbox">
-    <label>
-      <input type="checkbox"> Check me out
-    </label>
-  </div>
-  <button type="submit" class="btn btn-secondary">Submit</button>
-</form>
-{% endexample %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Don't mix form groups with input groups</h4>
-  <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
-</div>
-
-## Inline forms
-
-Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Requires custom widths</h4>
-  <p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
-</div>
-<div class="bs-callout bs-callout-warning">
-  <h4>Always add labels</h4>
-  <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
-</div>
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputEmail2">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
-  </div>
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputPassword2">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
-  </div>
-  <div class="checkbox">
-    <label>
-      <input type="checkbox"> Remember me
-    </label>
-  </div>
-  <button type="submit" class="btn btn-default">Sign in</button>
-</form>
-{% endexample %}
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
-    <div class="input-group">
-      <div class="input-group-addon">$</div>
-      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
-      <div class="input-group-addon">.00</div>
-    </div>
-  </div>
-  <button type="submit" class="btn btn-primary">Transfer cash</button>
-</form>
-{% endexample %}
-
-## Horizontal forms
-
-Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
-
-{% example html %}
-<form class="form-horizontal">
-  <div class="form-group">
-    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
-    <div class="col-sm-10">
-      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
-    <div class="col-sm-10">
-      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Remember me
-        </label>
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-secondary">Sign in</button>
-    </div>
-  </div>
-</form>
-{% endexample %}
-
-## Supported controls
-
-Examples of standard form controls supported in an example form layout.
-
-### Inputs
-
-Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Type declaration required</h4>
-  <p>Inputs will only be fully styled if their `type` is properly declared.</p>
-</div>
-
-{% example html %}
-<input type="text" class="form-control" placeholder="Text input">
-{% endexample %}
-
-<div class="bs-callout bs-callout-info">
-  <h4>Input groups</h4>
-  <p>To add integrated text or buttons before and/or after any text-based `&lt;input&gt;`, <a href="../components/#input-groups">check out the input group component</a>.</p>
-</div>
-
-### Textarea
-
-Form control which supports multiple lines of text. Change `rows` attribute as necessary.
-
-{% example html %}
-<textarea class="form-control" rows="3"></textarea>
-{% endexample %}
-
-### Checkboxes and radios
-
-Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
-
-A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
-
-#### Default (stacked)
-
-{% example html %}
-<div class="checkbox">
-  <label>
-    <input type="checkbox" value="">
-    Option one is this and that&mdash;be sure to include why it's great
-  </label>
-</div>
-<div class="checkbox disabled">
-  <label>
-    <input type="checkbox" value="" disabled>
-    Option two is disabled
-  </label>
-</div>
-
-<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-    Option one is this and that&mdash;be sure to include why it's great
-  </label>
-</div>
-<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-    Option two can be something else and selecting it will deselect option one
-  </label>
-</div>
-<div class="radio disabled">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
-    Option three is disabled
-  </label>
-</div>
-{% endexample %}
-
-#### Inline
-
-Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
-
-{% example html %}
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="checkbox-inline">
-  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-
-<label class="radio-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
-</label>
-<label class="radio-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
-</label>
-<label class="radio-inline">
-  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
-</label>
-{% endexample %}
-
-#### Without labels
-
-Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
-
-{% example html %}
-<div class="checkbox">
-  <label>
-    <input type="checkbox" id="blankCheckbox" value="option1">
-  </label>
-</div>
-<div class="radio">
-  <label>
-    <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
-  </label>
-</div>
-{% endexample %}
-
-### Selects
-
-Use the default option, or add `multiple` to show multiple options at once.
-
-{% example html %}
-<select class="form-control">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
-<select multiple class="form-control">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-{% endexample %}
-
-## Static controls
-
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
-
-{% example html %}
-<form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Email</label>
-    <div class="col-sm-10">
-      <p class="form-control-static">email@example.com</p>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
-    <div class="col-sm-10">
-      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
-    </div>
-  </div>
-</form>
-{% endexample %}
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group">
-    <label class="sr-only">Email</label>
-    <p class="form-control-static">email@example.com</p>
-  </div>
-  <div class="form-group">
-    <label for="inputPassword2" class="sr-only">Password</label>
-    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
-  </div>
-  <button type="submit" class="btn btn-default">Confirm identity</button>
-</form>
-{% endexample %}
-
-## Focus state
-
-We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
-
-<div class="bs-example">
-  <form>
-    <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
-  </form>
-</div>
-
-<div class="bs-callout bs-callout-info">
-  <h4>Demo `:focus` state</h4>
-  <p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
-</div>
-
-## Disabled states
-
-Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look.
-
-{% highlight html %}
-<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-{% endhighlight %}
-
-Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
-
-{% example html %}
-<form>
-  <fieldset disabled>
-    <div class="form-group">
-      <label for="disabledTextInput">Disabled input</label>
-      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
-    </div>
-    <div class="form-group">
-      <label for="disabledSelect">Disabled select menu</label>
-      <select id="disabledSelect" class="form-control">
-        <option>Disabled select</option>
-      </select>
-    </div>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox"> Can't check this
-      </label>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
-  </fieldset>
-</form>
-{% endexample %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Caveat about link functionality of `&lt;a&gt;`</h4>
-  <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
-</div>
-
-<div class="bs-callout bs-callout-danger">
-  <h4>Cross-browser compatibility</h4>
-  <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
-</div>
-
-## Readonly inputs
-
-Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
-
-{% example html %}
-<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
-{% endexample %}
-
-## Validation
-
-Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
-
-{% example html %}
-<div class="form-group has-success">
-  <label class="control-label" for="inputSuccess1">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess1">
-</div>
-<div class="form-group has-warning">
-  <label class="control-label" for="inputWarning1">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning1">
-</div>
-<div class="form-group has-error">
-  <label class="control-label" for="inputError1">Input with error</label>
-  <input type="text" class="form-control" id="inputError1">
-</div>
-<div class="has-success">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" id="checkboxSuccess" value="option1">
-      Checkbox with success
-    </label>
-  </div>
-</div>
-<div class="has-warning">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" id="checkboxWarning" value="option1">
-      Checkbox with warning
-    </label>
-  </div>
-</div>
-<div class="has-error">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" id="checkboxError" value="option1">
-      Checkbox with error
-    </label>
-  </div>
-</div>
-{% endexample %}
-
-You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Icons, labels, and input groups</h4>
-  <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
-</div>
-
-{% example html %}
-<div class="form-group has-success has-feedback">
-  <label class="control-label" for="inputSuccess2">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess2">
-  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-</div>
-<div class="form-group has-warning has-feedback">
-  <label class="control-label" for="inputWarning2">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning2">
-  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
-</div>
-<div class="form-group has-error has-feedback">
-  <label class="control-label" for="inputError2">Input with error</label>
-  <input type="text" class="form-control" id="inputError2">
-  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
-</div>
-{% endexample %}
-
-{% example html %}
-<form class="form-horizontal">
-  <div class="form-group has-success has-feedback">
-    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
-    <div class="col-sm-9">
-      <input type="text" class="form-control" id="inputSuccess3">
-      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-    </div>
-  </div>
-</form>
-{% endexample %}
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group has-success has-feedback">
-    <label class="control-label" for="inputSuccess4">Input with success</label>
-    <input type="text" class="form-control" id="inputSuccess4">
-    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-  </div>
-</form>
-{% endexample %}
-
-For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
-
-{% example html %}
-<div class="form-group has-success has-feedback">
-  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
-  <input type="text" class="form-control" id="inputSuccess5">
-  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
-</div>
-{% endexample %}
-
-## Control sizing
-
-Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
-
-{% example html %}
-<input class="form-control input-lg" type="text" placeholder=".input-lg">
-<input class="form-control" type="text" placeholder="Default input">
-<input class="form-control input-sm" type="text" placeholder=".input-sm">
-
-<select class="form-control input-lg"></select>
-<select class="form-control"></select>
-<select class="form-control input-sm"></select>
-{% endexample %}
-
-Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
-
-{% example html %}
-<form class="form-horizontal">
-  <div class="form-group form-group-lg">
-    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
-    <div class="col-sm-10">
-      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
-    </div>
-  </div>
-  <div class="form-group form-group-sm">
-    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
-    <div class="col-sm-10">
-      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
-    </div>
-  </div>
-</form>
-{% endexample %}
-
-## Column sizing
-
-Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
-
-{% example html %}
-<div class="row">
-  <div class="col-xs-2">
-    <input type="text" class="form-control" placeholder=".col-xs-2">
-  </div>
-  <div class="col-xs-3">
-    <input type="text" class="form-control" placeholder=".col-xs-3">
-  </div>
-  <div class="col-xs-4">
-    <input type="text" class="form-control" placeholder=".col-xs-4">
-  </div>
-</div>
-{% endexample %}
-
-## Help text
-
-Block level help text for form controls.
-
-{% example html %}
-<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
-{% endexample %}
diff --git a/docs/components/images.md b/docs/components/images.md
deleted file mode 100644
index 713023a90..000000000
--- a/docs/components/images.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: page
-title: Images
----
-
-## Responsive images
-
-Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element.
-
-<div class="bs-example">
-  <img data-src="holder.js/1000x200" class="img-responsive" alt="Generic responsive image">
-</div>
-
-{% highlight html %}
-<img src="..." class="img-responsive" alt="Responsive image">
-{% endhighlight %}
-
-<div class="bs-callout bs-callout-warning">
-  <h4>SVG images and IE 9-10</h4>
-  <p>In Internet Explorer 9-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
-</div>
-
-## Image shapes
-
-Add classes to an `<img>` element to easily style images in any project.
-
-<div class="bs-example bs-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
-  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
-</div>
-
-{% highlight html %}
-<img src="..." alt="..." class="img-rounded">
-<img src="..." alt="..." class="img-circle">
-<img src="..." alt="..." class="img-thumbnail">
-{% endhighlight %}
diff --git a/docs/components/tables.md b/docs/components/tables.md
deleted file mode 100644
index 23e25a215..000000000
--- a/docs/components/tables.md
+++ /dev/null
@@ -1,593 +0,0 @@
----
-layout: page
-title: Tables
----
-
-Due to the widespread use of tables across plugins like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
-
-## Basic example
-
-{% example html %}
-<table class="table">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Inverse table
-
-{% example html %}
-<table class="table table-inverse">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Table head options
-
-Use one of two modifier classes to make `<thead>`s appear light or dark gray.
-
-{% example html %}
-<table class="table">
-  <thead class="thead-inverse">
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-  <thead class="thead-default">
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Striped rows
-
-Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
-
-{% example html %}
-<table class="table table-striped">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Bordered table
-
-Add `.table-bordered` for borders on all sides of the table and cells.
-
-{% example html %}
-<table class="table table-bordered">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@TwBootstrap</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">4</th>
-      <td colspan="2">Larry the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Hoverable rows
-
-Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
-
-{% example html %}
-<table class="table table-hover">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td colspan="2">Larry the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Small table
-
-Add `.table-sm` to make tables more compact by cutting cell padding in half.
-
-{% example html %}
-<table class="table table-sm">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td colspan="2">Larry the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
-
-## Contextual classes
-
-Use contextual classes to color table rows or individual cells.
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <colgroup>
-      <col class="col-xs-1">
-      <col class="col-xs-7">
-    </colgroup>
-    <thead>
-      <tr>
-        <th>Class</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">
-          <code>.active</code>
-        </th>
-        <td>Applies the hover color to a particular row or cell</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <code>.success</code>
-        </th>
-        <td>Indicates a successful or positive action</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <code>.info</code>
-        </th>
-        <td>Indicates a neutral informative change or action</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <code>.warning</code>
-        </th>
-        <td>Indicates a warning that might need attention</td>
-      </tr>
-      <tr>
-        <th scope="row">
-          <code>.danger</code>
-        </th>
-        <td>Indicates a dangerous or potentially negative action</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="bs-example">
-  <table class="table">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="active">
-        <th scope="row">1</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">2</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="success">
-        <th scope="row">3</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">4</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="info">
-        <th scope="row">5</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">6</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="warning">
-        <th scope="row">7</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">8</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="danger">
-        <th scope="row">9</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% highlight html %}
-<!-- On rows -->
-<tr class="active">...</tr>
-<tr class="success">...</tr>
-<tr class="warning">...</tr>
-<tr class="danger">...</tr>
-<tr class="info">...</tr>
-
-<!-- On cells (`td` or `th`) -->
-<tr>
-  <td class="active">...</td>
-  <td class="success">...</td>
-  <td class="warning">...</td>
-  <td class="danger">...</td>
-  <td class="info">...</td>
-</tr>
-{% endhighlight %}
-
-## Responsive tables
-
-Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
-
-<div class="bs-callout bs-callout-warning">
-  <h4>Firefox and fieldsets</h4>
-  <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
-{% highlight css %}
-@-moz-document url-prefix() {
-  fieldset { display: table-cell; }
-}
-{% endhighlight %}
-  <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
-</div>
-
-<div class="bs-example">
-  <div class="table-responsive">
-    <table class="table">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th scope="row">1</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-        <tr>
-          <th scope="row">2</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-        <tr>
-          <th scope="row">3</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="table-responsive">
-    <table class="table table-bordered">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-          <th>Table heading</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th scope="row">1</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-        <tr>
-          <th scope="row">2</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-        <tr>
-          <th scope="row">3</th>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-          <td>Table cell</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-
-{% highlight html %}
-<div class="table-responsive">
-  <table class="table">
-    ...
-  </table>
-</div>
-{% endhighlight %}
-
-
-### Reflow
-
-{% example html %}
-<table class="table table-reflow">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-      <th>Table heading</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-      <td>Table cell</td>
-    </tr>
-  </tbody>
-</table>
-{% endexample %}
diff --git a/docs/components/typography.md b/docs/components/typography.md
deleted file mode 100644
index 43f87cbde..000000000
--- a/docs/components/typography.md
+++ /dev/null
@@ -1,354 +0,0 @@
----
-layout: page
-title: Typography
----
-
-Bootstrap includes simple and easily customized typography across the project. In addition to the standard headings, body text, and lists, utility classes are also included.
-
-## Global settings
-
-Bootstrap sets basic global display, typography, and link styles. Specifically, we:
-
-- Set `background-color: #fff;` on the `<body>`
-- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base
-- Set the global link color via `@link-color` and apply link underlines only on `:hover`
-
-These styles can be found within `scaffolding.less`.
-
-
-## Headings
-
-All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
-
-<div class="bs-example bs-example-type">
-  <table class="table">
-    <tbody>
-      <tr>
-        <td><h1>h1. Bootstrap heading</h1></td>
-        <td class="type-info">Semibold 36px</td>
-      </tr>
-      <tr>
-        <td><h2>h2. Bootstrap heading</h2></td>
-        <td class="type-info">Semibold 30px</td>
-      </tr>
-      <tr>
-        <td><h3>h3. Bootstrap heading</h3></td>
-        <td class="type-info">Semibold 24px</td>
-      </tr>
-      <tr>
-        <td><h4>h4. Bootstrap heading</h4></td>
-        <td class="type-info">Semibold 18px</td>
-      </tr>
-      <tr>
-        <td><h5>h5. Bootstrap heading</h5></td>
-        <td class="type-info">Semibold 14px</td>
-      </tr>
-      <tr>
-        <td><h6>h6. Bootstrap heading</h6></td>
-        <td class="type-info">Semibold 12px</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% highlight html %}
-<h1>h1. Bootstrap heading</h1>
-<h2>h2. Bootstrap heading</h2>
-<h3>h3. Bootstrap heading</h3>
-<h4>h4. Bootstrap heading</h4>
-<h5>h5. Bootstrap heading</h5>
-<h6>h6. Bootstrap heading</h6>
-{% endhighlight %}
-
-Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
-
-<div class="bs-example bs-example-type">
-  <table class="table">
-    <tbody>
-      <tr>
-        <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
-      </tr>
-      <tr>
-        <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
-      </tr>
-      <tr>
-        <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
-      </tr>
-      <tr>
-        <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
-      </tr>
-      <tr>
-        <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
-      </tr>
-      <tr>
-        <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% highlight html %}
-<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
-<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
-<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
-<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
-<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
-<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
-{% endhighlight %}
-
-## Body copy
-
-Bootstrap's base text is sized with global `font-size: 16px;` and `line-height: 1.5;`. This is applied to the `<body>` and all paragraphs.
-
-{% example html %}
-<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
-<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
-{% endexample %}
-
-## Lead
-
-Make a paragraph stand out by adding `.lead`.
-
-{% example html %}
-<p class="lead">
-  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-</p>
-{% endexample %}
-
-## Inline text elements
-
-Styling for common inline HTML5 elements.
-
-{% example html %}
-<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-<p><del>This line of text is meant to be treated as deleted text.</del></p>
-<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
-<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-<p><u>This line of text will render as underlined</u></p>
-<p><small>This line of text is meant to be treated as fine print.</small></p>
-<p><strong>This line rendered as bold text.</strong></p>
-<p><em>This line rendered as italicized text.</em></p>
-{% endexample %}
-
-<div class="bs-callout bs-callout-info">
-  <h4>Alternate elements</h4>
-  <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
-</div>
-
-## Alignment classes
-
-Easily realign text to components with text alignment classes.
-
-{% example html %}
-<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
-<p class="text-justify">Justified text.</p>
-<p class="text-nowrap">No wrap text.</p>
-{% endexample %}
-
-## Transformation classes
-
-Transform text in components with text capitalization classes.
-
-{% example html %}
-<p class="text-lowercase">Lowercased text.</p>
-<p class="text-uppercase">Uppercased text.</p>
-<p class="text-capitalize">Capitalized text.</p>
-{% endexample %}
-
-## Abbreviations
-
-Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
-
-### Basic abbreviation
-
-For expanded text on long hover of an abbreviation, include the `title` attribute with the `<abbr>` element.
-
-{% example html %}
-<abbr title="attribute">attr</abbr>
-{% endexample %}
-
-### Initialism
-
-Add `.initialism` to an abbreviation for a slightly smaller font-size.
-
-{% example html %}
-<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
-{% endexample %}
-
-## Address
-
-Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with `<br>`.
-
-{% example html %}
-<address>
-  <strong>Twitter, Inc.</strong><br>
-  795 Folsom Ave, Suite 600<br>
-  San Francisco, CA 94107<br>
-  <abbr title="Phone">P:</abbr> (123) 456-7890
-</address>
-
-<address>
-  <strong>Full Name</strong><br>
-  <a href="mailto:#">first.last@example.com</a>
-</address>
-{% endexample %}
-
-## Blockquotes
-
-For quoting blocks of content from another source within your document.
-
-### Default blockquote
-
-Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`.
-
-{% example html %}
-<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-</blockquote>
-{% endexample %}
-
-### Blockquote options
-
-Style and content changes for simple variations on a standard `<blockquote>`.
-
-#### Naming a source
-
-Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
-
-{% example html %}
-<blockquote>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
-{% endexample %}
-
-#### Reverse layout
-
-Add `.blockquote-reverse` for a blockquote with right-aligned content.
-
-{% example html %}
-<blockquote class="blockquote-reverse">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-</blockquote>
-{% endexample %}
-
-## Lists
-
-### Unordered
-
-A list of items in which the order does *not* explicitly matter.
-
-{% example html %}
-<ul>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-{% endexample %}
-
-### Ordered
-
-A list of items in which the order *does* explicitly matter.
-
-{% example html %}
-<ol>
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Nulla volutpat aliquam velit
-    <ol>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ol>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ol>
-{% endexample %}
-
-### Unstyled
-
-Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
-
-{% example html %}
-<ul class="list-unstyled">
-  <li>Lorem ipsum dolor sit amet</li>
-  <li>Consectetur adipiscing elit</li>
-  <li>Integer molestie lorem at massa</li>
-  <li>Facilisis in pretium nisl aliquet</li>
-  <li>Nulla volutpat aliquam velit
-    <ul>
-      <li>Phasellus iaculis neque</li>
-      <li>Purus sodales ultricies</li>
-      <li>Vestibulum laoreet porttitor sem</li>
-      <li>Ac tristique libero volutpat at</li>
-    </ul>
-  </li>
-  <li>Faucibus porta lacus fringilla vel</li>
-  <li>Aenean sit amet erat nunc</li>
-  <li>Eget porttitor lorem</li>
-</ul>
-{% endexample %}
-
-### Inline
-
-Place all list items on a single line with `display: inline-block;` and some light padding.
-
-{% example html %}
-<ul class="list-inline">
-  <li>Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
-</ul>
-{% endexample %}
-
-### Description
-
-A list of terms with their associated descriptions.
-
-{% example html %}
-<dl>
-  <dt>Description lists</dt>
-  <dd>A description list is perfect for defining terms.</dd>
-  <dt>Euismod</dt>
-  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-  <dt>Malesuada porta</dt>
-  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-</dl>
-{% endexample %}
-
-### Horizontal description
-
-Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
-
-{% example html %}
-<dl class="dl-horizontal">
-  <dt class="col-sm-3">Description lists</dt>
-  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
-
-  <dt class="col-sm-3">Euismod</dt>
-  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
-  
-  <dt class="col-sm-3">Malesuada porta</dt>
-  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
-  
-  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
-  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-</dl>
-{% endexample %}
diff --git a/docs/content/buttons.md b/docs/content/buttons.md
new file mode 100644
index 000000000..ac2ccc6cf
--- /dev/null
+++ b/docs/content/buttons.md
@@ -0,0 +1,118 @@
+---
+layout: page
+title: Buttons
+---
+
+Use any of the available button classes to quickly create a styled button.
+
+{% example html %}
+<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
+<button type="button" class="btn btn-primary">Primary</button>
+
+<!-- Secondary, outline button -->
+<button type="button" class="btn btn-secondary">Secondary</button>
+
+<!-- Indicates a successful or positive action -->
+<button type="button" class="btn btn-success">Success</button>
+
+<!-- Indicates caution should be taken with this action -->
+<button type="button" class="btn btn-warning">Warning</button>
+
+<!-- Indicates a dangerous or potentially negative action -->
+<button type="button" class="btn btn-danger">Danger</button>
+
+<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
+<button type="button" class="btn btn-link">Link</button>
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Conveying meaning to assistive technologies</h4>
+  <p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
+</div>
+
+## Button tags
+
+Use the button classes on an `<a>`, `<button>`, or `<input>` element.
+
+{% example html %}
+<a class="btn btn-secondary" href="#" role="button">Link</a>
+<button class="btn btn-secondary" type="submit">Button</button>
+<input class="btn btn-secondary" type="button" value="Input">
+<input class="btn btn-secondary" type="submit" value="Submit">
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Links acting as buttons</h4>
+  <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
+</div>
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Cross-browser rendering</h4>
+  <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
+</div>
+
+## Sizes
+
+Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
+<button type="button" class="btn btn-secondary btn-xs">Extra small button</button>
+{% endexample %}
+
+Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
+{% endexample %}
+
+## Active state
+
+Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
+
+{% example html %}
+<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
+{% endexample %}
+
+## Disabled state
+
+Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element.
+
+{% example html %}
+<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+{% endexample %}
+
+As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
+
+{% example html %}
+<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Cross-browser compatibility</h4>
+  <p>If you add the <code>disabled</code> attribute to a <code>&lt;button&gt;</code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
+</div>
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Link functionality caveat</h4>
+  <p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a&gt;</code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
+</div>
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Context-specific usage</h4>
+  <p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
+</div>
diff --git a/docs/content/code.md b/docs/content/code.md
new file mode 100644
index 000000000..19c02c84e
--- /dev/null
+++ b/docs/content/code.md
@@ -0,0 +1,49 @@
+---
+layout: page
+title: Code
+---
+
+Styles for inline code snippets and longer, multiline blocks of code.
+
+## Inline code
+
+Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
+
+{% example html %}
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+{% endexample %}
+
+## User input
+
+Use the `<kbd>` to indicate input that is typically entered via keyboard.
+
+{% example html %}
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+{% endexample %}
+
+## Preformatted text
+
+Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.
+
+{% example html %}
+<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
+{% endexample %}
+
+You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
+
+## Variables
+
+For indicating variables use the `<var>` tag.
+
+{% example html %}
+<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+{% endexample %}
+
+## Sample output
+
+For indicating blocks sample output from a program use the `<samp>` tag.
+
+{% example html %}
+<samp>This text is meant to be treated as sample output from a computer program.</samp>
+{% endexample %}
diff --git a/docs/content/forms.md b/docs/content/forms.md
new file mode 100644
index 000000000..7d274c2a0
--- /dev/null
+++ b/docs/content/forms.md
@@ -0,0 +1,517 @@
+---
+layout: page
+title: Forms
+---
+
+Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
+
+## Example form
+
+Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
+
+{% example html %}
+<form>
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-group">
+    <label for="exampleInputFile">File input</label>
+    <input type="file" id="exampleInputFile">
+    <p class="help-block">Example block-level help text here.</p>
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-secondary">Submit</button>
+</form>
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Don't mix form groups with input groups</h4>
+  <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
+</div>
+
+## Inline forms
+
+Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
+
+<div class="bs-callout bs-callout-danger">
+  <h4>Requires custom widths</h4>
+  <p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+  <h4>Always add labels</h4>
+  <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
+</div>
+
+{% example html %}
+<form class="form-inline">
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputEmail2">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+  </div>
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputPassword2">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <button type="submit" class="btn btn-default">Sign in</button>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+  <div class="form-group">
+    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
+    <div class="input-group">
+      <div class="input-group-addon">$</div>
+      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
+      <div class="input-group-addon">.00</div>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-primary">Transfer cash</button>
+</form>
+{% endexample %}
+
+## Horizontal forms
+
+Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
+
+{% example html %}
+<form class="form-horizontal">
+  <div class="form-group">
+    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+    <div class="col-sm-10">
+      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-secondary">Sign in</button>
+    </div>
+  </div>
+</form>
+{% endexample %}
+
+## Supported controls
+
+Examples of standard form controls supported in an example form layout.
+
+### Inputs
+
+Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
+
+<div class="bs-callout bs-callout-danger">
+  <h4>Type declaration required</h4>
+  <p>Inputs will only be fully styled if their `type` is properly declared.</p>
+</div>
+
+{% example html %}
+<input type="text" class="form-control" placeholder="Text input">
+{% endexample %}
+
+<div class="bs-callout bs-callout-info">
+  <h4>Input groups</h4>
+  <p>To add integrated text or buttons before and/or after any text-based `&lt;input&gt;`, <a href="../components/#input-groups">check out the input group component</a>.</p>
+</div>
+
+### Textarea
+
+Form control which supports multiple lines of text. Change `rows` attribute as necessary.
+
+{% example html %}
+<textarea class="form-control" rows="3"></textarea>
+{% endexample %}
+
+### Checkboxes and radios
+
+Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
+
+A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
+
+#### Default (stacked)
+
+{% example html %}
+<div class="checkbox">
+  <label>
+    <input type="checkbox" value="">
+    Option one is this and that&mdash;be sure to include why it's great
+  </label>
+</div>
+<div class="checkbox disabled">
+  <label>
+    <input type="checkbox" value="" disabled>
+    Option two is disabled
+  </label>
+</div>
+
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    Option one is this and that&mdash;be sure to include why it's great
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+    Option two can be something else and selecting it will deselect option one
+  </label>
+</div>
+<div class="radio disabled">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+    Option three is disabled
+  </label>
+</div>
+{% endexample %}
+
+#### Inline
+
+Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
+
+{% example html %}
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox-inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+</label>
+<label class="radio-inline">
+  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+</label>
+{% endexample %}
+
+#### Without labels
+
+Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
+
+{% example html %}
+<div class="checkbox">
+  <label>
+    <input type="checkbox" id="blankCheckbox" value="option1">
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
+  </label>
+</div>
+{% endexample %}
+
+### Selects
+
+Use the default option, or add `multiple` to show multiple options at once.
+
+{% example html %}
+<select class="form-control">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select multiple class="form-control">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+{% endexample %}
+
+## Static controls
+
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+
+{% example html %}
+<form class="form-horizontal">
+  <div class="form-group">
+    <label class="col-sm-2 control-label">Email</label>
+    <div class="col-sm-10">
+      <p class="form-control-static">email@example.com</p>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+  <div class="form-group">
+    <label class="sr-only">Email</label>
+    <p class="form-control-static">email@example.com</p>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword2" class="sr-only">Password</label>
+    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
+  </div>
+  <button type="submit" class="btn btn-default">Confirm identity</button>
+</form>
+{% endexample %}
+
+## Focus state
+
+We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
+
+<div class="bs-example">
+  <form>
+    <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
+  </form>
+</div>
+
+<div class="bs-callout bs-callout-info">
+  <h4>Demo `:focus` state</h4>
+  <p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
+</div>
+
+## Disabled states
+
+Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look.
+
+{% highlight html %}
+<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+{% endhighlight %}
+
+Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
+
+{% example html %}
+<form>
+  <fieldset disabled>
+    <div class="form-group">
+      <label for="disabledTextInput">Disabled input</label>
+      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+    </div>
+    <div class="form-group">
+      <label for="disabledSelect">Disabled select menu</label>
+      <select id="disabledSelect" class="form-control">
+        <option>Disabled select</option>
+      </select>
+    </div>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+{% endexample %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Caveat about link functionality of `&lt;a&gt;`</h4>
+  <p>By default, browsers will treat all native form controls (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> and <code>&lt;button&gt;</code> elements) inside a <code>&lt;fieldset disabled&gt;</code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code>&lt;a ... class="btn btn-*"&gt;</code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
+</div>
+
+<div class="bs-callout bs-callout-danger">
+  <h4>Cross-browser compatibility</h4>
+  <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
+</div>
+
+## Readonly inputs
+
+Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
+
+{% example html %}
+<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
+{% endexample %}
+
+## Validation
+
+Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
+
+{% example html %}
+<div class="form-group has-success">
+  <label class="control-label" for="inputSuccess1">Input with success</label>
+  <input type="text" class="form-control" id="inputSuccess1">
+</div>
+<div class="form-group has-warning">
+  <label class="control-label" for="inputWarning1">Input with warning</label>
+  <input type="text" class="form-control" id="inputWarning1">
+</div>
+<div class="form-group has-error">
+  <label class="control-label" for="inputError1">Input with error</label>
+  <input type="text" class="form-control" id="inputError1">
+</div>
+<div class="has-success">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxSuccess" value="option1">
+      Checkbox with success
+    </label>
+  </div>
+</div>
+<div class="has-warning">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxWarning" value="option1">
+      Checkbox with warning
+    </label>
+  </div>
+</div>
+<div class="has-error">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" id="checkboxError" value="option1">
+      Checkbox with error
+    </label>
+  </div>
+</div>
+{% endexample %}
+
+You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Icons, labels, and input groups</h4>
+  <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
+</div>
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+  <label class="control-label" for="inputSuccess2">Input with success</label>
+  <input type="text" class="form-control" id="inputSuccess2">
+  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+</div>
+<div class="form-group has-warning has-feedback">
+  <label class="control-label" for="inputWarning2">Input with warning</label>
+  <input type="text" class="form-control" id="inputWarning2">
+  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
+</div>
+<div class="form-group has-error has-feedback">
+  <label class="control-label" for="inputError2">Input with error</label>
+  <input type="text" class="form-control" id="inputError2">
+  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+</div>
+{% endexample %}
+
+{% example html %}
+<form class="form-horizontal">
+  <div class="form-group has-success has-feedback">
+    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="inputSuccess3">
+      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    </div>
+  </div>
+</form>
+{% endexample %}
+
+{% example html %}
+<form class="form-inline">
+  <div class="form-group has-success has-feedback">
+    <label class="control-label" for="inputSuccess4">Input with success</label>
+    <input type="text" class="form-control" id="inputSuccess4">
+    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+  </div>
+</form>
+{% endexample %}
+
+For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
+
+{% example html %}
+<div class="form-group has-success has-feedback">
+  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
+  <input type="text" class="form-control" id="inputSuccess5">
+  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+</div>
+{% endexample %}
+
+## Control sizing
+
+Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
+
+{% example html %}
+<input class="form-control input-lg" type="text" placeholder=".input-lg">
+<input class="form-control" type="text" placeholder="Default input">
+<input class="form-control input-sm" type="text" placeholder=".input-sm">
+
+<select class="form-control input-lg"></select>
+<select class="form-control"></select>
+<select class="form-control input-sm"></select>
+{% endexample %}
+
+Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
+
+{% example html %}
+<form class="form-horizontal">
+  <div class="form-group form-group-lg">
+    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+    </div>
+  </div>
+  <div class="form-group form-group-sm">
+    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+    </div>
+  </div>
+</form>
+{% endexample %}
+
+## Column sizing
+
+Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
+
+{% example html %}
+<div class="row">
+  <div class="col-xs-2">
+    <input type="text" class="form-control" placeholder=".col-xs-2">
+  </div>
+  <div class="col-xs-3">
+    <input type="text" class="form-control" placeholder=".col-xs-3">
+  </div>
+  <div class="col-xs-4">
+    <input type="text" class="form-control" placeholder=".col-xs-4">
+  </div>
+</div>
+{% endexample %}
+
+## Help text
+
+Block level help text for form controls.
+
+{% example html %}
+<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
+{% endexample %}
diff --git a/docs/content/images.md b/docs/content/images.md
new file mode 100644
index 000000000..713023a90
--- /dev/null
+++ b/docs/content/images.md
@@ -0,0 +1,37 @@
+---
+layout: page
+title: Images
+---
+
+## Responsive images
+
+Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element.
+
+<div class="bs-example">
+  <img data-src="holder.js/1000x200" class="img-responsive" alt="Generic responsive image">
+</div>
+
+{% highlight html %}
+<img src="..." class="img-responsive" alt="Responsive image">
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-warning">
+  <h4>SVG images and IE 9-10</h4>
+  <p>In Internet Explorer 9-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
+</div>
+
+## Image shapes
+
+Add classes to an `<img>` element to easily style images in any project.
+
+<div class="bs-example bs-example-images">
+  <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="img-rounded">
+<img src="..." alt="..." class="img-circle">
+<img src="..." alt="..." class="img-thumbnail">
+{% endhighlight %}
diff --git a/docs/content/tables.md b/docs/content/tables.md
new file mode 100644
index 000000000..23e25a215
--- /dev/null
+++ b/docs/content/tables.md
@@ -0,0 +1,593 @@
+---
+layout: page
+title: Tables
+---
+
+Due to the widespread use of tables across plugins like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
+
+## Basic example
+
+{% example html %}
+<table class="table">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Inverse table
+
+{% example html %}
+<table class="table table-inverse">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Table head options
+
+Use one of two modifier classes to make `<thead>`s appear light or dark gray.
+
+{% example html %}
+<table class="table">
+  <thead class="thead-inverse">
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+  <thead class="thead-default">
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Striped rows
+
+Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
+
+{% example html %}
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Bordered table
+
+Add `.table-bordered` for borders on all sides of the table and cells.
+
+{% example html %}
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@TwBootstrap</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">4</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Hoverable rows
+
+Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
+
+{% example html %}
+<table class="table table-hover">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Small table
+
+Add `.table-sm` to make tables more compact by cutting cell padding in half.
+
+{% example html %}
+<table class="table table-sm">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+## Contextual classes
+
+Use contextual classes to color table rows or individual cells.
+
+<div class="table-responsive">
+  <table class="table table-bordered table-striped">
+    <colgroup>
+      <col class="col-xs-1">
+      <col class="col-xs-7">
+    </colgroup>
+    <thead>
+      <tr>
+        <th>Class</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">
+          <code>.active</code>
+        </th>
+        <td>Applies the hover color to a particular row or cell</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <code>.success</code>
+        </th>
+        <td>Indicates a successful or positive action</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <code>.info</code>
+        </th>
+        <td>Indicates a neutral informative change or action</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <code>.warning</code>
+        </th>
+        <td>Indicates a warning that might need attention</td>
+      </tr>
+      <tr>
+        <th scope="row">
+          <code>.danger</code>
+        </th>
+        <td>Indicates a dangerous or potentially negative action</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="bs-example">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="active">
+        <th scope="row">1</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="success">
+        <th scope="row">3</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">4</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="info">
+        <th scope="row">5</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">6</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="warning">
+        <th scope="row">7</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">8</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="danger">
+        <th scope="row">9</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight html %}
+<!-- On rows -->
+<tr class="active">...</tr>
+<tr class="success">...</tr>
+<tr class="warning">...</tr>
+<tr class="danger">...</tr>
+<tr class="info">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+  <td class="active">...</td>
+  <td class="success">...</td>
+  <td class="warning">...</td>
+  <td class="danger">...</td>
+  <td class="info">...</td>
+</tr>
+{% endhighlight %}
+
+## Responsive tables
+
+Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
+
+<div class="bs-callout bs-callout-warning">
+  <h4>Firefox and fieldsets</h4>
+  <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
+{% highlight css %}
+@-moz-document url-prefix() {
+  fieldset { display: table-cell; }
+}
+{% endhighlight %}
+  <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
+</div>
+
+<div class="bs-example">
+  <div class="table-responsive">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="table-responsive">
+    <table class="table table-bordered">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+          <th>Table heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+          <td>Table cell</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% highlight html %}
+<div class="table-responsive">
+  <table class="table">
+    ...
+  </table>
+</div>
+{% endhighlight %}
+
+
+### Reflow
+
+{% example html %}
+<table class="table table-reflow">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
diff --git a/docs/content/typography.md b/docs/content/typography.md
new file mode 100644
index 000000000..43f87cbde
--- /dev/null
+++ b/docs/content/typography.md
@@ -0,0 +1,354 @@
+---
+layout: page
+title: Typography
+---
+
+Bootstrap includes simple and easily customized typography across the project. In addition to the standard headings, body text, and lists, utility classes are also included.
+
+## Global settings
+
+Bootstrap sets basic global display, typography, and link styles. Specifically, we:
+
+- Set `background-color: #fff;` on the `<body>`
+- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base
+- Set the global link color via `@link-color` and apply link underlines only on `:hover`
+
+These styles can be found within `scaffolding.less`.
+
+
+## Headings
+
+All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
+
+<div class="bs-example bs-example-type">
+  <table class="table">
+    <tbody>
+      <tr>
+        <td><h1>h1. Bootstrap heading</h1></td>
+        <td class="type-info">Semibold 36px</td>
+      </tr>
+      <tr>
+        <td><h2>h2. Bootstrap heading</h2></td>
+        <td class="type-info">Semibold 30px</td>
+      </tr>
+      <tr>
+        <td><h3>h3. Bootstrap heading</h3></td>
+        <td class="type-info">Semibold 24px</td>
+      </tr>
+      <tr>
+        <td><h4>h4. Bootstrap heading</h4></td>
+        <td class="type-info">Semibold 18px</td>
+      </tr>
+      <tr>
+        <td><h5>h5. Bootstrap heading</h5></td>
+        <td class="type-info">Semibold 14px</td>
+      </tr>
+      <tr>
+        <td><h6>h6. Bootstrap heading</h6></td>
+        <td class="type-info">Semibold 12px</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight html %}
+<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+{% endhighlight %}
+
+Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
+
+<div class="bs-example bs-example-type">
+  <table class="table">
+    <tbody>
+      <tr>
+        <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
+      </tr>
+      <tr>
+        <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
+      </tr>
+      <tr>
+        <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
+      </tr>
+      <tr>
+        <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
+      </tr>
+      <tr>
+        <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
+      </tr>
+      <tr>
+        <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight html %}
+<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
+<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
+<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
+<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
+<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
+<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
+{% endhighlight %}
+
+## Body copy
+
+Bootstrap's base text is sized with global `font-size: 16px;` and `line-height: 1.5;`. This is applied to the `<body>` and all paragraphs.
+
+{% example html %}
+<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+{% endexample %}
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`.
+
+{% example html %}
+<p class="lead">
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+</p>
+{% endexample %}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{% example html %}
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+{% endexample %}
+
+<div class="bs-callout bs-callout-info">
+  <h4>Alternate elements</h4>
+  <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+</div>
+
+## Alignment classes
+
+Easily realign text to components with text alignment classes.
+
+{% example html %}
+<p class="text-left">Left aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+<p class="text-justify">Justified text.</p>
+<p class="text-nowrap">No wrap text.</p>
+{% endexample %}
+
+## Transformation classes
+
+Transform text in components with text capitalization classes.
+
+{% example html %}
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">Capitalized text.</p>
+{% endexample %}
+
+## Abbreviations
+
+Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
+
+### Basic abbreviation
+
+For expanded text on long hover of an abbreviation, include the `title` attribute with the `<abbr>` element.
+
+{% example html %}
+<abbr title="attribute">attr</abbr>
+{% endexample %}
+
+### Initialism
+
+Add `.initialism` to an abbreviation for a slightly smaller font-size.
+
+{% example html %}
+<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
+{% endexample %}
+
+## Address
+
+Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with `<br>`.
+
+{% example html %}
+<address>
+  <strong>Twitter, Inc.</strong><br>
+  795 Folsom Ave, Suite 600<br>
+  San Francisco, CA 94107<br>
+  <abbr title="Phone">P:</abbr> (123) 456-7890
+</address>
+
+<address>
+  <strong>Full Name</strong><br>
+  <a href="mailto:#">first.last@example.com</a>
+</address>
+{% endexample %}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document.
+
+### Default blockquote
+
+Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`.
+
+{% example html %}
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+</blockquote>
+{% endexample %}
+
+### Blockquote options
+
+Style and content changes for simple variations on a standard `<blockquote>`.
+
+#### Naming a source
+
+Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
+
+{% example html %}
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+{% endexample %}
+
+#### Reverse layout
+
+Add `.blockquote-reverse` for a blockquote with right-aligned content.
+
+{% example html %}
+<blockquote class="blockquote-reverse">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+</blockquote>
+{% endexample %}
+
+## Lists
+
+### Unordered
+
+A list of items in which the order does *not* explicitly matter.
+
+{% example html %}
+<ul>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+{% endexample %}
+
+### Ordered
+
+A list of items in which the order *does* explicitly matter.
+
+{% example html %}
+<ol>
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Nulla volutpat aliquam velit
+    <ol>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ol>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>
+{% endexample %}
+
+### Unstyled
+
+Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+
+{% example html %}
+<ul class="list-unstyled">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul>
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>
+{% endexample %}
+
+### Inline
+
+Place all list items on a single line with `display: inline-block;` and some light padding.
+
+{% example html %}
+<ul class="list-inline">
+  <li>Lorem ipsum</li>
+  <li>Phasellus iaculis</li>
+  <li>Nulla volutpat</li>
+</ul>
+{% endexample %}
+
+### Description
+
+A list of terms with their associated descriptions.
+
+{% example html %}
+<dl>
+  <dt>Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+  <dt>Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>
+{% endexample %}
+
+### Horizontal description
+
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{% example html %}
+<dl class="dl-horizontal">
+  <dt class="col-sm-3">Description lists</dt>
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+  <dt class="col-sm-3">Euismod</dt>
+  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
+  
+  <dt class="col-sm-3">Malesuada porta</dt>
+  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+  
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+</dl>
+{% endexample %}
-- 
cgit v1.2.3