Merge branch 'v4' of github.com:twbs/derpstrap into v4

2025-02-26 23:54:23 +01:00 · 2015-08-18 17:02:24 -07:00 · 2015-08-18 17:02:24 -07:00 · e07071416b
commit e07071416b
parent 19e43b62ed 2685475919
79 changed files with 1135 additions and 1652 deletions
--- a/_config.yml
+++ b/_config.yml
@ -18,6 +18,9 @@ url:              http://getbootstrap.com
 encoding:         UTF-8
 exclude:          [assets/scss/]

+gems:
+  - jekyll-redirect-from
+  
 # Custom vars
 current_version:  4.0.0-alpha
 repo:             https://github.com/twbs/bootstrap
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@ -495,11 +495,11 @@ h6, .h6 {
 }

 h1, .h1 {
-  font-size: 2.75rem;
+  font-size: 2.5rem;
 }

 h2, .h2 {
-  font-size: 2.25rem;
+  font-size: 2rem;
 }

 h3, .h3 {
@ -1859,7 +1859,7 @@ pre code {
 .form-control {
  display: block;
  width: 100%;
-  padding: .5rem .75rem;
+  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #55595c;
@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
 }

 .form-control-label {
-  padding: .5625rem .75rem;
+  padding: .4375rem .75rem;
  margin-bottom: 0;
 }

@ -1926,7 +1926,7 @@ fieldset[disabled] .form-control {
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
-    line-height: 2.625rem;
+    line-height: 2.375rem;
  }
  input[type="date"].input-sm,
  .input-group-sm input[type="date"].form-control,
@ -1951,9 +1951,9 @@ fieldset[disabled] .form-control {
 }

 .form-control-static {
-  min-height: 2.625rem;
-  padding-top: .5625rem;
-  padding-bottom: .5625rem;
+  min-height: 2.375rem;
+  padding-top: .4375rem;
+  padding-bottom: .4375rem;
  margin-bottom: 0;
 }

@ -1971,7 +1971,6 @@ fieldset[disabled] .form-control {
 .form-control-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
-  height: 1.95rem;
  padding: .275rem .75rem;
  font-size: .85rem;
  line-height: 1.5;
@ -1981,8 +1980,7 @@ fieldset[disabled] .form-control {
 .form-control-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
-  height: 3.291667rem;
-  padding: .75rem 1.5rem;
+  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.333333;
  border-radius: .3rem;
@ -2071,9 +2069,9 @@ fieldset[disabled] .checkbox label {
 .form-control-error {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
-  background-position: center right .65625rem;
-  -webkit-background-size: 1.70625rem 1.70625rem;
-          background-size: 1.70625rem 1.70625rem;
+  background-position: center right .59375rem;
+  -webkit-background-size: 1.54375rem 1.54375rem;
+          background-size: 1.54375rem 1.54375rem;
 }

 .has-success .help-block,
@ -2222,7 +2220,7 @@ fieldset[disabled] .checkbox label {

 .btn {
  display: inline-block;
-  padding: .5rem 1rem;
+  padding: .375rem 1rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
@ -2550,7 +2548,7 @@ fieldset[disabled] .btn-danger:hover {

 .btn-primary-outline {
  color: #0275d8;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #0275d8;
 }
@ -2588,7 +2586,7 @@ fieldset[disabled] .btn-primary-outline:hover {

 .btn-secondary-outline {
  color: #ccc;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #ccc;
 }
@ -2626,7 +2624,7 @@ fieldset[disabled] .btn-secondary-outline:hover {

 .btn-info-outline {
  color: #5bc0de;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #5bc0de;
 }
@ -2664,7 +2662,7 @@ fieldset[disabled] .btn-info-outline:hover {

 .btn-success-outline {
  color: #5cb85c;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #5cb85c;
 }
@ -2702,7 +2700,7 @@ fieldset[disabled] .btn-success-outline:hover {

 .btn-warning-outline {
  color: #f0ad4e;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #f0ad4e;
 }
@ -2740,7 +2738,7 @@ fieldset[disabled] .btn-warning-outline:hover {

 .btn-danger-outline {
  color: #d9534f;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #d9534f;
 }
@ -2816,14 +2814,14 @@ fieldset[disabled] .btn-link:hover {
 }

 .btn-lg, .btn-group-lg > .btn {
-  padding: .75rem 1.5rem;
+  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.333333;
  border-radius: .3rem;
 }

 .btn-sm, .btn-group-sm > .btn {
-  padding: .275rem .75rem;
+  padding: .25rem .75rem;
  font-size: .85rem;
  line-height: 1.5;
  border-radius: .2rem;
@ -2919,47 +2917,51 @@ input[type="button"].btn-block {
  border-radius: .25rem;
 }

-.dropdown-menu .dropdown-divider {
+.dropdown-divider {
  height: 1px;
  margin: .5rem 0;
  overflow: hidden;
  background-color: #e5e5e5;
 }

-.dropdown-menu > li > a {
+.dropdown-item {
  display: block;
+  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
+  text-align: inherit;
  white-space: nowrap;
+  background: none;
+  border: 0;
 }

-.dropdown-menu > li > a:focus,
-.dropdown-menu > li > a:hover {
+.dropdown-item:focus,
+.dropdown-item:hover {
  color: #2b2d2f;
  text-decoration: none;
  background-color: #f5f5f5;
 }

-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:focus,
-.dropdown-menu > .active > a:hover {
+.dropdown-item.active,
+.dropdown-item.active:focus,
+.dropdown-item.active:hover {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
  outline: 0;
 }

-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:focus,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-item.disabled,
+.dropdown-item.disabled:focus,
+.dropdown-item.disabled:hover {
  color: #818a91;
 }

-.dropdown-menu > .disabled > a:focus,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-item.disabled:focus,
+.dropdown-item.disabled:hover {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
@ -3252,7 +3254,7 @@ input[type="button"].btn-block {
 }

 .input-group-addon {
-  padding: .5rem .75rem;
+  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
@ -3272,7 +3274,7 @@ input[type="button"].btn-block {

 .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .input-group-addon.btn {
-  padding: 1.5rem 1.5rem;
+  padding: 1.25rem 1.25rem;
  font-size: 1.25rem;
  border-radius: .3rem;
 }
@ -3640,7 +3642,7 @@ input[type="button"].btn-block {

 .nav-tabs .nav-link {
  display: block;
-  padding: .75em 1em;
+  padding: .5em 1em;
  border: 1px solid transparent;
  border-radius: .25rem .25rem 0 0;
 }
@ -3688,7 +3690,7 @@ input[type="button"].btn-block {

 .nav-pills .nav-link {
  display: block;
-  padding: .75em 1em;
+  padding: .5em 1em;
  border-radius: .25rem;
 }

@ -3735,8 +3737,7 @@ input[type="button"].btn-block {

 .navbar {
  position: relative;
-  padding: 1rem;
-  margin-bottom: 1rem;
+  padding: .5rem 1rem;
 }

 .navbar:before,
@ -3805,15 +3806,14 @@ input[type="button"].btn-block {

 .navbar-brand {
  float: left;
-  padding: .625rem .75rem;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
  margin-right: 1rem;
-  margin-bottom: 0;
  font-size: 1.25rem;
-  line-height: 1;
 }

-.navbar-brand > a:focus,
-.navbar-brand > a:hover {
+.navbar-brand:focus,
+.navbar-brand:hover {
  text-decoration: none;
 }

@ -3821,14 +3821,27 @@ input[type="button"].btn-block {
  display: block;
 }

-.navbar-toggler {
-  padding: .55rem .75rem;
+.navbar-divider {
+  float: left;
+  width: 1px;
+  padding-top: .425rem;
+  padding-bottom: .425rem;
  margin-right: 1rem;
-  margin-bottom: 0;
+  margin-left: 1rem;
+  overflow: hidden;
+}
+
+.navbar-divider:before {
+  content: '\00a0';
+}
+
+.navbar-toggler {
+  padding: .5rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background: none;
-  border: 0;
+  border: .0625rem solid transparent;
+  border-radius: .25rem;
 }

 .navbar-toggler:focus,
@ -3848,140 +3861,96 @@ input[type="button"].btn-block {
  }
 }

-.navbar-nav > li > .dropdown-menu {
-  margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  border-top-left-radius: .25rem;
-  border-top-right-radius: .25rem;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.navbar-sm {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.navbar-sm .navbar-brand {
-  padding-top: .95rem;
-  padding-bottom: .95rem;
-}
-
-.navbar-sm .form-inline {
-  margin-top: .6rem;
-}
-
 .navbar-nav .nav-item {
  float: left;
 }

 .navbar-nav .nav-link {
  display: block;
-  padding-top: .95rem;
-  padding-bottom: .95rem;
-  line-height: 1.25;
+  padding-top: .425rem;
+  padding-bottom: .425rem;
 }

-.navbar-nav .open > .nav-link,
-.navbar-nav .open > .nav-link:focus,
-.navbar-nav .open > .nav-link:hover,
-.navbar-nav .active > .nav-link,
-.navbar-nav .active > .nav-link:focus,
-.navbar-nav .active > .nav-link:hover,
-.navbar-nav .nav-link.open,
-.navbar-nav .nav-link.open:focus,
-.navbar-nav .nav-link.open:hover,
-.navbar-nav .nav-link.active,
-.navbar-nav .nav-link.active:focus,
-.navbar-nav .nav-link.active:hover {
-  color: #555;
-  cursor: default;
-  background-color: #e7e7e7;
+.navbar-nav .nav-link + .nav-link {
+  margin-left: 1rem;
 }

-.navbar-default {
-  background-color: #f8f8f8;
-  border-color: #e7e7e7;
+.navbar-nav .nav-item + .nav-item {
+  margin-left: 1rem;
 }

-.navbar-default .navbar-brand {
-  color: #777;
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-default .navbar-brand:focus,
-.navbar-default .navbar-brand:hover {
-  color: #5e5e5e;
-  background-color: transparent;
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-inverse {
-  background-color: #373a3c;
-  border-color: #1f2021;
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, .3);
 }

-.navbar-inverse .navbar-toggler,
-.navbar-inverse .navbar-brand > a,
-.navbar-inverse .nav-pills > .nav-item > .nav-link {
-  color: #aab0b5;
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+  color: rgba(0, 0, 0, .6);
 }

-.navbar-inverse .navbar-toggler:focus,
-.navbar-inverse .navbar-toggler:hover,
-.navbar-inverse .navbar-brand > a:focus,
-.navbar-inverse .navbar-brand > a:hover,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:focus,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:hover {
-  color: #fff;
+.navbar-light .navbar-nav .open > .nav-link,
+.navbar-light .navbar-nav .open > .nav-link:focus,
+.navbar-light .navbar-nav .open > .nav-link:hover,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .active > .nav-link:focus,
+.navbar-light .navbar-nav .active > .nav-link:hover,
+.navbar-light .navbar-nav .nav-link.open,
+.navbar-light .navbar-nav .nav-link.open:focus,
+.navbar-light .navbar-nav .nav-link.open:hover,
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .nav-link.active:focus,
+.navbar-light .navbar-nav .nav-link.active:hover {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-inverse .nav-pills > .nav-item > .nav-link:focus,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:hover {
-  color: #fff;
-  background-color: #1f2021;
+.navbar-light .navbar-divider {
+  background-color: rgba(0, 0, 0, .075);
 }

-.navbar-inverse .nav-pills > .active > .nav-link,
-.navbar-inverse .nav-pills > .nav-link.active {
-  color: #fff;
-  background-color: #1f2021;
+.navbar-dark .navbar-brand {
+  color: white;
 }

-.navbar-inverse .navbar-brand {
-  color: #aab0b5;
+.navbar-dark .navbar-brand:focus,
+.navbar-dark .navbar-brand:hover {
+  color: white;
 }

-.navbar-inverse .navbar-brand:focus,
-.navbar-inverse .navbar-brand:hover {
-  color: #fff;
-  background-color: transparent;
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, .5);
 }

-.navbar-inverse .navbar-nav .navbar-link {
-  color: #aab0b5;
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+  color: rgba(255, 255, 255, .75);
 }

-.navbar-inverse .navbar-nav .navbar-link:focus,
-.navbar-inverse .navbar-nav .navbar-link:hover {
-  color: #fff;
-  background-color: transparent;
+.navbar-dark .navbar-nav .open > .nav-link,
+.navbar-dark .navbar-nav .open > .nav-link:focus,
+.navbar-dark .navbar-nav .open > .nav-link:hover,
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .active > .nav-link:focus,
+.navbar-dark .navbar-nav .active > .nav-link:hover,
+.navbar-dark .navbar-nav .nav-link.open,
+.navbar-dark .navbar-nav .nav-link.open:focus,
+.navbar-dark .navbar-nav .nav-link.open:hover,
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .navbar-nav .nav-link.active:focus,
+.navbar-dark .navbar-nav .nav-link.active:hover {
+  color: white;
 }

-.navbar-inverse .navbar-nav .navbar-link.active > a,
-.navbar-inverse .navbar-nav .navbar-link.active > a:focus,
-.navbar-inverse .navbar-nav .navbar-link.active > a:hover {
-  color: #fff;
-  background-color: #1f2021;
-}
-
-.navbar-inverse .navbar-nav .navbar-link.disabled > a,
-.navbar-inverse .navbar-nav .navbar-link.disabled > a:focus,
-.navbar-inverse .navbar-nav .navbar-link.disabled > a:hover {
-  color: #444;
-  background-color: transparent;
+.navbar-dark .navbar-divider {
+  background-color: rgba(255, 255, 255, .075);
 }

 .card {
@ -5997,11 +5966,15 @@ a.text-danger:hover {
  color: #c9302c;
 }

-.inverse {
+.bg-inverse {
  color: #eceeef;
  background-color: #373a3c;
 }

+.bg-faded {
+  background-color: #f7f7f9;
+}
+
 .bg-primary {
  color: #fff;
  background-color: #0275d8;
--- a/dist/css/bootstrap.css.map
+++ b/dist/css/bootstrap.css.map
--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/dist/css/bootstrap.min.css.map
+++ b/dist/css/bootstrap.min.css.map
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@ -47,16 +47,3 @@ Holder.addTheme('gray', {
  fontweight: 'normal'
 })
 </script>
-
-<script>
-  var _gauges = _gauges || [];
-  (function() {
-    var t   = document.createElement('script');
-    t.async = true;
-    t.id    = 'gauges-tracker';
-    t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
-    t.src = '//secure.gaug.es/track.js';
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(t, s);
-  })();
-</script>
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@ -1,11 +1,31 @@
-<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 class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
+  <nav class="nav navbar-nav pull-right">
+    <div class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v{{ site.current_version }}
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+        <a class="dropdown-item" href="#">v4.0.0-alpha</a>
+        <a class="dropdown-item" href="#">v3.3.5</a>
+        <a class="dropdown-item" href="#">v3.3.4</a>
+        <a class="dropdown-item" href="#">v3.3.2</a>
+        <a class="dropdown-item" href="#">v3.3.1</a>
+        <a class="dropdown-item" href="#">v3.3.0</a>
+        <a class="dropdown-item" href="#">v3.2.0</a>
+        <a class="dropdown-item" href="#">v3.1.1</a>
+        <a class="dropdown-item" href="#">v3.1.0</a>
+        <a class="dropdown-item" href="#">v3.0.3</a>
+        <a class="dropdown-item" href="#">v3.0.2</a>
+        <a class="dropdown-item" href="#">v3.0.1</a>
+        <a class="dropdown-item" href="#">v3.0.0</a>
+      </div>
+    </div>
+  </nav>
+  <nav class="nav navbar-nav">
+    <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>
 </header>
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@ -12,7 +12,7 @@

    {% include nav-home.html %}

-    <div class="bd-pageheader text-xs-center text-sm-left">
+    <div class="bd-pageheader">
      <div class="container">
        {% include page-headers.html %}
        {% include ads.html %}
--- a/docs/about/history.md
+++ b/docs/about/history.md
@ -2,6 +2,7 @@
 layout: docs
 title: History
 group: about
+redirect_from: "/about/"
 ---

 Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
--- a/docs/assets/css/docs.min.css
+++ b/docs/assets/css/docs.min.css
--- a/docs/assets/css/docs.min.css.map
+++ b/docs/assets/css/docs.min.css.map
--- a/docs/assets/js/docs.min.js
+++ b/docs/assets/js/docs.min.js
@ -29,4 +29,4 @@ function AnchorJS(a){"use strict";this.options=a||{},this._applyRemainingDefault
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see https://creativecommons.org/licenses/by/3.0/.
 */
-!function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a('[data-toggle="popover"]').popover(),a(".tooltip-test").tooltip(),a(".popover-test").popover(),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip(),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")})}),b.on("noflash wrongflash",function(){a(".zero-clipboard").remove(),ZeroClipboard.destroy()})})}(jQuery);
+!function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a('[data-toggle="popover"]').popover(),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bd-example [href=#]").click(function(a){a.preventDefault()}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip(),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")})}),b.on("noflash wrongflash",function(){a(".zero-clipboard").remove(),ZeroClipboard.destroy()})})}(jQuery),function(){"use strict";anchors.options.placement="left",anchors.add(".bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5")}();
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@ -28,6 +28,11 @@
    $('.tooltip-test').tooltip()
    $('.popover-test').popover()

+    // Disable empty links in docs examples
+    $('.bd-example [href=#]').click(function (e) {
+      e.preventDefault()
+    })
+
    // Config ZeroClipboard
    ZeroClipboard.config({
      moviePath: '/assets/flash/ZeroClipboard.swf',
@ -76,3 +81,10 @@
  })

 }(jQuery)
+
+;(function () {
+  'use strict';
+
+  anchors.options.placement = 'left';
+  anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+})();
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@ -6,7 +6,7 @@
  width: auto !important;
  height: auto !important;
  padding: 1.25rem !important;
-  margin: 2rem -1.5rem -2rem !important;
+  margin: 2rem ($grid-gutter-width * -1) -2rem !important;
  overflow: hidden; // clearfix
  font-size: .8rem !important;
  font-family: inherit !important;
@ -17,10 +17,6 @@
  border: 0 !important;
 }

-.bd-masthead .carbonad {
-  background: $bd-graphite !important;
-}
-
 .carbonad-img {
  margin: 0 !important;
 }
--- a/docs/assets/scss/_anchor.scss
+++ b/docs/assets/scss/_anchor.scss
@ -1,107 +1,3 @@
-// //
-// // Store the link icon as a base64 embedded icon font.
-// //
-// @font-face {
-//   font-family: 'anchorjs-icons';
-//   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
-//   url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
-//   font-style: normal;
-//   font-weight: normal;
-// }
-//
-// .anchorjs-icon {
-//   font-family: 'anchorjs-icons';
-//   font-style: normal;
-//   font-variant: normal;
-//   font-weight: normal;
-//   line-height: 1;
-//   speak: none;
-//   text-transform: none;
-//
-//   // Better Icon Rendering
-//   -webkit-font-smoothing: antialiased;
-//   -moz-osx-font-smoothing: grayscale;
-// }
-//
-// //
-// // Link placement and hover behavior.
-// //
-// .anchorjs-link {
-//   opacity: 0;
-//   text-decoration: none;
-// }
-// *:hover > .anchorjs-link,
-// .anchorjs-link:focus  {
-//   // To fade links as they appear, change transition-property from 'color' to 'all'
-//   opacity: 1;
-//   transition: color .16s linear;
-// }
-//
-// //
-// // Make screen-reader friendly description text visually hidden.
-// //
-// .anchorjs-description {
-//   border: 0;
-//   clip: rect(0 0 0 0);
-//   height: 1px;
-//   margin: -1px;
-//   overflow: hidden;
-//   padding: 0;
-//   position: absolute;
-//   width: 1px;
-// }
-//
-// //
-// // Reasonable default styles.
-// // Feel free to override or replace these with your own.
-// //
-// // .anchorjs-link:link    { color: #DFD487; }
-// // .anchorjs-link:visited { color: #DFD487; }
-// // .anchorjs-link:hover   { color: #EC7963; }
-// // .anchorjs-link:active  { color: #EC7963; }
-//
-// .anchorjs-link {
-//   float: left;
-//   width: 1.2em;
-//   height: 1em;
-//   padding-right: .2em;
-//   margin-top: .25em;
-//   margin-left: -1.2em;
-//   font-size: 70%;
-//   color: inherit;
-//   text-align: center;
-// }
-// *:hover > .anchorjs-link:hover {
-//   color: $brand-primary;
-//   text-decoration: none;
-// }
-//
-// // .anchorjs-icon {
-// //   font-size: 90%;
-// //   padding-left: 6px;
-// // }
-//
-// .anchorjs-icon:before {
-//   content: '\e600';
-//   // alternative icons -- uncomment to use
-//   //
-//   // content: '#';
-//   // content: '¶';
-//   // content: '❡';
-//   // content: '§';
-// }
-//
-// @include media-breakpoint-down(sm) {
-//   .anchorjs-link {
-//     display: none;
-//   }
-// }
-
-
-//
-// AnchorJS Styles
-//
-
 .anchorjs-link {
  color: inherit;
 }
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@ -3,6 +3,7 @@
 // Custom buttons for the docs.

 .btn-bs {
+  font-weight: 500;
  color: $bd-purple-bright;
  border-color: $bd-purple-bright;

--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@ -88,6 +88,12 @@
    width: auto;
  }

+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
  // Card examples should be horizontal
  > .card {
    max-width: 20rem;
@ -107,12 +113,6 @@
  }
 }

-
-// Tweak content of examples for optimum awesome
-.bd-example > *:last-child,
-.bd-example > .table-responsive:last-child > .table {
-  margin-bottom: 0 !important;
-}
 .bd-example > .close {
  float: none;
 }
@ -149,16 +149,6 @@
    margin-left: .5rem;
  }
 }
-// .bd-example > .img-circle,
-// .bd-example > .img-rounded,
-// .bd-example > .img-thumbnail {
-//   margin: .25rem;
-// }
-
-// Tables
-// .bd-example > .table-responsive > .table {
-//   background-color: #fff;
-// }

 // Buttons
 .bd-example > .btn-group {
@ -187,44 +177,23 @@
 }

 // Navbars
-.bd-example .navbar:last-child {
-  margin-bottom: 0;
-}
-.bd-navbar-top-example,
-.bd-navbar-bottom-example {
-  z-index: 1;
-  padding: 0;
-  overflow: hidden; // cut the drop shadows off
-}
-.bd-navbar-top-example .navbar-header,
-.bd-navbar-bottom-example .navbar-header {
-  margin-left: 0;
-}
-.bd-navbar-top-example .navbar-fixed-top,
-.bd-navbar-bottom-example .navbar-fixed-bottom {
-  position: relative;
-  margin-right: 0;
-  margin-left: 0;
-}
-.bd-navbar-top-example {
-  padding-bottom: 45px;
-}
-.bd-navbar-top-example .navbar-fixed-top {
-  top: -1px;
-}
-.bd-navbar-bottom-example {
-  padding-top: 45px;
-}
-.bd-navbar-bottom-example .navbar-fixed-bottom {
-  bottom: -1px;
-}
-.bd-navbar-bottom-example .navbar {
-  margin-bottom: 0;
-}
-@media (min-width: 768px) {
-  .bd-navbar-top-example .navbar-fixed-top,
-  .bd-navbar-bottom-example .navbar-fixed-bottom {
-    position: absolute;
+.bd-example  {
+  .navbar-fixed-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+  .navbar-fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .navbar-fixed-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .navbar-fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
  }
 }

@ -325,9 +294,11 @@
  .bg-info,
  .bg-warning,
  .bg-danger {
-    padding: .5rem;
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    &:not(.navbar) {
+      padding: .5rem;
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
  }
 }

--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@ -1,3 +1,7 @@
+//
+// Automatically style Markdown-based tables like a Bootstrap `.table`.
+//
+
 .bd-content {
  > table {
    display: block;
@ -32,58 +36,6 @@
  }
 }

-
-.bd-pageheader {
-  padding: 2rem .75rem;
-  margin-bottom: 3rem;
-  color: $bd-purple-light;
-  background-color: $bd-purple;
-
-  .container {
-    position: relative;
-  }
-
-  h1 {
-    font-size: 3rem;
-    font-weight: normal;
-    color: #fff;
-  }
-
-  p {
-    margin-bottom: 0;
-    font-size: 1.5rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-
-    .carbonad {
-      margin: 2rem 0 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    h1 {
-      font-size: 4rem;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    h1,
-    p {
-      margin-right: 380px;
-    }
-
-    .carbonad {
-      position: absolute;
-      top: 0;
-      right: .75rem; // offset from the .container's padding
-      margin: 0 !important;
-    }
-  }
-}
-
 //
 // Docs sections
 //
--- a/docs/assets/scss/_featured-sites.scss
+++ b/docs/assets/scss/_featured-sites.scss
@ -0,0 +1,21 @@
+.bd-featured-sites {
+  margin-right: -1px;
+  margin-left: -1px;
+}
+.bd-featured-sites .col-xs-6 {
+  padding: 1px;
+}
+.bd-featured-sites .img-responsive {
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
+  .bd-featured-sites .col-sm-3:first-child img {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+  .bd-featured-sites .col-sm-3:last-child img {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+}
--- a/docs/assets/scss/_featurettes.scss
+++ b/docs/assets/scss/_featurettes.scss
@ -0,0 +1,81 @@
+.bd-featurette {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #555;
+  // text-align: center;
+  background-color: #fff;
+  border-top: 1px solid #eee;
+
+  .highlight {
+    text-align: left;
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-sm-6:first-child {
+      padding-right: ($grid-gutter-width * 1.5);
+    };
+    .col-sm-6:last-child {
+      padding-left: ($grid-gutter-width * 1.5);
+    }
+  }
+}
+
+.bd-featurette-title {
+  margin-bottom: .5rem;
+  font-size: 2rem;
+  font-weight: normal;
+  color: #333;
+
+  + .lead {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+  }
+}
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+.bd-featurette h4 {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+  font-weight: normal;
+  color: #333;
+}
+.bd-featurette-img {
+  display: block;
+  margin-bottom: 1.25rem;
+  color: #333;
+}
+.bd-featurette-img:hover {
+  color: $brand-primary;
+  text-decoration: none;
+}
+.bd-featurette-img img {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 480px) {
+  .bd-featurette .img-responsive {
+    margin-top: 2rem;
+  }
+}
+@media (min-width: 768px) {
+  .bd-featurette {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+  .bd-featurette-title {
+    font-size: 2.5rem;
+  }
+  .bd-featurette .lead {
+    max-width: 80%;
+    // margin-right: auto;
+    // margin-left: auto;
+  }
+  .bd-featurette .img-responsive {
+    margin-top: 0;
+  }
+}
--- a/docs/assets/scss/_homepage.scss
+++ b/docs/assets/scss/_homepage.scss
@ -1,227 +0,0 @@
-//
-// Main navbar
-//
-
-.bd-navbar {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  margin-bottom: 0;
-  // background-color: $bd-graphite;
-
-  .nav-link {
-    color: $bd-graphite-light;
-
-    &.active,
-    &:hover,
-    &:focus {
-      color: $gray-dark;
-      background-color: transparent;
-    }
-
-    &.active {
-      font-weight: 500;
-    }
-  }
-}
-
-
-//
-// Masthead (headings and download button)
-//
-
-.bd-masthead {
-  position: relative;
-  padding: ($grid-gutter-width / 2);
-  color: $bd-purple-light;
-  text-align: center;
-  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-light;
-    border-color: $bd-purple-light;
-  }
-
-  h1 {
-    font-weight: 300;
-    line-height: 1;
-  }
-
-  .lead {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 2rem;
-    font-size: 1rem;
-    color: #fff;
-  }
-
-  .version {
-    margin-top: -1rem;
-    margin-bottom: 2rem;
-  }
-
-  .btn {
-    width: 100%;
-    padding: 1rem 2rem;
-    font-size: 1.25rem;
-    font-weight: 500;
-    color: $bd-yellow;
-    border-color: $bd-yellow;
-
-    &:hover {
-      color: $bd-graphite;
-      background-color: $bd-yellow;
-      border-color: $bd-yellow;
-    }
-  }
-
-  .carbonad {
-    margin-bottom: -2rem !important;
-  }
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 8rem;
-    padding-bottom: 2rem;
-
-    .btn {
-      width: auto;
-    }
-
-    .carbonad {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    padding-bottom: 4rem;
-
-    .bd-header {
-      margin-bottom: 4rem;
-    }
-
-    h1 {
-      font-size: 4rem;
-    }
-
-    .lead {
-      font-size: 1.5rem;
-    }
-
-    .carbonad {
-      margin-top: 3rem !important;
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    .lead {
-      width: 85%;
-      font-size: 2rem;
-    }
-  }
-}
-
-
-//
-// Homepage featurettes
-//
-
-.bd-featurette {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #555;
-  // text-align: center;
-  background-color: #fff;
-  border-top: 1px solid #eee;
-
-  .highlight {
-    text-align: left;
-  }
-}
-
-.bd-featurette-title {
-  margin-bottom: .5rem;
-  font-size: 2rem;
-  font-weight: normal;
-  color: #333;
-
-  + .lead {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-  }
-}
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem 0;
-}
-.bd-featurette h4 {
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  font-weight: normal;
-  color: #333;
-}
-.bd-featurette-img {
-  display: block;
-  margin-bottom: 1.25rem;
-  color: #333;
-}
-.bd-featurette-img:hover {
-  color: $brand-primary;
-  text-decoration: none;
-}
-.bd-featurette-img img {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 480px) {
-  .bd-featurette .img-responsive {
-    margin-top: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  .bd-featurette {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-  .bd-featurette-title {
-    font-size: 2.5rem;
-  }
-  .bd-featurette .lead {
-    max-width: 80%;
-    // margin-right: auto;
-    // margin-left: auto;
-  }
-  .bd-featurette .img-responsive {
-    margin-top: 0;
-  }
-}
-
-
-//
-// Featured Expo sites
-//
-
-.bd-featured-sites {
-  margin-right: -1px;
-  margin-left: -1px;
-}
-.bd-featured-sites .col-xs-6 {
-  padding: 1px;
-}
-.bd-featured-sites .img-responsive {
-  margin-top: 0;
-}
-
-@media (min-width: 768px) {
-  .bd-featured-sites .col-sm-3:first-child img {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
-  }
-  .bd-featured-sites .col-sm-3:last-child img {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-  }
-}
--- a/docs/assets/scss/_masthead.scss
+++ b/docs/assets/scss/_masthead.scss
@ -0,0 +1,91 @@
+.bd-masthead {
+  position: relative;
+  padding: ($grid-gutter-width / 2);
+  color: $bd-purple-light;
+  text-align: center;
+  background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
+  background:         linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
+
+  .bd-booticon {
+    margin: 0 auto 2rem;
+    color: $bd-purple-light;
+    border-color: $bd-purple-light;
+  }
+
+  h1 {
+    font-weight: 300;
+    line-height: 1;
+  }
+
+  .lead {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 2rem;
+    font-size: 1rem;
+    color: #fff;
+  }
+
+  .version {
+    margin-top: -1rem;
+    margin-bottom: 2rem;
+  }
+
+  .btn {
+    width: 100%;
+    padding: 1rem 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: $bd-yellow;
+    border-color: $bd-yellow;
+
+    &:hover {
+      color: $bd-graphite;
+      background-color: $bd-yellow;
+      border-color: $bd-yellow;
+    }
+  }
+
+  .carbonad {
+    margin-bottom: -2rem !important;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 8rem;
+    padding-bottom: 2rem;
+
+    .btn {
+      width: auto;
+    }
+
+    .carbonad {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-bottom: 4rem;
+
+    .bd-header {
+      margin-bottom: 4rem;
+    }
+
+    h1 {
+      font-size: 4rem;
+    }
+
+    .lead {
+      font-size: 1.5rem;
+    }
+
+    .carbonad {
+      margin-top: 3rem !important;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .lead {
+      width: 85%;
+      font-size: 2rem;
+    }
+  }
+}
--- a/docs/assets/scss/_nav.scss
+++ b/docs/assets/scss/_nav.scss
@ -0,0 +1,24 @@
+//
+// Main navbar
+//
+
+.bd-navbar {
+  font-size: 87.5%; // 14px
+
+  .navbar-nav {
+    .nav-link {
+      color: $bd-graphite-light;
+
+      &.active,
+      &:hover,
+      &:focus {
+        color: $gray-dark;
+        background-color: transparent;
+      }
+
+      &.active {
+        font-weight: 500;
+      }
+    }
+  }
+}
--- a/docs/assets/scss/_page-header.scss
+++ b/docs/assets/scss/_page-header.scss
@ -1,45 +1,53 @@
-//
-// Page headers
-//
+.bd-pageheader {
+  padding: 2rem .75rem;
+  margin-bottom: 1.5rem;
+  color: $bd-purple-light;
+  text-align: center;
+  background-color: $bd-purple;

-// .bd-header {
-//   padding-top: 2rem;
-//   padding-bottom: 2rem;
-//   margin-bottom: 2rem;
-//   text-align: center;
-//   background-color: $bd-purple;
+  .container {
+    position: relative;
+  }

-//   .container {
-//     position: relative;
-//   }
+  h1 {
+    font-size: 3rem;
+    font-weight: normal;
+    color: #fff;
+  }

-//   h1 {
-//     margin-top: 0;
-//     color: #fff;
-//   }
+  p {
+    margin-bottom: 0;
+    font-size: 1.5rem;
+  }

-//   p {
-//     margin-bottom: 0;
-//     font-weight: 300;
-//     color: rgba(255,255,255,.65);
-//   }
+  @include media-breakpoint-up(sm) {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    margin-bottom: 3rem;
+    text-align: left;

-//   @media (min-width: 768px) {
-//     text-align: left;
+    .carbonad {
+      margin: 2rem 0 0 !important;
+    }
+  }

-//     h1 {
-//       font-size: 4rem;
-//       line-height: 1;
-//     }
-//   }
+  @include media-breakpoint-up(md) {
+    h1 {
+      font-size: 4rem;
+    }
+  }

-//   @media (min-width: 992px) {
-//     padding-top: 4rem;
-//     padding-bottom: 4rem;
+  @include media-breakpoint-up(lg) {
+    h1,
+    p {
+      margin-right: 380px;
+    }

-//     h1,
-//     p {
-//       margin-right: 380px;
-//     }
-//   }
-// }
+    .carbonad {
+      position: absolute;
+      top: 0;
+      right: .75rem; // offset from the .container's padding
+      margin: 0 !important;
+    }
+  }
+}
--- a/docs/assets/scss/_social-buttons.scss
+++ b/docs/assets/scss/_social-buttons.scss
@ -1,31 +0,0 @@
-//
-// Social buttons
-//
-
-.bd-social {
-  margin-bottom: 1.5rem;
-  margin-left: -.5rem;
-}
-.bd-social-buttons {
-  display: inline-block;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-.bd-social-buttons li {
-  display: inline-block;
-  padding: .25rem .5rem;
-  line-height: 1;
-}
-.bd-social-buttons .twitter-follow-button {
-  width: 225px !important;
-}
-.bd-social-buttons .twitter-share-button {
-  width: 98px !important;
-}
-
-// Style the GitHub buttons via CSS instead of inline attributes
-.github-btn {
-  overflow: hidden;
-  border: 0;
-}
--- a/docs/assets/scss/_team.scss
+++ b/docs/assets/scss/_team.scss
@ -1,7 +1,3 @@
-//
-// Team members
-//
-
 .bd-team {
  margin-bottom: 1.5rem;

@ -21,7 +17,7 @@
    height: 1.25rem;
    margin-top: .25rem;
  }
-  
+
  img {
    float: left;
    width: 2rem;
--- a/docs/assets/scss/_zeroclipboard.scss
+++ b/docs/assets/scss/_zeroclipboard.scss
@ -1,6 +1,6 @@
+// ZeroClipboard
 //
-// ZeroClipboard styles
-//
+// Flash-based `Copy` buttons for code snippets.

 .zero-clipboard {
  position: relative;
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@ -28,7 +28,7 @@

 // Local docs variables
 $bd-purple:         #563d7c;
-$bd-purple-bright:  lighten(saturate($bd-purple, 15%), 25%);
+$bd-purple-bright:  lighten(saturate($bd-purple, 5%), 15%);
 $bd-purple-light:   #cdbfe3;
 $bd-graphite:       #2a2730;
 $bd-graphite-light: lighten($bd-graphite, 40%);
@ -38,14 +38,16 @@ $bd-warning:        #f0ad4e;
 $bd-info:           #5bc0de;

 // Load docs components
-@import "layout";
-@import "sidebar";
@import "booticon";
-@import "homepage";
+@import "nav";
+@import "masthead";
+@import "featurettes";
+@import "featured-sites";
@import "ads";
-@import "footer";
-@import "social-buttons";
+@import "content";
@import "page-header";
+@import "sidebar";
+@import "footer";
@import "component-examples";
@import "responsive-tests";
@import "buttons";
--- a/docs/components/button-dropdown.md
+++ b/docs/components/button-dropdown.md
@ -24,63 +24,63 @@ Turn a button into a dropdown toggle with some basic markup changes.
 <div class="bd-example">
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
 </div>

@ -90,13 +90,13 @@ Turn a button into a dropdown toggle with some basic markup changes.
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
 </div>
 {% endhighlight %}

@ -110,78 +110,78 @@ Similarly, create split button dropdowns with the same markup changes, only with
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </div><!-- /btn-group -->
 </div>

@ -192,13 +192,13 @@ Similarly, create split button dropdowns with the same markup changes, only with
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
 </div>
 {% endhighlight %}

@ -212,13 +212,13 @@ Button dropdowns work with buttons of all sizes.
      <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button
      </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
    </div><!-- /btn-group -->
  </div><!-- /btn-toolbar -->
  <div class="btn-toolbar" role="toolbar">
@ -226,13 +226,13 @@ Button dropdowns work with buttons of all sizes.
      <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button
      </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
    </div><!-- /btn-group -->
  </div><!-- /btn-toolbar -->
  <div class="btn-toolbar" role="toolbar">
@ -240,13 +240,13 @@ Button dropdowns work with buttons of all sizes.
      <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Extra small button
      </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
    </div><!-- /btn-group -->
  </div><!-- /btn-toolbar -->
 </div><!-- /example -->
@ -257,9 +257,9 @@ Button dropdowns work with buttons of all sizes.
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
    ...
-  </ul>
+  </div>
 </div>

 <!-- Small button group -->
@ -267,9 +267,9 @@ Button dropdowns work with buttons of all sizes.
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
    ...
-  </ul>
+  </div>
 </div>

 <!-- Extra small button group -->
@ -277,9 +277,9 @@ Button dropdowns work with buttons of all sizes.
  <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button
  </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
    ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}

@ -294,26 +294,26 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
    </div><!-- /btn-group -->
    <div class="btn-group dropup">
      <button type="button" class="btn btn-primary">Right dropup</button>
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="#">Separated link</a></li>
-      </ul>
+      <div class="dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
    </div><!-- /btn-group -->
  </div>
 </div>
@ -324,8 +324,8 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
-  <ul class="dropdown-menu">
+  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
-  </ul>
+  </div>
 </div>
 {% endhighlight %}
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@ -2,6 +2,7 @@
 layout: docs
 title: Buttons
 group: components
+redirect_from: "/components/"
 ---

 Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@ -20,20 +20,33 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
-  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-    <li>
-      <a href="#">Action</a>
-    </li>
-    <li>
-      <a href="#">Another action</a>
-    </li>
-    <li>
-      <a href="#">Something else here</a>
-    </li>
-  </ul>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <a class="dropdown-item" href="#">Something else here</a>
+  </div>
 </div>
 {% endexample %}

+### Button elements
+
+You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
+
+{% example html %}
+<div class="dropdown open">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Dropdown
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button">Something else here</button>
+  </div>
+</div>
+{% endexample %}
+
+
+
 ## Alignment

 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
@ -43,9 +56,9 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 {% endcallout %}

 {% highlight html %}
-<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
-</ul>
+</div>
 {% endhighlight %}

 ## Menu headers
@ -53,15 +66,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 Add a header to label sections of actions in any dropdown menu.

 {% example html %}
-<ul class="dropdown-menu">
-  <li class="dropdown-header">Dropdown header</li>
-  <li>
-    <a href="#">Action</a>
-  </li>
-  <li>
-    <a href="#">Another action</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <h6 class="dropdown-header">Dropdown header</h6>
+  <a class="dropdown-item" href="#">Action</a>
+  <a class="dropdown-item" href="#">Another action</a>
+</div>
 {% endexample %}

 ## Menu dividers
@ -69,39 +78,25 @@ Add a header to label sections of actions in any dropdown menu.
 Separate groups of related menu items with a divider.

 {% example html %}
-<ul class="dropdown-menu">
-  <li>
-    <a href="#">Action</a>
-  </li>
-  <li>
-    <a href="#">Another action</a>
-  </li>
-  <li>
-    <a href="#">Something else here</a>
-  </li>
-  <li class="dropdown-divider"></li>
-  <li>
-    <a href="#">Separated link</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <a class="dropdown-item" href="#">Action</a>
+  <a class="dropdown-item" href="#">Another action</a>
+  <a class="dropdown-item" href="#">Something else here</a>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">Separated link</a>
+</div>
 {% endexample %}

 ## Disabled menu items

-Add `.disabled` to a `<li>` in the dropdown to disable the link.
+Add `.disabled` to items in the dropdown to **style them as disabled**.

 {% example html %}
-<ul class="dropdown-menu">
-  <li>
-    <a href="#">Regular link</a>
-  </li>
-  <li class="disabled">
-    <a href="#">Disabled link</a>
-  </li>
-  <li>
-    <a href="#">Another link</a>
-  </li>
-</ul>
+<div class="dropdown-menu">
+  <a class="dropdown-item" href="#">Regular link</a>
+  <a class="dropdown-item disabled" href="#">Disabled link</a>
+  <a class="dropdown-item" href="#">Another link</a>
+</div>
 {% endexample %}

 ## Usage
@ -121,9 +116,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
-  <ul class="dropdown-menu" aria-labelledby="dLabel">
+  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}

@ -135,9 +130,9 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
    Dropdown trigger
  </a>

-  <ul class="dropdown-menu" aria-labelledby="dLabel">
+  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
-  </ul>
+  </div>
 </div>
 {% endhighlight %}

--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@ -24,9 +24,9 @@ List groups are a flexible and powerful component for displaying not only simple
 </ul>
 {% endexample %}

-## Badges
+## Labels

-Add the badges component to any list group item and it will automatically be positioned on the right.
+Add labels to any list group item to show unread counts, activity, etc.

 {% example html %}
 <ul class="list-group">
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@ -4,41 +4,38 @@ title: Navbar
 group: components
 ---

-The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
+The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.

 ## Contents

 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}

-### Basics
+## Basics

 Here's what you need to know before getting started with the navbar:

- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
+- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
 - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
+- Use `.pull-left` and `.pull-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

-### Branding
+## Supported content

-Name your company, product, or project with `.navbar-brand`.
+Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
+
+- `.navbar-brand` for your company, product, or project name
+- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
+- `.navbar-form` for vertically centering default-sized inputs and buttons.
+- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
+
+Here's an example of all the sub-components included in a default, light navbar:

 {% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand">
-    <a href="#">Navbar</a>
-  </h3>
-</nav>
-{% endexample %}
-
-### Navigation
-
-Use `.nav-pills` within a navbar for basic navigation.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <ul class="nav nav-pills">
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
@ -52,122 +49,23 @@ Use `.nav-pills` within a navbar for basic navigation.
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
-</nav>
-{% endexample %}
-
-### Inline forms
-
-Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <form class="form-inline">
+  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
+    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
 </nav>
 {% endexample %}

-### Containers
+## Color schemes

-Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar.
+Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.

-{% example html %}
-<div class="container">
-  <nav class="navbar navbar-default">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </nav>
-</div>
-{% endexample %}
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <div class="container">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </div>
-</nav>
-{% endexample %}
-
-### Alignment
-
-Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills pull-left">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Features</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Pricing</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">About</a>
-    </li>
-  </ul>
-  <ul class="nav nav-pills pull-right">
-    <li class="nav-item">
-      <a class="nav-link" href="#">Help</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Sign out</a>
-    </li>
-  </ul>
-</nav>
-{% endexample %}
-
-### Inverse color scheme
-
-Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
-
-{% example html %}
-<nav class="navbar navbar-inverse">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills pull-left">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Features</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Pricing</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">About</a>
-    </li>
-  </ul>
-  <form class="form-inline pull-right">
-    <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
-  </form>
-</nav>
-{% endexample %}
-
-### Small navbar
-
-Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
-
-When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
+Here are some examples to show what we mean.

 <div class="bd-example">
-  <nav class="navbar navbar-default navbar-sm">
-    <h3 class="navbar-brand pull-left">
-      <a href="#">Navbar</a>
-    </h3>
-    <ul class="nav navbar-nav pull-left">
+  <nav class="navbar navbar-dark bg-inverse">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
@ -181,17 +79,14 @@ When moving from a regular navbar to a small one, be sure to update your inputs
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
-    <form class="form-inline pull-right">
-      <input class="form-control form-control-sm" type="text" placeholder="Search">
-      <button class="btn btn-sm btn-primary" type="submit">Search</button>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-info-outline" type="submit">Search</button>
    </form>
  </nav>
-
-  <nav class="navbar navbar-inverse navbar-sm">
-    <h3 class="navbar-brand pull-left">
-      <a href="#">Navbar</a>
-    </h3>
-    <ul class="nav navbar-nav pull-left">
+  <nav class="navbar navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
@ -205,35 +100,97 @@ When moving from a regular navbar to a small one, be sure to update your inputs
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
-    <form class="form-inline pull-right">
-      <input class="form-control form-control-sm" type="text" placeholder="Search">
-      <button class="btn btn-sm btn-primary" type="submit">Search</button>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-secondary-outline" type="submit">Search</button>
+    </form>
+  </nav>
+  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
+    <form class="form-inline navbar-form pull-right">
+      <input class="form-control" type="text" placeholder="Search">
+      <button class="btn btn-primary-outline" type="submit">Search</button>
    </form>
  </nav>
 </div>

 {% highlight html %}
-<nav class="navbar navbar-default navbar-sm">
-  <!-- Navbar contents -->
+<nav class="navbar navbar-dark bg-inverse">
+  <!-- Navbar content -->
 </nav>

-<nav class="navbar navbar-inverse navbar-sm">
-  <!-- Navbar contents -->
+<nav class="navbar navbar-dark bg-primary">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+  <!-- Navbar content -->
 </nav>
 {% endhighlight %}

-### Collapsible content
+## Containers
+
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
+
+{% example html %}
+<div class="container">
+  <nav class="navbar navbar-light bg-faded">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </nav>
+</div>
+{% endexample %}
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </div>
+</nav>
+{% endexample %}
+
+## Placement
+
+Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
+
+{% example html %}
+<nav class="navbar navbar-fixed-top navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed top</a>
+</nav>
+{% endexample %}
+
+{% example html %}
+<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Fixed bottom</a>
+</nav>
+{% endexample %}
+
+
+## Collapsible content

 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.

 {% example html %}
 <div class="collapse" id="exCollapsingNavbar">
-  <div class="inverse p-a">
+  <div class="bg-inverse p-a">
    <h4>Collapsed content</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
 </div>
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
@ -243,13 +200,26 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.

 {% example html %}
-<nav class="navbar navbar-default">
+<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-    <h4>Collapsed on xs devices</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <a class="navbar-brand" href="#">Responsive navbar</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
  </div>
 </nav>
 {% endexample %}
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@ -123,13 +123,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
  </li>
  <li class="nav-item">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
@ -149,13 +149,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
  </li>
  <li class="nav-item">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-    <ul class="dropdown-menu">
-      <li><a href="#">Action</a></li>
-      <li><a href="#">Another action</a></li>
-      <li><a href="#">Something else here</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href="#">Separated link</a></li>
-    </ul>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
@ -182,14 +182,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
-      <ul class="dropdown-menu">
-        <li>
-          <a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
-        </li>
-        <li>
-          <a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
-        </li>
-      </ul>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
+        <a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
+      </div>
    </li>
  </ul>
  <div id="myTabContent" class="tab-content">
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@ -2,6 +2,7 @@
 layout: docs
 title: Reboot
 group: content
+redirect_from: "/content/"
 ---

 Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
--- a/docs/dist/css/bootstrap.css
+++ b/docs/dist/css/bootstrap.css
@ -495,11 +495,11 @@ h6, .h6 {
 }

 h1, .h1 {
-  font-size: 2.75rem;
+  font-size: 2.5rem;
 }

 h2, .h2 {
-  font-size: 2.25rem;
+  font-size: 2rem;
 }

 h3, .h3 {
@ -1859,7 +1859,7 @@ pre code {
 .form-control {
  display: block;
  width: 100%;
-  padding: .5rem .75rem;
+  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #55595c;
@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
 }

 .form-control-label {
-  padding: .5625rem .75rem;
+  padding: .4375rem .75rem;
  margin-bottom: 0;
 }

@ -1926,7 +1926,7 @@ fieldset[disabled] .form-control {
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
-    line-height: 2.625rem;
+    line-height: 2.375rem;
  }
  input[type="date"].input-sm,
  .input-group-sm input[type="date"].form-control,
@ -1951,9 +1951,9 @@ fieldset[disabled] .form-control {
 }

 .form-control-static {
-  min-height: 2.625rem;
-  padding-top: .5625rem;
-  padding-bottom: .5625rem;
+  min-height: 2.375rem;
+  padding-top: .4375rem;
+  padding-bottom: .4375rem;
  margin-bottom: 0;
 }

@ -1971,7 +1971,6 @@ fieldset[disabled] .form-control {
 .form-control-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
-  height: 1.95rem;
  padding: .275rem .75rem;
  font-size: .85rem;
  line-height: 1.5;
@ -1981,8 +1980,7 @@ fieldset[disabled] .form-control {
 .form-control-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
-  height: 3.291667rem;
-  padding: .75rem 1.5rem;
+  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.333333;
  border-radius: .3rem;
@ -2071,9 +2069,9 @@ fieldset[disabled] .checkbox label {
 .form-control-error {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
-  background-position: center right .65625rem;
-  -webkit-background-size: 1.70625rem 1.70625rem;
-          background-size: 1.70625rem 1.70625rem;
+  background-position: center right .59375rem;
+  -webkit-background-size: 1.54375rem 1.54375rem;
+          background-size: 1.54375rem 1.54375rem;
 }

 .has-success .help-block,
@ -2222,7 +2220,7 @@ fieldset[disabled] .checkbox label {

 .btn {
  display: inline-block;
-  padding: .5rem 1rem;
+  padding: .375rem 1rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
@ -2550,7 +2548,7 @@ fieldset[disabled] .btn-danger:hover {

 .btn-primary-outline {
  color: #0275d8;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #0275d8;
 }
@ -2588,7 +2586,7 @@ fieldset[disabled] .btn-primary-outline:hover {

 .btn-secondary-outline {
  color: #ccc;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #ccc;
 }
@ -2626,7 +2624,7 @@ fieldset[disabled] .btn-secondary-outline:hover {

 .btn-info-outline {
  color: #5bc0de;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #5bc0de;
 }
@ -2664,7 +2662,7 @@ fieldset[disabled] .btn-info-outline:hover {

 .btn-success-outline {
  color: #5cb85c;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #5cb85c;
 }
@ -2702,7 +2700,7 @@ fieldset[disabled] .btn-success-outline:hover {

 .btn-warning-outline {
  color: #f0ad4e;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #f0ad4e;
 }
@ -2740,7 +2738,7 @@ fieldset[disabled] .btn-warning-outline:hover {

 .btn-danger-outline {
  color: #d9534f;
-  background-color: #fff;
+  background-color: transparent;
  background-image: none;
  border-color: #d9534f;
 }
@ -2816,14 +2814,14 @@ fieldset[disabled] .btn-link:hover {
 }

 .btn-lg, .btn-group-lg > .btn {
-  padding: .75rem 1.5rem;
+  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.333333;
  border-radius: .3rem;
 }

 .btn-sm, .btn-group-sm > .btn {
-  padding: .275rem .75rem;
+  padding: .25rem .75rem;
  font-size: .85rem;
  line-height: 1.5;
  border-radius: .2rem;
@ -2919,47 +2917,51 @@ input[type="button"].btn-block {
  border-radius: .25rem;
 }

-.dropdown-menu .dropdown-divider {
+.dropdown-divider {
  height: 1px;
  margin: .5rem 0;
  overflow: hidden;
  background-color: #e5e5e5;
 }

-.dropdown-menu > li > a {
+.dropdown-item {
  display: block;
+  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #373a3c;
+  text-align: inherit;
  white-space: nowrap;
+  background: none;
+  border: 0;
 }

-.dropdown-menu > li > a:focus,
-.dropdown-menu > li > a:hover {
+.dropdown-item:focus,
+.dropdown-item:hover {
  color: #2b2d2f;
  text-decoration: none;
  background-color: #f5f5f5;
 }

-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:focus,
-.dropdown-menu > .active > a:hover {
+.dropdown-item.active,
+.dropdown-item.active:focus,
+.dropdown-item.active:hover {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
  outline: 0;
 }

-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:focus,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-item.disabled,
+.dropdown-item.disabled:focus,
+.dropdown-item.disabled:hover {
  color: #818a91;
 }

-.dropdown-menu > .disabled > a:focus,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-item.disabled:focus,
+.dropdown-item.disabled:hover {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
@ -3252,7 +3254,7 @@ input[type="button"].btn-block {
 }

 .input-group-addon {
-  padding: .5rem .75rem;
+  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1;
@ -3272,7 +3274,7 @@ input[type="button"].btn-block {

 .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .input-group-addon.btn {
-  padding: 1.5rem 1.5rem;
+  padding: 1.25rem 1.25rem;
  font-size: 1.25rem;
  border-radius: .3rem;
 }
@ -3640,7 +3642,7 @@ input[type="button"].btn-block {

 .nav-tabs .nav-link {
  display: block;
-  padding: .75em 1em;
+  padding: .5em 1em;
  border: 1px solid transparent;
  border-radius: .25rem .25rem 0 0;
 }
@ -3688,7 +3690,7 @@ input[type="button"].btn-block {

 .nav-pills .nav-link {
  display: block;
-  padding: .75em 1em;
+  padding: .5em 1em;
  border-radius: .25rem;
 }

@ -3735,8 +3737,7 @@ input[type="button"].btn-block {

 .navbar {
  position: relative;
-  padding: 1rem;
-  margin-bottom: 1rem;
+  padding: .5rem 1rem;
 }

 .navbar:before,
@ -3805,15 +3806,14 @@ input[type="button"].btn-block {

 .navbar-brand {
  float: left;
-  padding: .625rem .75rem;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
  margin-right: 1rem;
-  margin-bottom: 0;
  font-size: 1.25rem;
-  line-height: 1;
 }

-.navbar-brand > a:focus,
-.navbar-brand > a:hover {
+.navbar-brand:focus,
+.navbar-brand:hover {
  text-decoration: none;
 }

@ -3821,14 +3821,27 @@ input[type="button"].btn-block {
  display: block;
 }

-.navbar-toggler {
-  padding: .55rem .75rem;
+.navbar-divider {
+  float: left;
+  width: 1px;
+  padding-top: .425rem;
+  padding-bottom: .425rem;
  margin-right: 1rem;
-  margin-bottom: 0;
+  margin-left: 1rem;
+  overflow: hidden;
+}
+
+.navbar-divider:before {
+  content: '\00a0';
+}
+
+.navbar-toggler {
+  padding: .5rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background: none;
-  border: 0;
+  border: .0625rem solid transparent;
+  border-radius: .25rem;
 }

 .navbar-toggler:focus,
@ -3848,140 +3861,96 @@ input[type="button"].btn-block {
  }
 }

-.navbar-nav > li > .dropdown-menu {
-  margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  border-top-left-radius: .25rem;
-  border-top-right-radius: .25rem;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.navbar-sm {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.navbar-sm .navbar-brand {
-  padding-top: .95rem;
-  padding-bottom: .95rem;
-}
-
-.navbar-sm .form-inline {
-  margin-top: .6rem;
-}
-
 .navbar-nav .nav-item {
  float: left;
 }

 .navbar-nav .nav-link {
  display: block;
-  padding-top: .95rem;
-  padding-bottom: .95rem;
-  line-height: 1.25;
+  padding-top: .425rem;
+  padding-bottom: .425rem;
 }

-.navbar-nav .open > .nav-link,
-.navbar-nav .open > .nav-link:focus,
-.navbar-nav .open > .nav-link:hover,
-.navbar-nav .active > .nav-link,
-.navbar-nav .active > .nav-link:focus,
-.navbar-nav .active > .nav-link:hover,
-.navbar-nav .nav-link.open,
-.navbar-nav .nav-link.open:focus,
-.navbar-nav .nav-link.open:hover,
-.navbar-nav .nav-link.active,
-.navbar-nav .nav-link.active:focus,
-.navbar-nav .nav-link.active:hover {
-  color: #555;
-  cursor: default;
-  background-color: #e7e7e7;
+.navbar-nav .nav-link + .nav-link {
+  margin-left: 1rem;
 }

-.navbar-default {
-  background-color: #f8f8f8;
-  border-color: #e7e7e7;
+.navbar-nav .nav-item + .nav-item {
+  margin-left: 1rem;
 }

-.navbar-default .navbar-brand {
-  color: #777;
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-default .navbar-brand:focus,
-.navbar-default .navbar-brand:hover {
-  color: #5e5e5e;
-  background-color: transparent;
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-inverse {
-  background-color: #373a3c;
-  border-color: #1f2021;
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, .3);
 }

-.navbar-inverse .navbar-toggler,
-.navbar-inverse .navbar-brand > a,
-.navbar-inverse .nav-pills > .nav-item > .nav-link {
-  color: #aab0b5;
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+  color: rgba(0, 0, 0, .6);
 }

-.navbar-inverse .navbar-toggler:focus,
-.navbar-inverse .navbar-toggler:hover,
-.navbar-inverse .navbar-brand > a:focus,
-.navbar-inverse .navbar-brand > a:hover,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:focus,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:hover {
-  color: #fff;
+.navbar-light .navbar-nav .open > .nav-link,
+.navbar-light .navbar-nav .open > .nav-link:focus,
+.navbar-light .navbar-nav .open > .nav-link:hover,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .active > .nav-link:focus,
+.navbar-light .navbar-nav .active > .nav-link:hover,
+.navbar-light .navbar-nav .nav-link.open,
+.navbar-light .navbar-nav .nav-link.open:focus,
+.navbar-light .navbar-nav .nav-link.open:hover,
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .nav-link.active:focus,
+.navbar-light .navbar-nav .nav-link.active:hover {
+  color: rgba(0, 0, 0, .8);
 }

-.navbar-inverse .nav-pills > .nav-item > .nav-link:focus,
-.navbar-inverse .nav-pills > .nav-item > .nav-link:hover {
-  color: #fff;
-  background-color: #1f2021;
+.navbar-light .navbar-divider {
+  background-color: rgba(0, 0, 0, .075);
 }

-.navbar-inverse .nav-pills > .active > .nav-link,
-.navbar-inverse .nav-pills > .nav-link.active {
-  color: #fff;
-  background-color: #1f2021;
+.navbar-dark .navbar-brand {
+  color: white;
 }

-.navbar-inverse .navbar-brand {
-  color: #aab0b5;
+.navbar-dark .navbar-brand:focus,
+.navbar-dark .navbar-brand:hover {
+  color: white;
 }

-.navbar-inverse .navbar-brand:focus,
-.navbar-inverse .navbar-brand:hover {
-  color: #fff;
-  background-color: transparent;
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, .5);
 }

-.navbar-inverse .navbar-nav .navbar-link {
-  color: #aab0b5;
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+  color: rgba(255, 255, 255, .75);
 }

-.navbar-inverse .navbar-nav .navbar-link:focus,
-.navbar-inverse .navbar-nav .navbar-link:hover {
-  color: #fff;
-  background-color: transparent;
+.navbar-dark .navbar-nav .open > .nav-link,
+.navbar-dark .navbar-nav .open > .nav-link:focus,
+.navbar-dark .navbar-nav .open > .nav-link:hover,
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .active > .nav-link:focus,
+.navbar-dark .navbar-nav .active > .nav-link:hover,
+.navbar-dark .navbar-nav .nav-link.open,
+.navbar-dark .navbar-nav .nav-link.open:focus,
+.navbar-dark .navbar-nav .nav-link.open:hover,
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .navbar-nav .nav-link.active:focus,
+.navbar-dark .navbar-nav .nav-link.active:hover {
+  color: white;
 }

-.navbar-inverse .navbar-nav .navbar-link.active > a,
-.navbar-inverse .navbar-nav .navbar-link.active > a:focus,
-.navbar-inverse .navbar-nav .navbar-link.active > a:hover {
-  color: #fff;
-  background-color: #1f2021;
-}
-
-.navbar-inverse .navbar-nav .navbar-link.disabled > a,
-.navbar-inverse .navbar-nav .navbar-link.disabled > a:focus,
-.navbar-inverse .navbar-nav .navbar-link.disabled > a:hover {
-  color: #444;
-  background-color: transparent;
+.navbar-dark .navbar-divider {
+  background-color: rgba(255, 255, 255, .075);
 }

 .card {
@ -5997,11 +5966,15 @@ a.text-danger:hover {
  color: #c9302c;
 }

-.inverse {
+.bg-inverse {
  color: #eceeef;
  background-color: #373a3c;
 }

+.bg-faded {
+  background-color: #f7f7f9;
+}
+
 .bg-primary {
  color: #fff;
  background-color: #0275d8;
--- a/docs/dist/css/bootstrap.css.map
+++ b/docs/dist/css/bootstrap.css.map
--- a/docs/dist/css/bootstrap.min.css
+++ b/docs/dist/css/bootstrap.min.css
--- a/docs/dist/css/bootstrap.min.css.map
+++ b/docs/dist/css/bootstrap.min.css.map
--- a/docs/dist/js/bootstrap.js
+++ b/docs/dist/js/bootstrap.js
@ -1454,7 +1454,7 @@ var Dropdown = (function ($) {
        this.setAttribute('aria-expanded', 'true');

        $(parent).toggleClass(ClassName.OPEN);
-        $(parent).trigger(Event.SHOWN, relatedTarget);
+        $(parent).trigger($.Event(Event.SHOWN, relatedTarget));

        return false;
      }
@ -1525,7 +1525,7 @@ var Dropdown = (function ($) {

          toggles[i].setAttribute('aria-expanded', 'false');

-          $(_parent).removeClass(ClassName.OPEN).trigger(Event.HIDDEN, relatedTarget);
+          $(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
        }
      }
    }, {
@ -1669,6 +1669,7 @@ var Modal = (function ($) {
  };

  var ClassName = {
+    SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
    BACKDROP: 'modal-backdrop',
    OPEN: 'modal-open',
    FADE: 'fade',
@ -1679,7 +1680,7 @@ var Modal = (function ($) {
    DIALOG: '.modal-dialog',
    DATA_TOGGLE: '[data-toggle="modal"]',
    DATA_DISMISS: '[data-dismiss="modal"]',
-    SCROLLBAR_MEASURER: 'modal-scrollbar-measure'
+    FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
  };

  /**
@ -2029,7 +2030,7 @@ var Modal = (function ($) {
    }, {
      key: '_setScrollbar',
      value: function _setScrollbar() {
-        var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10);
+        var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);

        this._originalBodyPadding = document.body.style.paddingRight || '';

@ -2047,7 +2048,7 @@ var Modal = (function ($) {
      value: function _getScrollbarWidth() {
        // thx d.walsh
        var scrollDiv = document.createElement('div');
-        scrollDiv.className = Selector.SCROLLBAR_MEASURER;
+        scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
        document.body.appendChild(scrollDiv);
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        document.body.removeChild(scrollDiv);
--- a/docs/dist/js/bootstrap.min.js
+++ b/docs/dist/js/bootstrap.min.js
--- a/docs/dist/js/umd/dropdown.js
+++ b/docs/dist/js/umd/dropdown.js
@ -133,7 +133,7 @@
          this.setAttribute('aria-expanded', 'true');

          $(parent).toggleClass(ClassName.OPEN);
-          $(parent).trigger(Event.SHOWN, relatedTarget);
+          $(parent).trigger($.Event(Event.SHOWN, relatedTarget));

          return false;
        }
@ -204,7 +204,7 @@

            toggles[i].setAttribute('aria-expanded', 'false');

-            $(_parent).removeClass(ClassName.OPEN).trigger(Event.HIDDEN, relatedTarget);
+            $(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
          }
        }
      }, {
--- a/docs/dist/js/umd/modal.js
+++ b/docs/dist/js/umd/modal.js
@ -74,6 +74,7 @@
    };

    var ClassName = {
+      SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
      BACKDROP: 'modal-backdrop',
      OPEN: 'modal-open',
      FADE: 'fade',
@ -84,7 +85,7 @@
      DIALOG: '.modal-dialog',
      DATA_TOGGLE: '[data-toggle="modal"]',
      DATA_DISMISS: '[data-dismiss="modal"]',
-      SCROLLBAR_MEASURER: 'modal-scrollbar-measure'
+      FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
    };

    /**
@ -434,7 +435,7 @@
      }, {
        key: '_setScrollbar',
        value: function _setScrollbar() {
-          var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10);
+          var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);

          this._originalBodyPadding = document.body.style.paddingRight || '';

@ -452,7 +453,7 @@
        value: function _getScrollbarWidth() {
          // thx d.walsh
          var scrollDiv = document.createElement('div');
-          scrollDiv.className = Selector.SCROLLBAR_MEASURER;
+          scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
          document.body.appendChild(scrollDiv);
          var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
          document.body.removeChild(scrollDiv);
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@ -2,6 +2,7 @@
 layout: docs
 title: Introduction
 group: getting-started
+redirect_from: "/getting-started/"
 ---

 Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@ -2,6 +2,7 @@
 layout: docs
 title: Overview
 group: layout
+redirect_from: "/layout/"
 ---

 Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
--- a/docs/migration.md
+++ b/docs/migration.md
@ -127,14 +127,22 @@ TODO: audit classes in v4 that aren't present in v4

 ### Responsive utilities

-The following deprecated Less/SCSS variables have been removed in v4.0.0:
+The following deprecated variables have been removed in v4.0.0:

 * `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
 * `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
 * `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
-* `@grid-float-breakpoint`

-The responsive utility classes have been overhauled. The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone. They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`. The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices). The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices). Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices). Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). .The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
+The responsive utility classes have also been overhauled.
+
+- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone.
+- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`.
+- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices).
+- The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices).
+
+Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices).
+
+Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.

 ## Misc notes to prioritize

--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@ -1,8 +1,3 @@
-//
-// Alerts
-// --------------------------------------------------
-
-
 //
 // Base styles
 //
--- a/scss/_animation.scss
+++ b/scss/_animation.scss
@ -1,7 +1,3 @@
-//
-// Component animations
-// --------------------------------------------------
-
 .fade {
  opacity: 0;
  transition: opacity .15s linear;
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@ -1,8 +1,3 @@
-//
-// Breadcrumbs
-// --------------------------------------------------
-
-
 .breadcrumb {
  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
  margin-bottom: $spacer-y;
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@ -1,8 +1,3 @@
-//
-// Button groups
-// --------------------------------------------------
-
-
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@ -1,8 +1,3 @@
-//
-// Buttons
-// --------------------------------------------------
-
-
 //
 // Base styles
 //
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@ -1,8 +1,3 @@
-//
-// Carousel
-// --------------------------------------------------
-
-
 // Wrapper for the slide container and indicators
 .carousel {
  position: relative;
--- a/scss/_close.scss
+++ b/scss/_close.scss
@ -1,8 +1,3 @@
-//
-// Close icons
-// --------------------------------------------------
-
-
 .close {
  float: right;
  font-size: ($font-size-base * 1.5);
--- a/scss/_code.scss
+++ b/scss/_code.scss
@ -1,8 +1,3 @@
-//
-// Code (inline and block)
-// --------------------------------------------------
-
-
 // Inline and block code styles
 code,
 kbd,
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@ -1,8 +1,3 @@
-//
-// Custom forms
-// --------------------------------------------------
-
-
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // http://useiconic.com/open
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@ -1,8 +1,3 @@
-//
-// Dropdown menus
-// --------------------------------------------------
-
-
 // The dropdown wrapper (div)
 .dropup,
 .dropdown {
@ -48,59 +43,61 @@
  border: 1px solid $dropdown-border;
  @include border-radius($border-radius);
  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
-
-  // Dividers (basically an hr) within the dropdown
-  .dropdown-divider {
-    @include nav-divider($dropdown-divider-bg);
-  }
-
-  // Links within the dropdown menu
-  > li > a {
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: normal;
-    line-height: $line-height;
-    color: $dropdown-link-color;
-    white-space: nowrap; // prevent links from randomly breaking onto new lines
-  }
 }

-// Hover/Focus state
-.dropdown-menu > li > a {
+// Dividers (basically an hr) within the dropdown
+.dropdown-divider {
+  @include nav-divider($dropdown-divider-bg);
+}
+
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: $line-height;
+  color: $dropdown-link-color;
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+
+  // For `<button>`s
+  text-align: inherit;
+  width: 100%;
+  background: none;
+  border: 0;
+
  @include hover-focus {
    color: $dropdown-link-hover-color;
    text-decoration: none;
    background-color: $dropdown-link-hover-bg;
  }
-}

-// Active state
-.dropdown-menu > .active > a {
-  @include plain-hover-focus {
-    color: $dropdown-link-active-color;
-    text-decoration: none;
-    background-color: $dropdown-link-active-bg;
-    outline: 0;
-  }
-}
-
-// Disabled state
-//
-// Gray out text and ensure the hover/focus state remains gray
-
-.dropdown-menu > .disabled > a {
-  @include plain-hover-focus {
-    color: $dropdown-link-disabled-color;
+  // Active state
+  &.active {
+    @include plain-hover-focus {
+      color: $dropdown-link-active-color;
+      text-decoration: none;
+      background-color: $dropdown-link-active-bg;
+      outline: 0;
+    }
  }

-  // Nuke hover/focus effects
-  @include hover-focus {
-    text-decoration: none;
-    cursor: $cursor-disabled;
-    background-color: transparent;
-    background-image: none; // Remove CSS gradient
-    @include reset-filter();
+  // Disabled state
+  //
+  // Gray out text and ensure the hover/focus state remains gray
+  &.disabled {
+    @include plain-hover-focus {
+      color: $dropdown-link-disabled-color;
+    }
+
+    // Nuke hover/focus effects
+    @include hover-focus {
+      text-decoration: none;
+      cursor: $cursor-disabled;
+      background-color: transparent;
+      background-image: none; // Remove CSS gradient
+      @include reset-filter();
+    }
  }
 }

--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@ -1,8 +1,3 @@
-//
-// Forms
-// --------------------------------------------------
-
-
 //
 // Textual form controls
 //
@ -149,7 +144,7 @@
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.

 .form-control-sm {
-  height: $input-height-sm;
+  // height: $input-height-sm;
  padding: $input-padding-y-sm $input-padding-x-sm;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
@ -157,7 +152,7 @@
 }

 .form-control-lg {
-  height: $input-height-lg;
+  // height: $input-height-lg;
  padding: $input-padding-y-lg $input-padding-x-lg;
  font-size: $font-size-lg;
  line-height: $line-height-lg;
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@ -1,8 +1,3 @@
-//
-// Grid system
-// --------------------------------------------------
-
-
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@ -1,8 +1,3 @@
-//
-// Input groups
-// --------------------------------------------------
-
-
 //
 // Base styles
 //
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@ -1,8 +1,3 @@
-//
-// Jumbotron
-// --------------------------------------------------
-
-
 .jumbotron {
  padding: $jumbotron-padding ($jumbotron-padding / 2);
  margin-bottom: $jumbotron-padding;
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@ -1,7 +1,7 @@
+// Base class
 //
-// Labels
-// --------------------------------------------------
-
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.

 .label {
  display: inline-block;
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@ -1,8 +1,3 @@
-//
-// List groups
-// --------------------------------------------------
-
-
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
--- a/scss/_media.scss
+++ b/scss/_media.scss
@ -1,7 +1,3 @@
-//
-// Media
-// --------------------------------------------------
-
@if $enable-flex {
  .media {
    display: flex;
@ -47,7 +43,7 @@

 .media-object {
  display: block;
-  
+
  // Fix collapse in webkit from max-width: 100% and display: table-cell.
  &.img-thumbnail {
    max-width: none;
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@ -1,6 +1,3 @@
-// Mixins
-// --------------------------------------------------
-
 // Toggles
 //
 // Used in conjunction with global variables to enable certain theme features.
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@ -1,8 +1,3 @@
-//
-// Modals
-// --------------------------------------------------
-
-
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@ -1,6 +1,7 @@
+// Base class
 //
-// Navs
-// --------------------------------------------------
+// Kickstart any navigation component with a set of style resets. Works with
+// `<nav>`s or `<ul>`s.

 .nav {
  padding-left: 0;
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@ -1,8 +1,3 @@
-//
-// Navbars
-// --------------------------------------------------
-
-
 // Wrapper and base class
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
@ -10,8 +5,7 @@

 .navbar {
  position: relative;
-  padding: $spacer;
-  margin-bottom: $navbar-margin-bottom;
+  padding: $navbar-padding-vertical $navbar-padding-horizontal;
  @include clearfix;

  @include media-breakpoint-up(sm) {
@ -20,7 +14,6 @@
 }


-//
 // Navbar alignment options
 //
 // Display the navbar across the entirety of the page or fixed it to the top or
@ -71,20 +64,19 @@
 }


+//
 // Brand/project name
+//

 .navbar-brand {
  float: left;
-  padding: .625rem .75rem;
-  margin-right: $spacer;
-  margin-bottom: 0; // For headings
+  margin-right: 1rem;
+  padding-top:    .25rem;
+  padding-bottom: .25rem;
  font-size: $font-size-lg;
-  line-height: 1;

-  > a {
-    @include hover-focus {
-      text-decoration: none;
-    }
+  @include hover-focus {
+    text-decoration: none;
  }

  > img {
@ -93,19 +85,33 @@
 }


+.navbar-divider {
+  float: left;
+  width: 1px;
+  padding-top: .425rem;
+  padding-bottom: .425rem;
+  overflow: hidden;
+  margin-left:  $navbar-padding-horizontal;
+  margin-right: $navbar-padding-horizontal;
+
+  &:before {
+    content: '\00a0';
+  }
+}
+
+
 // Navbar toggle
 //
 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 // Bootstrap JavaScript plugin.

 .navbar-toggler {
-  padding: .55rem .75rem;
-  margin-right: $spacer;
-  margin-bottom: 0; // For headings
+  padding: .5rem .75rem;
  font-size: $font-size-lg;
  line-height: 1;
  background: none;
-  border: 0;
+  border: $border-width solid transparent;
+  @include border-radius($btn-border-radius);

  @include hover-focus {
    text-decoration: none;
@ -127,37 +133,9 @@
 }


-// Dropdown menus
-
-// Menu position and menu carets
-.navbar-nav > li > .dropdown-menu {
-  margin-top: 0;
-  @include border-top-radius(0);
-}
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  @include border-top-radius($navbar-border-radius);
-  @include border-bottom-radius(0);
-}
-
-
-// Small navbar
+// Navigation
 //
-// Condensed dimensions for an aesthetic closer to v3's navbar.
-
-.navbar-sm {
-  padding-top: 0;
-  padding-bottom: 0;
-
-  .navbar-brand {
-    padding-top: .95rem;
-    padding-bottom: .95rem;
-  }
-
-  .form-inline {
-    margin-top: .6rem;
-  }
-}
+// Custom navbar navigation built on the base `.nav` styles.

 .navbar-nav {
  .nav-item {
@ -166,138 +144,83 @@

  .nav-link {
    display: block;
-    padding-top: .95rem;
-    padding-bottom: .95rem;
-    line-height: 1.25; // Match the `.navbar-brand`
+    padding-top:    .425rem;
+    padding-bottom: .425rem;
+
+    + .nav-link {
+      margin-left: 1rem;
+    }
  }

-  .open > .nav-link,
-  .active > .nav-link,
-  .nav-link.open,
-  .nav-link.active {
-    @include plain-hover-focus {
-      color: $navbar-default-link-active-color;
-      cursor: default;
-      background-color: $navbar-default-link-active-bg;
-    }
+  .nav-item + .nav-item {
+    margin-left: 1rem;
  }
 }

-
-// Alternate navbars
-// --------------------------------------------------
-
-// todo: audit these styles
-
-// Default navbar
-.navbar-default {
-  background-color: $navbar-default-bg;
-  border-color: $navbar-default-border;
-
+// Dark links against a light background
+.navbar-light {
  .navbar-brand {
-    color: $navbar-default-brand-color;
+    color: $navbar-light-active-color;

    @include hover-focus {
-      color: $navbar-default-brand-hover-color;
-      background-color: $navbar-default-brand-hover-bg;
-    }
-  }
-}
-
-// Inverse navbar
-
-.navbar-inverse {
-  background-color: $navbar-inverse-bg;
-  border-color: $navbar-inverse-border;
-
-  .navbar-toggler,
-  .navbar-brand > a,
-  .nav-pills > .nav-item > .nav-link {
-    color: $navbar-inverse-link-color;
-
-    @include hover-focus {
-      color: $navbar-inverse-link-hover-color;
-    }
-  }
-  .nav-pills > .nav-item > .nav-link {
-    @include hover-focus {
-      color: $navbar-inverse-link-active-color;
-      background-color: $navbar-inverse-link-active-bg;
-    }
-  }
-  .nav-pills > .active > .nav-link,
-  .nav-pills > .nav-link.active {
-    color: $navbar-inverse-link-active-color;
-    background-color: $navbar-inverse-link-active-bg;
-  }
-
-  .navbar-brand {
-    color: $navbar-inverse-brand-color;
-    @include hover-focus {
-      color: $navbar-inverse-brand-hover-color;
-      background-color: $navbar-inverse-brand-hover-bg;
+      color: $navbar-light-active-color;
    }
  }

  .navbar-nav {
-    .navbar-link {
-      color: $navbar-inverse-link-color;
+    .nav-link {
+      color: $navbar-light-color;

      @include hover-focus {
-        color: $navbar-inverse-link-hover-color;
-        background-color: $navbar-inverse-link-hover-bg;
+        color: $navbar-light-hover-color;
      }
+    }

-      &.active > a {
-        @include plain-hover-focus {
-          color: $navbar-inverse-link-active-color;
-          background-color: $navbar-inverse-link-active-bg;
-        }
-      }
-
-      &.disabled > a {
-        @include plain-hover-focus {
-          color: $navbar-inverse-link-disabled-color;
-          background-color: $navbar-inverse-link-disabled-bg;
-        }
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-light-active-color;
      }
    }
  }

-  // .navbar-collapse,
-  // .navbar-form {
-  //   border-color: darken($navbar-inverse-bg, 7%);
-  // }
-  //
-  // // Dropdowns
-  // .navbar-nav {
-  //   > .open > a {
-  //     @include plain-hover-focus {
-  //       color: $navbar-inverse-link-active-color;
-  //       background-color: $navbar-inverse-link-active-bg;
-  //     }
-  //   }
-  // }
-
-  // .navbar-link {
-  //   color: $navbar-inverse-link-color;
-  //   @include hover {
-  //     color: $navbar-inverse-link-hover-color;
-  //   }
-  // }
-  //
-  // .btn-link {
-  //   color: $navbar-inverse-link-color;
-  //
-  //   @include hover-focus {
-  //     color: $navbar-inverse-link-hover-color;
-  //   }
-  //
-  //   &:disabled,
-  //   fieldset[disabled] & {
-  //     @include hover-focus {
-  //       color: $navbar-inverse-link-disabled-color;
-  //     }
-  //   }
-  // }
+  .navbar-divider {
+    background-color: rgba(0,0,0,.075);
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
+  .navbar-brand {
+    color: $navbar-dark-active-color;
+
+    @include hover-focus {
+      color: $navbar-dark-active-color;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-dark-color;
+
+      @include hover-focus {
+        color: $navbar-dark-hover-color;
+      }
+    }
+
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-dark-active-color;
+      }
+    }
+  }
+
+  .navbar-divider {
+    background-color: rgba(255,255,255,.075);
+  }
 }
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@ -1,8 +1,3 @@
-//
-// Pager pagination
-// --------------------------------------------------
-
-
 .pager {
  padding-left: 0;
  margin-top: $spacer-y;
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@ -1,8 +1,3 @@
-//
-// Pagination (multiple pages)
-// --------------------------------------------------
-
-
 .pagination {
  display: inline-block;
  padding-left: 0;
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@ -1,8 +1,3 @@
-//
-// Popovers
-// --------------------------------------------------
-
-
 .popover {
  position: absolute;
  top: 0;
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@ -1,8 +1,3 @@
-//
-// Progress bars
-// --------------------------------------------------
-
-
 //
 // Progress animations
 //
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@ -1,7 +1,3 @@
-//
-// Responsive embed
-// --------------------------------------------------
-
 // Credit: Nicolas Gallagher and SUIT CSS.

 .embed-responsive {
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@ -1,10 +1,5 @@
 //
-// Custom tables
-// --------------------------------------------------
-
-
-//
-// Basic tables
+// Basic Bootstrap table
 //

 .table {
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@ -1,8 +1,3 @@
-//
-// Tooltips
-// --------------------------------------------------
-
-
 // Base class
 .tooltip {
  position: absolute;
--- a/scss/_type.scss
+++ b/scss/_type.scss
@ -1,8 +1,3 @@
-//
-// Typography
-// --------------------------------------------------
-
-
 //
 // Headings
 //
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@ -1,8 +1,3 @@
-//
-// Responsive: Utility classes
-// --------------------------------------------------
-
-
 //
 // Mixins
 //
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@ -1,8 +1,3 @@
-//
-// Utility classes
-// --------------------------------------------------
-
-
 //
 // Floats
 //
@ -122,11 +117,15 @@

 // Inverse
 // Todo: redo this as a proper class
-.inverse {
+.bg-inverse {
  color: $gray-lighter;
  background-color: $gray-dark;
 }

+.bg-faded {
+  background-color: $gray-lightest;
+}
+
@include bg-variant('.bg-primary', $brand-primary);

@include bg-variant('.bg-success', $brand-success);
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -135,8 +135,8 @@ $font-size-lg:               1.25rem !default;
 $font-size-sm:               .85rem !default;
 $font-size-xs:               .75rem !default;

-$font-size-h1:               2.75rem !default;
-$font-size-h2:               2.25rem !default;
+$font-size-h1:               2.5rem !default;
+$font-size-h2:               2rem !default;
 $font-size-h3:               1.75rem !default;
 $font-size-h4:               1.5rem !default;
 $font-size-h5:               1.25rem !default;
@ -213,7 +213,7 @@ $table-border-color:            $gray-lighter !default;
 // For each of Bootstrap's buttons, define text, background and border color.

 $btn-padding-x:                  1rem;
-$btn-padding-y:                  .5rem;
+$btn-padding-y:                  .375rem;
 $btn-font-weight:                normal !default;

 $btn-primary-color:              #fff !default;
@ -243,9 +243,9 @@ $btn-danger-border:              $btn-danger-bg !default;
 $btn-link-disabled-color:        $gray-light !default;

 $btn-padding-x-sm:               .75rem !default;
-$btn-padding-y-sm:               .275rem !default;
+$btn-padding-y-sm:               .25rem !default;

-$btn-padding-x-lg:               1.5rem !default;
+$btn-padding-x-lg:               1.25rem !default;
 $btn-padding-y-lg:               .75rem !default;

 // Allows for customizing button radius independently from global border radius
@ -257,7 +257,7 @@ $btn-border-radius-sm:           $border-radius-sm;
 // Forms

 $input-padding-x:                .75rem !default;
-$input-padding-y:                .5rem !default;
+$input-padding-y:                .375rem !default;

 $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
@ -278,7 +278,7 @@ $input-color-placeholder:        #999 !default;
 $input-padding-x-sm:             .75rem !default;
 $input-padding-y-sm:             .275rem !default;

-$input-padding-x-lg:             1.5rem !default;
+$input-padding-x-lg:             1.25rem !default;
 $input-padding-y-lg:             .75rem !default;

 $input-height:                   (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
@ -336,61 +336,25 @@ $zindex-modal:             1050 !default;


 // Navbar
-//
-//

-// Basics of a navbar
-$navbar-margin-bottom:             $spacer-y !default;
-$navbar-border-radius:             $border-radius !default;
-$navbar-padding-horizontal:        $spacer !default;
-$navbar-padding-vertical:          ($spacer / 2) !default;
+$navbar-border-radius:              $border-radius !default;
+$navbar-padding-horizontal:         $spacer !default;
+$navbar-padding-vertical:           ($spacer / 2) !default;

-$navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-dark-color:                 rgba(255,255,255,.5);
+$navbar-dark-hover-color:           rgba(255,255,255,.75);
+$navbar-dark-active-color:          rgba(255,255,255,1);
+$navbar-dark-disabled-color:        rgba(255,255,255,.25);

-$navbar-default-link-color:                #777 !default;
-$navbar-default-link-hover-color:          #333 !default;
-$navbar-default-link-hover-bg:             transparent !default;
-$navbar-default-link-active-color:         #555 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
-$navbar-default-link-disabled-color:       #ccc !default;
-$navbar-default-link-disabled-bg:          transparent !default;
-
-$navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
-$navbar-default-brand-hover-bg:            transparent !default;
-
-$navbar-default-toggle-hover-bg:           #ddd !default;
-$navbar-default-toggle-icon-bar-bg:        #888 !default;
-$navbar-default-toggle-border-color:       #ddd !default;
-
-
-// Inverted navbar
-$navbar-inverse-color:                      lighten($gray-light, 12%) !default;
-$navbar-inverse-bg:                         #373a3c !default;
-$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
-
-$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
-$navbar-inverse-link-hover-color:           #fff !default;
-$navbar-inverse-link-hover-bg:              transparent !default;
-$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
-$navbar-inverse-link-disabled-color:        #444 !default;
-$navbar-inverse-link-disabled-bg:           transparent !default;
-
-$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
-$navbar-inverse-brand-hover-color:          #fff !default;
-$navbar-inverse-brand-hover-bg:             transparent !default;
-
-$navbar-inverse-toggle-hover-bg:            #333 !default;
-$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
-$navbar-inverse-toggle-border-color:        #333 !default;
+$navbar-light-color:                rgba(0,0,0,.3);
+$navbar-light-hover-color:          rgba(0,0,0,.6);
+$navbar-light-active-color:         rgba(0,0,0,.8);
+$navbar-light-disabled-color:       rgba(0,0,0,.15);


 // Navs

-$nav-link-padding:                          .75em 1em !default;
+$nav-link-padding:                          .5em 1em !default;
 $nav-link-hover-bg:                         $gray-lighter !default;

 $nav-disabled-link-color:                   $gray-light !default;
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@ -52,7 +52,7 @@
@mixin button-outline-variant($color) {
  color: $color;
  background-image: none;
-  background-color: $body-bg;
+  background-color: transparent;
  border-color: $color;

  &:focus,