Massive cleanup

- Simpler main nav on all pages
- Back to purple masthead on homepage instead of dark graphite
- Active link styles on the main nav
- Cleaned up sidebar nav
- New docs layout name
- Homepage copy edits
- Updated bright purple docs color

Gruntfile.js

@@ -362,6 +362,10 @@ module.exports = function (grunt) {
       sass: {
         files: 'scss/**/*.scss',
         tasks: ['dist-css', 'docs']
+      },
+      docs: {
+        files: 'docs/assets/scss/**/*.scss',
+        tasks: ['dist-css', 'docs']
       }
     },
 

dist/css/bootstrap.css

@@ -580,8 +580,8 @@ mark,
 }
 
 .dl-horizontal {
-  margin-right: -1.5rem;
-  margin-left: -1.5rem;
+  margin-right: -1.875rem;
+  margin-left: -1.875rem;
 }
 
 .dl-horizontal:before,
@@ -734,8 +734,8 @@ pre code {
 }
 
 .container {
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
   margin-right: auto;
   margin-left: auto;
 }
@@ -775,8 +775,8 @@ pre code {
 }
 
 .container-fluid {
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
   margin-right: auto;
   margin-left: auto;
 }
@@ -792,8 +792,8 @@ pre code {
 }
 
 .row {
-  margin-right: -.75rem;
-  margin-left: -.75rem;
+  margin-right: -.9375rem;
+  margin-left: -.9375rem;
 }
 
 .row:before,
@@ -809,8 +809,8 @@ pre code {
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
   position: relative;
   min-height: 1px;
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
 }
 
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
@@ -3596,31 +3596,13 @@ input[type="button"].btn-block {
   list-style: none;
 }
 
-.nav:before,
-.nav:after {
-  display: table;
-  content: " ";
-}
-
-.nav:after {
-  clear: both;
-}
-
-.nav-item {
-  position: relative;
-  display: inline-block;
-}
-
 .nav-link {
   display: inline-block;
-  padding: .75em 1em;
-  line-height: 1;
 }
 
 .nav-link:focus,
 .nav-link:hover {
   text-decoration: none;
-  background-color: #eceeef;
 }
 
 .disabled > .nav-link,
@@ -3639,6 +3621,10 @@ input[type="button"].btn-block {
   background-color: transparent;
 }
 
+.nav-inline .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
@@ -3654,6 +3640,7 @@ input[type="button"].btn-block {
 
 .nav-tabs .nav-link {
   display: block;
+  padding: .75em 1em;
   border: 1px solid transparent;
   border-radius: .25rem .25rem 0 0;
 }
@@ -3701,6 +3688,7 @@ input[type="button"].btn-block {
 
 .nav-pills .nav-link {
   display: block;
+  padding: .75em 1em;
   border-radius: .25rem;
 }
 
@@ -5974,39 +5962,39 @@ a.text-primary:hover {
 }
 
 .text-success {
-  color: #3c763d;
+  color: #5cb85c;
 }
 
 a.text-success:focus,
 a.text-success:hover {
-  color: #2b542c;
+  color: #449d44;
 }
 
 .text-info {
-  color: #31708f;
+  color: #5bc0de;
 }
 
 a.text-info:focus,
 a.text-info:hover {
-  color: #245269;
+  color: #31b0d5;
 }
 
 .text-warning {
-  color: #8a6d3b;
+  color: #f0ad4e;
 }
 
 a.text-warning:focus,
 a.text-warning:hover {
-  color: #66512c;
+  color: #ec971f;
 }
 
 .text-danger {
-  color: #a94442;
+  color: #d9534f;
 }
 
 a.text-danger:focus,
 a.text-danger:hover {
-  color: #843534;
+  color: #c9302c;
 }
 
 .inverse {
@@ -6016,9 +6004,6 @@ a.text-danger:hover {
 
 .bg-primary {
   color: #fff;
-}
-
-.bg-primary {
   background-color: #0275d8;
 }
 
@@ -6028,243 +6013,288 @@ a.bg-primary:hover {
 }
 
 .bg-success {
-  background-color: #dff0d8;
+  color: #fff;
+  background-color: #5cb85c;
 }
 
 a.bg-success:focus,
 a.bg-success:hover {
-  background-color: #c1e2b3;
+  background-color: #449d44;
 }
 
 .bg-info {
-  background-color: #d9edf7;
+  color: #fff;
+  background-color: #5bc0de;
 }
 
 a.bg-info:focus,
 a.bg-info:hover {
-  background-color: #afd9ee;
+  background-color: #31b0d5;
 }
 
 .bg-warning {
-  background-color: #fcf8e3;
+  color: #fff;
+  background-color: #f0ad4e;
 }
 
 a.bg-warning:focus,
 a.bg-warning:hover {
-  background-color: #f7ecb5;
+  background-color: #ec971f;
 }
 
 .bg-danger {
-  background-color: #f2dede;
+  color: #fff;
+  background-color: #d9534f;
 }
 
 a.bg-danger:focus,
 a.bg-danger:hover {
-  background-color: #e4b9b9;
+  background-color: #c9302c;
 }
 
 .m-a-0 {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .m-t-0 {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 
 .m-r-0 {
-  margin-right: 0;
+  margin-right: 0 !important;
 }
 
 .m-b-0 {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .m-l-0 {
-  margin-left: 0;
+  margin-left: 0 !important;
+}
+
+.m-x-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.m-y-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 
 .m-a {
-  margin: 1rem;
+  margin: 1rem !important;
 }
 
 .m-t {
-  margin-top: 1rem;
+  margin-top: 1rem !important;
 }
 
 .m-r {
-  margin-right: 1rem;
+  margin-right: 1rem !important;
 }
 
 .m-b {
-  margin-bottom: 1rem;
+  margin-bottom: 1rem !important;
 }
 
 .m-l {
-  margin-left: 1rem;
+  margin-left: 1rem !important;
 }
 
 .m-x {
-  margin-right: 1rem;
-  margin-left: 1rem;
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
 }
 
 .m-y {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.m-a-md {
+  margin: 1.5rem !important;
 }
 
 .m-t-md {
-  margin-top: 1.5rem;
+  margin-top: 1.5rem !important;
 }
 
 .m-r-md {
-  margin-right: 1.5rem;
+  margin-right: 1.5rem !important;
 }
 
 .m-b-md {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.5rem !important;
 }
 
 .m-l-md {
-  margin-left: 1.5rem;
+  margin-left: 1.5rem !important;
 }
 
 .m-x-md {
-  margin-right: 1.5rem;
-  margin-left: 1.5rem;
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
 }
 
 .m-y-md {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-a-lg {
+  margin: 3rem !important;
 }
 
 .m-t-lg {
-  margin-top: 3rem;
+  margin-top: 3rem !important;
 }
 
 .m-r-lg {
-  margin-right: 3rem;
+  margin-right: 3rem !important;
 }
 
 .m-b-lg {
-  margin-bottom: 3rem;
+  margin-bottom: 3rem !important;
 }
 
 .m-l-lg {
-  margin-left: 3rem;
+  margin-left: 3rem !important;
 }
 
 .m-x-lg {
-  margin-right: 3rem;
-  margin-left: 3rem;
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
 }
 
 .m-y-lg {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
 }
 
 .p-a-0 {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .p-t-0 {
-  padding-top: 0;
+  padding-top: 0 !important;
 }
 
 .p-r-0 {
-  padding-right: 0;
+  padding-right: 0 !important;
 }
 
 .p-b-0 {
-  padding-bottom: 0;
+  padding-bottom: 0 !important;
 }
 
 .p-l-0 {
-  padding-left: 0;
+  padding-left: 0 !important;
+}
+
+.p-x-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.p-y-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .p-a {
-  padding: 1rem;
+  padding: 1rem !important;
 }
 
 .p-t {
-  padding-top: 1rem;
+  padding-top: 1rem !important;
 }
 
 .p-r {
-  padding-right: 1rem;
+  padding-right: 1rem !important;
 }
 
 .p-b {
-  padding-bottom: 1rem;
+  padding-bottom: 1rem !important;
 }
 
 .p-l {
-  padding-left: 1rem;
+  padding-left: 1rem !important;
 }
 
 .p-x {
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
 }
 
 .p-y {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-a-md {
+  padding: 1.5rem !important;
 }
 
 .p-t-md {
-  padding-top: 1.5rem;
+  padding-top: 1.5rem !important;
 }
 
 .p-r-md {
-  padding-right: 1.5rem;
+  padding-right: 1.5rem !important;
 }
 
 .p-b-md {
-  padding-bottom: 1.5rem;
+  padding-bottom: 1.5rem !important;
 }
 
 .p-l-md {
-  padding-left: 1.5rem;
+  padding-left: 1.5rem !important;
 }
 
 .p-x-md {
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
 }
 
 .p-y-md {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-a-lg {
+  padding: 3rem !important;
 }
 
 .p-t-lg {
-  padding-top: 3rem;
+  padding-top: 3rem !important;
 }
 
 .p-r-lg {
-  padding-right: 3rem;
+  padding-right: 3rem !important;
 }
 
 .p-b-lg {
-  padding-bottom: 3rem;
+  padding-bottom: 3rem !important;
 }
 
 .p-l-lg {
-  padding-left: 3rem;
+  padding-left: 3rem !important;
 }
 
 .p-x-lg {
-  padding-right: 3rem;
-  padding-left: 3rem;
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
 }
 
 .p-y-lg {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
 }
 
 .pos-f-t {

docs/_includes/header.html

@@ -20,7 +20,8 @@
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 
 <!-- Google Web fonts -->
-<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700" rel="stylesheet">
+<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
+<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600' rel='stylesheet' type='text/css'>
 
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>

docs/_includes/nav-home.html

-<header class="navbar navbar-sm navbar-inverse navbar-static-top bd-navbar" role="banner">
-  <nav class="nav navbar-nav">
-    <a class="nav-item nav-link" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
-    <a class="nav-item nav-link" href="{{ site.baseurl }}/getting-started/overview/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
-    <a class="nav-item nav-link" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+<header class="navbar navbar-sm navbar-defeault navbar-static-top bd-navbar" role="banner">
+  <div class="container-fluid">
+    <nav class="nav nav-inline">
+      <a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
+      <a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      <a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
       <a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
       <a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
     </nav>
+  </div>
 </header>

docs/_layouts/docs.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header.html %}
+  </head>
+  <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
+    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
+      <div class="container">
+        <span class="skiplink-text">Skip to main content</span>
+      </div>
+    </a>
+
+    {% include nav-home.html %}
+
+    <div class="bd-pageheader text-xs-center text-sm-left">
+      <div class="container">
+        {% include page-headers.html %}
+        {% include ads.html %}
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3 col-md-push-9 bd-sidebar">
+          {% include nav-docs.html %}
+        </div>
+        <div class="col-md-9 col-md-pull-3 bd-content">
+          <h1 class="bd-title">{{ page.title }}</h1>
+          {{ content }}
+        </div>
+      </div>
+    </div>
+
+    {% include footer.html %}
+  </body>
+</html>

docs/_layouts/page.html

----
-layout: default
----
-
-<div class="bd-pageheader text-xs-center text-sm-left">
-  <div class="container">
-    {% include page-headers.html %}
-    {% include ads.html %}
-  </div>
-</div>
-
-<div class="container">
-  <div class="row">
-    <div class="col-md-3 col-md-push-9 bd-sidebar">
-      {% include nav-docs.html %}
-    </div>
-    <div class="col-md-9 col-md-pull-3 bd-content">
-      <h1 class="bd-title">{{ page.title }}</h1>
-      {{ content }}
-    </div>
-  </div>
-</div>

docs/_layouts/simple.html

@@ -2,8 +2,16 @@
 layout: default
 ---
 
-<div class="container bd-content">
+<div class="bd-pageheader text-xs-center text-sm-left">
+  <div class="container">
+    <h1>{{ page.title }}</h1>
+    <p class="lead">
+      Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+    </p>
     {% include ads.html %}
-  <h1 class="bd-title">{{ page.title }}</h1>
+  </div>
+</div>
+
+<div class="container bd-content">
   {{ content }}
 </div>

docs/about/brand.md

 ---
-layout: page
+layout: docs
 title: Brand guidelines
 group: about
 ---

docs/about/history.md

 ---
-layout: page
+layout: docs
 title: History
 group: about
 ---

docs/about/license.md

 ---
-layout: page
+layout: docs
 title: License FAQs
 group: about
 ---

docs/about/team.md

 ---
-layout: page
+layout: docs
 title: Team
 group: about
 ---

docs/about/translations.md

 ---
-layout: page
+layout: docs
 title: Translations
 group: about
 ---

docs/assets/scss/_buttons.scss

@@ -3,43 +3,14 @@
 // Custom buttons for the docs.
 
 .btn-bs {
-  color: $bd-purple;
-  border-color: $bd-purple;
+  color: $bd-purple-bright;
+  border-color: $bd-purple-bright;
 
   &:hover,
   &:focus,
   &:active {
     color: #fff;
-    background-color:$bd-purple;
-    border-color: $bd-purple;
+    background-color:$bd-purple-bright;
+    border-color: $bd-purple-bright;
   }
 }
-
-// .btn-outline {
-//   color: $bd-purple;
-//   background-color: transparent;
-//   border-color: $bd-purple;
-//
-//   &:hover,
-//   &:focus,
-//   &:active {
-//     color: #fff;
-//     background-color:$bd-purple;
-//     border-color: $bd-purple;
-//   }
-// }
-//
-// .btn-outline-inverse {
-//   color: #fff;
-//   background-color: transparent;
-//   border-color: $bd-purple-light;
-//
-//   &:hover,
-//   &:focus,
-//   &:active {
-//     color: $bd-purple;
-//     text-shadow: none;
-//     background-color: #fff;
-//     border-color: #fff;
-//   }
-// }

docs/assets/scss/_homepage.scss

 //
-// Home navigation
-//
-
-.bd-nav-home {
-  margin-bottom: 0;
-  background-color: #563d7c;
-  border-bottom: 0;
-
-  .navbar-brand > a {
-    font-weight: 500;
-    color: #fff;
-  }
-
-  .nav-link {
-    font-weight: 500;
-    color: #cdbfe3;
-
-    &:hover,
-    &:focus {
-      color: #fff;
-      background-color: rgba(0,0,0,.5);
-    }
-  }
-}
-
-
-//
-// Homepage
+// Main navbar
 //
 
 .bd-navbar {
-  padding: .25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   margin-bottom: 0;
-  background-color: $bd-graphite;
+  // background-color: $bd-graphite;
 
   .nav-link {
     color: $bd-graphite-light;
@@ -40,50 +14,16 @@
     &.active,
     &:hover,
     &:focus {
-      color: #fff;
+      color: $gray-dark;
       background-color: transparent;
     }
+
+    &.active {
+      font-weight: 500;
+    }
   }
 }
 
-//
-// .bd-header {
-//   @include clearfix;
-//   padding-bottom: .5rem;
-//   margin-bottom: 1rem;
-//   border-bottom: 1px solid rgba(255,255,255,.25);
-//
-//   .bd-header-mark {
-//     float: left;
-//     padding-top: .6rem;
-//     padding-bottom: .6rem;
-//     font-size: 1.25rem;
-//     font-weight: 500;
-//   }
-// }
-//
-// .bd-header-nav {
-//   padding-bottom: 1rem;
-//   margin-bottom: 2rem;
-//   border-bottom: .0625rem solid #eee;
-//
-//   .nav-link {
-//     display: inline-block;
-//     padding: 1.2rem .75rem;
-//
-//     &:hover {
-//       background-color: transparent;
-//     }
-//   }
-//
-//   @include media-breakpoint-up(sm) {
-//     float: right;
-//     padding-bottom: 0;
-//     margin-bottom: 0;
-//     border-bottom: 0;
-//   }
-// }
-
 
 //
 // Masthead (headings and download button)
@@ -92,15 +32,15 @@
 .bd-masthead {
   position: relative;
   padding: ($grid-gutter-width / 2);
-  color: $bd-graphite-light;
+  color: $bd-purple-light;
   text-align: center;
-  background: -webkit-linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
-  background: linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
+  background: -webkit-linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
+  background:         linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
 
   .bd-booticon {
     margin: 0 auto 2rem;
-    color: $bd-purple-bright;
-    border-color: $bd-purple-bright;
+    color: $bd-purple-light;
+    border-color: $bd-purple-light;
   }
 
   h1 {
@@ -112,7 +52,8 @@
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 2rem;
-    font-size: 1.25rem;
+    font-size: 1rem;
+    color: #fff;
   }
 
   .version {
@@ -174,7 +115,7 @@
 
   @include media-breakpoint-up(lg) {
     .lead {
-      width: 80%;
+      width: 85%;
       font-size: 2rem;
     }
   }

docs/assets/scss/_sidebar.scss

@@ -3,65 +3,14 @@
 //
 
 .bd-sidebar {
-  // padding: 0;
-  // margin-bottom: 0;
-  // background-color: #fafafa;
-
-  // .navbar-toggler {
-  //   position: absolute;
-  //   top: 1rem;
-  //   right: 0;
-  //   z-index: 5;
-  // }
+  @include media-breakpoint-up(md) {
+    padding-left: 1rem;
+  }
 }
 
-// .bd-sidebar .navbar-header {
-//   float: none;
-//   margin-right: -15px;
-// }
-//
-// .bd-sidebar .navbar-collapse {
-//   padding: 0;
-//   border: 0;
-// }
-
-// @media (min-width: 992px) {
-  // .bd-docs {
-  //   margin-left: 240px;
-  // }
-  // .bd-sidebar {
-  //   position: fixed;
-  //   top: 3.7rem;
-  //   bottom: 0;
-  //   left: 0;
-  //   width: 240px;
-  //   overflow-y: auto;
-  //   border-right: 1px solid #eee;
-  //   -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
-  // }
-// }
-//
-// .bd-sidebar .navbar-brand {
-//   display: block;
-//   float: none;
-//   height: auto;
-//   padding: 1.55rem 1.25rem;
-//   font-size: 20px;
-//   font-weight: 500;
-//   line-height: 1;
-//   // color: #fff;
-// }
-// .bd-sidebar-brand:hover,
-// .bd-sidebar-brand:focus {
-//   // color: #fff;
-//   text-decoration: none;
-// }
-
 .bd-search {
   position: relative;
-  margin-right: 1.25rem;
   margin-bottom: 1.5rem;
-  margin-left: 1.25rem;
 
   .form-control {
     height: 2.45rem;
@@ -108,21 +57,17 @@
 
 .bd-toc-link {
   display: block;
-  padding: .25rem 1.25rem;
+  padding: .25rem .75rem;
   color: $gray;
-  // font-size: 1rem;
-  // color: #fff;
 }
 .bd-toc-link:hover,
 .bd-toc-link:focus {
-  // color: $bd-yellow;
   color: $brand-primary;
   text-decoration: none;
 }
 .active > .bd-toc-link {
   font-weight: 500;
   color: $gray-dark;
-  // color: $bd-yellow;
 }
 .active > .bd-sidenav {
   display: block;
@@ -142,14 +87,13 @@
 // All levels of nav
 .bd-sidebar .nav > li > a {
   display: block;
-  padding: .25rem 1.25rem;
+  padding: .25rem .75rem;
   font-size: 90%;
   color: #99979c;
 }
 .bd-sidebar .nav > li > a:hover,
 .bd-sidebar .nav > li > a:focus {
   color: $brand-primary;
-  // color: $bd-yellow;
   text-decoration: none;
   background-color: transparent;
 }
@@ -158,34 +102,5 @@
 .bd-sidebar .nav > .active:focus > a {
   font-weight: 500;
   color: $gray-dark;
-  // color: $bd-yellow;
   background-color: transparent;
 }
-
-// Nav: second level (shown on .active)
-.bd-sidebar .nav .nav {
-  display: none; // Hide by default, but at >768px, show it
-  padding-bottom: .75rem;
-}
-.bd-sidebar .nav .nav > li > a {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  padding-left: 2rem;
-  font-size: 75%;
-  font-weight: normal;
-}
-.bd-sidebar .nav .nav > .active > a,
-.bd-sidebar .nav .nav > .active:hover > a,
-.bd-sidebar .nav .nav > .active:focus > a {
-  font-weight: 500;
-}
-
-.bd-sidebar .nav > .active > .nav {
-  display: block;
-}
-.bd-sidebar .nav .nav > li > a {
-  padding-top: .125rem;
-  padding-bottom: .125rem;
-  padding-left: 2rem;
-  font-size: 80%;
-}

docs/assets/scss/docs.scss

@@ -28,7 +28,7 @@
 
 // Local docs variables
 $bd-purple:         #563d7c;
-$bd-purple-bright:  lighten(saturate($bd-purple, 25%), 25%);
+$bd-purple-bright:  lighten(saturate($bd-purple, 15%), 25%);
 $bd-purple-light:   #cdbfe3;
 $bd-graphite:       #2a2730;
 $bd-graphite-light: lighten($bd-graphite, 40%);

docs/components/alerts.md

 ---
-layout: page
+layout: docs
 title: Alerts
 group: components
 ---

docs/components/breadcrumb.md

 ---
-layout: page
+layout: docs
 title: Breadcrumb
 group: components
 ---

docs/components/button-dropdown.md

 ---
-layout: page
+layout: docs
 title: Button dropdown
 group: components
 ---

docs/components/button-group.md

 ---
-layout: page
+layout: docs
 title: Button group
 group: components
 ---

docs/components/buttons.md

 ---
-layout: page
+layout: docs
 title: Buttons
 group: components
 ---

docs/components/card.md

 ---
-layout: page
+layout: docs
 title: Cards
 group: components
 ---

docs/components/carousel.md

 ---
-layout: page
+layout: docs
 title: Carousel
 group: components
 ---

docs/components/collapse.md

 ---
-layout: page
+layout: docs
 title: Collapse
 group: components
 ---

docs/components/dropdowns.md

 ---
-layout: page
+layout: docs
 title: Dropdowns
 group: components
 ---

docs/components/forms.md

 ---
-layout: page
+layout: docs
 title: Forms
 group: components
 ---

docs/components/input-group.md

 ---
-layout: page
+layout: docs
 title: Input group
 group: components
 ---

docs/components/jumbotron.md

 ---
-layout: page
+layout: docs
 title: Jumbotron
 group: components
 ---

docs/components/label.md

 ---
-layout: page
+layout: docs
 title: Labels
 group: components
 ---

docs/components/list-group.md

 ---
-layout: page
+layout: docs
 title: List group
 group: components
 ---

docs/components/modal.md

 ---
-layout: page
+layout: docs
 title: Modal
 group: components
 ---

docs/components/navbar.md

 ---
-layout: page
+layout: docs
 title: Navbar
 group: components
 ---

docs/components/navs.md

 ---
-layout: page
+layout: docs
 title: Navs
 group: components
 ---

docs/components/pagination.md

 ---
-layout: page
+layout: docs
 title: Pagination
 group: components
 ---

docs/components/popovers.md

 ---
-layout: page
+layout: docs
 title: Popovers
 group: components
 ---

docs/components/progress.md

 ---
-layout: page
+layout: docs
 title: Progress
 group: components
 ---

docs/components/scrollspy.md

 ---
-layout: page
+layout: docs
 title: Srollspy
 group: components
 ---

docs/components/tooltips.md

 ---
-layout: page
+layout: docs
 title: Tooltips
 group: components
 ---

docs/components/utilities.md

 ---
-layout: page
+layout: docs
 title: Utility classes
 group: components
 ---

docs/content/code.md

 ---
-layout: page
+layout: docs
 title: Code
 group: content
 ---

docs/content/figures.md

 ---
-layout: page
+layout: docs
 title: Images
 group: content
 ---

docs/content/images.md

 ---
-layout: page
+layout: docs
 title: Images
 group: content
 ---

docs/content/reboot.md

 ---
-layout: page
+layout: docs
 title: Reboot
 group: content
 ---

docs/content/tables.md

 ---
-layout: page
+layout: docs
 title: Tables
 group: content
 ---

docs/content/typography.md

 ---
-layout: page
+layout: docs
 title: Typography
 group: content
 ---

docs/dist/css/bootstrap.css

@@ -580,8 +580,8 @@ mark,
 }
 
 .dl-horizontal {
-  margin-right: -1.5rem;
-  margin-left: -1.5rem;
+  margin-right: -1.875rem;
+  margin-left: -1.875rem;
 }
 
 .dl-horizontal:before,
@@ -734,8 +734,8 @@ pre code {
 }
 
 .container {
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
   margin-right: auto;
   margin-left: auto;
 }
@@ -775,8 +775,8 @@ pre code {
 }
 
 .container-fluid {
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
   margin-right: auto;
   margin-left: auto;
 }
@@ -792,8 +792,8 @@ pre code {
 }
 
 .row {
-  margin-right: -.75rem;
-  margin-left: -.75rem;
+  margin-right: -.9375rem;
+  margin-left: -.9375rem;
 }
 
 .row:before,
@@ -809,8 +809,8 @@ pre code {
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
   position: relative;
   min-height: 1px;
-  padding-right: .75rem;
-  padding-left: .75rem;
+  padding-right: .9375rem;
+  padding-left: .9375rem;
 }
 
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
@@ -3596,31 +3596,13 @@ input[type="button"].btn-block {
   list-style: none;
 }
 
-.nav:before,
-.nav:after {
-  display: table;
-  content: " ";
-}
-
-.nav:after {
-  clear: both;
-}
-
-.nav-item {
-  position: relative;
-  display: inline-block;
-}
-
 .nav-link {
   display: inline-block;
-  padding: .75em 1em;
-  line-height: 1;
 }
 
 .nav-link:focus,
 .nav-link:hover {
   text-decoration: none;
-  background-color: #eceeef;
 }
 
 .disabled > .nav-link,
@@ -3639,6 +3621,10 @@ input[type="button"].btn-block {
   background-color: transparent;
 }
 
+.nav-inline .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
 .nav-tabs {
   border-bottom: 1px solid #ddd;
 }
@@ -3654,6 +3640,7 @@ input[type="button"].btn-block {
 
 .nav-tabs .nav-link {
   display: block;
+  padding: .75em 1em;
   border: 1px solid transparent;
   border-radius: .25rem .25rem 0 0;
 }
@@ -3701,6 +3688,7 @@ input[type="button"].btn-block {
 
 .nav-pills .nav-link {
   display: block;
+  padding: .75em 1em;
   border-radius: .25rem;
 }
 
@@ -5974,39 +5962,39 @@ a.text-primary:hover {
 }
 
 .text-success {
-  color: #3c763d;
+  color: #5cb85c;
 }
 
 a.text-success:focus,
 a.text-success:hover {
-  color: #2b542c;
+  color: #449d44;
 }
 
 .text-info {
-  color: #31708f;
+  color: #5bc0de;
 }
 
 a.text-info:focus,
 a.text-info:hover {
-  color: #245269;
+  color: #31b0d5;
 }
 
 .text-warning {
-  color: #8a6d3b;
+  color: #f0ad4e;
 }
 
 a.text-warning:focus,
 a.text-warning:hover {
-  color: #66512c;
+  color: #ec971f;
 }
 
 .text-danger {
-  color: #a94442;
+  color: #d9534f;
 }
 
 a.text-danger:focus,
 a.text-danger:hover {
-  color: #843534;
+  color: #c9302c;
 }
 
 .inverse {
@@ -6016,9 +6004,6 @@ a.text-danger:hover {
 
 .bg-primary {
   color: #fff;
-}
-
-.bg-primary {
   background-color: #0275d8;
 }
 
@@ -6028,243 +6013,288 @@ a.bg-primary:hover {
 }
 
 .bg-success {
-  background-color: #dff0d8;
+  color: #fff;
+  background-color: #5cb85c;
 }
 
 a.bg-success:focus,
 a.bg-success:hover {
-  background-color: #c1e2b3;
+  background-color: #449d44;
 }
 
 .bg-info {
-  background-color: #d9edf7;
+  color: #fff;
+  background-color: #5bc0de;
 }
 
 a.bg-info:focus,
 a.bg-info:hover {
-  background-color: #afd9ee;
+  background-color: #31b0d5;
 }
 
 .bg-warning {
-  background-color: #fcf8e3;
+  color: #fff;
+  background-color: #f0ad4e;
 }
 
 a.bg-warning:focus,
 a.bg-warning:hover {
-  background-color: #f7ecb5;
+  background-color: #ec971f;
 }
 
 .bg-danger {
-  background-color: #f2dede;
+  color: #fff;
+  background-color: #d9534f;
 }
 
 a.bg-danger:focus,
 a.bg-danger:hover {
-  background-color: #e4b9b9;
+  background-color: #c9302c;
 }
 
 .m-a-0 {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .m-t-0 {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 
 .m-r-0 {
-  margin-right: 0;
+  margin-right: 0 !important;
 }
 
 .m-b-0 {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 
 .m-l-0 {
-  margin-left: 0;
+  margin-left: 0 !important;
+}
+
+.m-x-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.m-y-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 
 .m-a {
-  margin: 1rem;
+  margin: 1rem !important;
 }
 
 .m-t {
-  margin-top: 1rem;
+  margin-top: 1rem !important;
 }
 
 .m-r {
-  margin-right: 1rem;
+  margin-right: 1rem !important;
 }
 
 .m-b {
-  margin-bottom: 1rem;
+  margin-bottom: 1rem !important;
 }
 
 .m-l {
-  margin-left: 1rem;
+  margin-left: 1rem !important;
 }
 
 .m-x {
-  margin-right: 1rem;
-  margin-left: 1rem;
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
 }
 
 .m-y {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.m-a-md {
+  margin: 1.5rem !important;
 }
 
 .m-t-md {
-  margin-top: 1.5rem;
+  margin-top: 1.5rem !important;
 }
 
 .m-r-md {
-  margin-right: 1.5rem;
+  margin-right: 1.5rem !important;
 }
 
 .m-b-md {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.5rem !important;
 }
 
 .m-l-md {
-  margin-left: 1.5rem;
+  margin-left: 1.5rem !important;
 }
 
 .m-x-md {
-  margin-right: 1.5rem;
-  margin-left: 1.5rem;
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
 }
 
 .m-y-md {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-a-lg {
+  margin: 3rem !important;
 }
 
 .m-t-lg {
-  margin-top: 3rem;
+  margin-top: 3rem !important;
 }
 
 .m-r-lg {
-  margin-right: 3rem;
+  margin-right: 3rem !important;
 }
 
 .m-b-lg {
-  margin-bottom: 3rem;
+  margin-bottom: 3rem !important;
 }
 
 .m-l-lg {
-  margin-left: 3rem;
+  margin-left: 3rem !important;
 }
 
 .m-x-lg {
-  margin-right: 3rem;
-  margin-left: 3rem;
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
 }
 
 .m-y-lg {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
 }
 
 .p-a-0 {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .p-t-0 {
-  padding-top: 0;
+  padding-top: 0 !important;
 }
 
 .p-r-0 {
-  padding-right: 0;
+  padding-right: 0 !important;
 }
 
 .p-b-0 {
-  padding-bottom: 0;
+  padding-bottom: 0 !important;
 }
 
 .p-l-0 {
-  padding-left: 0;
+  padding-left: 0 !important;
+}
+
+.p-x-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.p-y-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .p-a {
-  padding: 1rem;
+  padding: 1rem !important;
 }
 
 .p-t {
-  padding-top: 1rem;
+  padding-top: 1rem !important;
 }
 
 .p-r {
-  padding-right: 1rem;
+  padding-right: 1rem !important;
 }
 
 .p-b {
-  padding-bottom: 1rem;
+  padding-bottom: 1rem !important;
 }
 
 .p-l {
-  padding-left: 1rem;
+  padding-left: 1rem !important;
 }
 
 .p-x {
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
 }
 
 .p-y {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-a-md {
+  padding: 1.5rem !important;
 }
 
 .p-t-md {
-  padding-top: 1.5rem;
+  padding-top: 1.5rem !important;
 }
 
 .p-r-md {
-  padding-right: 1.5rem;
+  padding-right: 1.5rem !important;
 }
 
 .p-b-md {
-  padding-bottom: 1.5rem;
+  padding-bottom: 1.5rem !important;
 }
 
 .p-l-md {
-  padding-left: 1.5rem;
+  padding-left: 1.5rem !important;
 }
 
 .p-x-md {
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
 }
 
 .p-y-md {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-a-lg {
+  padding: 3rem !important;
 }
 
 .p-t-lg {
-  padding-top: 3rem;
+  padding-top: 3rem !important;
 }
 
 .p-r-lg {
-  padding-right: 3rem;
+  padding-right: 3rem !important;
 }
 
 .p-b-lg {
-  padding-bottom: 3rem;
+  padding-bottom: 3rem !important;
 }
 
 .p-l-lg {
-  padding-left: 3rem;
+  padding-left: 3rem !important;
 }
 
 .p-x-lg {
-  padding-right: 3rem;
-  padding-left: 3rem;
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
 }
 
 .p-y-lg {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
 }
 
 .pos-f-t {

docs/examples/index.md

@@ -3,8 +3,6 @@ layout: simple
 title: Examples
 ---
 
-Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-
 [Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
 
 ## Framework

docs/extend/approach.md

 ---
-layout: page
+layout: docs
 title: Approach
 ---
 

docs/extend/icon-fonts.md

 ---
-layout: page
+layout: docs
 title: Icon fonts
 ---
 

docs/extend/index.md

 ---
-layout: page
+layout: docs
 title: Extend
 ---
 

docs/getting-started/accessibility.md

 ---
-layout: page
+layout: docs
 title: Accessibility
 group: getting-started
 ---

docs/getting-started/best-practices.md

 ---
-layout: page
+layout: docs
 title: Best practices
 group: getting-started
 ---

docs/getting-started/browsers-devices.md

 ---
-layout: page
+layout: docs
 title: Browsers and devices
 group: getting-started
 ---

docs/getting-started/build-tools.md

 ---
-layout: page
+layout: docs
 title: Build tools
 group: getting-started
 ---

docs/getting-started/contents.md

 ---
-layout: page
+layout: docs
 title: Contents
 group: getting-started
 ---

docs/getting-started/download.md

 ---
-layout: page
+layout: docs
 title: Download
 group: getting-started
 ---

docs/getting-started/flexbox.md

 ---
-layout: page
+layout: docs
 title: Flexbox
 group: getting-started
 ---

docs/getting-started/introduction.md

 ---
-layout: page
+layout: docs
 title: Introduction
 group: getting-started
 ---

docs/getting-started/javascript.md

 ---
-layout: page
+layout: docs
 title: JavaScript
 group: getting-started
 ---

docs/getting-started/options.md

 ---
-layout: page
+layout: docs
 title: Customization options
 group: getting-started
 ---

docs/getting-started/overview.md

----
-layout: page
-title: Quick start
-group: getting-started
----
-
-Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
-
-Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
-
-{% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}">
-{% endhighlight %}
-
-Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
-
-{% highlight html %}
-<script src="{{ site.cdn.jquery }}"></script>
-<script src="{{ site.cdn.js }}"></script>
-{% endhighlight %}
-
-And that's it—you're your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
-
-## Page template
-
-Be sure to have your pages set up with the latest design and development standards. That means:
-
-* Using an HTML5 doctype
-* Forcing Internet Explorer to use its latest rendering mode ([read more]())
-* And, utilizing the viewport meta tag.
-
-Put it all together and your pages should look like this:
-
-{% highlight html %}
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="{{ site.cdn.css }}">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-
-    <!-- jQuery first, then Bootstrap JS. -->
-    <script src="{{ site.cdn.jquery }}"></script>
-    <script src="{{ site.cdn.js }}"></script>
-  </body>
-</html>
-{% endhighlight %}
-
-That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) to start laying out your site's content before adding components.

docs/index.html

@@ -5,9 +5,8 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
-
     <span class="bd-booticon outline">B</span>
-    <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
+    <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
     <p class="lead">
       <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
     </p>
@@ -19,25 +18,16 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
 <div class="bd-featurette">
   <div class="container">
     <h2 class="bd-featurette-title">Easy to get started.</h2>
-    <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p>
-
-    <!-- <hr class="half-rule"> -->
+    <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
 
     <div class="row">
       <div class="col-sm-6">
         <h4>Managed dependencies</h4>
         <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
         <p>
-          <a class="btn btn-bs btn-outline" href="">View install methods</a>
+          <a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
         </p>
       </div>
-      <!-- <div class="col-sm-4">
-        <h4>Custom builds</h4>
-        <p>Need just a part of Bootstrap? Download a custom build of the compiled CSS and JS.</p>
-        <a class="btn btn-secondary" href="#">Reboot</a>
-        <a class="btn btn-secondary" href="#">Grid system</a>
-        <a class="btn btn-secondary" href="#">Flexbox</a>
-      </div> -->
       <div class="col-sm-6">
         <h4>Bootstrap CDN</h4>
         <p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
@@ -50,8 +40,8 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
 
     <hr class="half-rule">
 
-    <p class="lead">More customized builds of Bootstrap's CSS and JS are also available.</p>
-    <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-bs btn-outline btn-lg">More download options</a>
+    <p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p>
+    <a href="{{ site.baseurl }}/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a>
   </div>
 </div>
 
@@ -60,8 +50,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
     <h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
     <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
 
-    <hr class="half-rule">
-
     <div class="row">
       <div class="col-sm-4">
         <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
@@ -82,8 +70,8 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
 
     <hr class="half-rule">
 
-    <p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
-    <a href="{{ site.repo }}" class="btn btn-bs btn-outline btn-lg">View the GitHub project</a>
+    <p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
+    <a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a>
   </div>
 </div>
 
@@ -92,8 +80,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
     <h2 class="bd-featurette-title">Built with Bootstrap.</h2>
     <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
 
-    <hr class="half-rule">
-
     <div class="row bd-featured-sites">
     {% for showcase in site.data.showcase %}
       <div class="col-xs-6 col-sm-3">
@@ -106,7 +92,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
 
     <hr class="half-rule">
 
-    <p class="lead">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
-    <a href="{{ site.expo }}" class="btn btn-bs btn-outline btn-lg">Explore the Expo</a>
+    <p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
+    <a href="{{ site.expo }}" class="btn btn-bs btn-outline">Explore the Expo</a>
   </div>
 </div>

docs/layout/grid.md

 ---
-layout: page
+layout: docs
 title: Grid system
 group: layout
 ---

docs/layout/media-object.md

 ---
-layout: page
+layout: docs
 title: Media object
 group: layout
 ---

docs/layout/overview.md

 ---
-layout: page
+layout: docs
 title: Overview
 group: layout
 ---

docs/layout/responsive-utilities.md

 ---
-layout: page
+layout: docs
 title: Responsive utilities
 group: layout
 ---

docs/layout/scaffolding.md

 ---
-layout: page
+layout: docs
 title: Scaffolding
 group: layout
 ---

docs/migration.md

 ---
-layout: page
+layout: docs
 title: Migrating to v4
 group: migration
 ---

scss/_nav.scss

@@ -2,34 +2,20 @@
 // Navs
 // --------------------------------------------------
 
-
-//
-// Base styles
-//
-
 .nav {
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
-  @include clearfix();
-}
-
-.nav-item {
-  position: relative;
-  display: inline-block;
 }
 
 .nav-link {
   display: inline-block;
-  padding: $nav-link-padding;
-  line-height: 1;
 
   @include hover-focus {
     text-decoration: none;
-    background-color: $nav-link-hover-bg;
   }
 
-  // Disabled state sets text to gray and nukes hover/tab effects
+  // Disabled state lightens text and removes hover/tab effects
   .disabled > &,
   &.disabled {
     color: $nav-disabled-link-color;
@@ -43,6 +29,53 @@
 }
 
 
+// Nav inline
+
+.nav-inline {
+  .nav-link + .nav-link {
+    margin-left: 1rem;
+  }
+}
+
+
+//
+// Base styles
+//
+
+// .nav {
+//   padding-left: 0;
+//   margin-bottom: 0;
+//   list-style: none;
+//   @include clearfix();
+// }
+//
+// .nav-item {
+//   position: relative;
+//   display: inline-block;
+// }
+//
+// .nav-link {
+//   display: inline-block;
+//
+//   @include hover-focus {
+//     text-decoration: none;
+//     background-color: $nav-link-hover-bg;
+//   }
+//
+//   // Disabled state sets text to gray and nukes hover/tab effects
+//   .disabled > &,
+//   &.disabled {
+//     color: $nav-disabled-link-color;
+//
+//     @include plain-hover-focus {
+//       color: $nav-disabled-link-hover-color;
+//       cursor: $cursor-disabled;
+//       background-color: transparent;
+//     }
+//   }
+// }
+
+
 //
 // Tabs
 //
@@ -62,6 +95,7 @@
 
   .nav-link {
     display: block;
+    padding: $nav-link-padding;
     border: 1px solid transparent;
     @include border-radius($border-radius $border-radius 0 0);
 
@@ -107,6 +141,7 @@
 
   .nav-link {
     display: block;
+    padding: $nav-link-padding;
     @include border-radius($nav-pills-border-radius);
   }
 

scss/_variables.scss

@@ -115,7 +115,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:               12 !default;
-$grid-gutter-width:          1.5rem !default;
+$grid-gutter-width:          1.875rem !default; // 30px
 
 
 // Typography