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

_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

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>

docs/_includes/nav-home.html

-<header class="navbar navbar-sm navbar-defeault navbar-static-top bd-navbar" role="banner">
-  <div class="container-fluid">
-    <nav class="nav nav-inline">
+<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>
-  </div>
 </header>

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 %}

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.

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);
\ No newline at end of file
+!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")}();
\ No newline at end of file

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')
+})();

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;
 }

docs/assets/scss/_anchor.scss

-// //
-// // 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;
 }

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;
 

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,10 +294,12 @@
   .bg-info,
   .bg-warning,
   .bg-danger {
+    &:not(.navbar) {
       padding: .5rem;
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+  }
 }
 
 

docs/assets/scss/_layout.scss → docs/assets/scss/_content.scss

+//
+// 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
 //

docs/assets/scss/_featured-sites.scss

+.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;
+  }
+}

docs/assets/scss/_featurettes.scss

+.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;
+  }
+}

docs/assets/scss/_homepage.scss → docs/assets/scss/_masthead.scss

-//
-// 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%));
+  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;
@@ -120,108 +89,3 @@
     }
   }
 }
-
-
-//
-// 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;
-  }
-}

docs/assets/scss/_nav.scss

+//
+// 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;
+      }
+    }
+  }
+}

docs/assets/scss/_page-header.scss

-//
-// Page headers
-//
-
-// .bd-header {
-//   padding-top: 2rem;
-//   padding-bottom: 2rem;
-//   margin-bottom: 2rem;
-//   text-align: center;
-//   background-color: $bd-purple;
-
-//   .container {
-//     position: relative;
-//   }
-
-//   h1 {
-//     margin-top: 0;
-//     color: #fff;
-//   }
-
-//   p {
-//     margin-bottom: 0;
-//     font-weight: 300;
-//     color: rgba(255,255,255,.65);
-//   }
-
-//   @media (min-width: 768px) {
-//     text-align: left;
-
-//     h1 {
-//       font-size: 4rem;
-//       line-height: 1;
-//     }
-//   }
-
-//   @media (min-width: 992px) {
-//     padding-top: 4rem;
-//     padding-bottom: 4rem;
-
-//     h1,
-//     p {
-//       margin-right: 380px;
-//     }
-//   }
-// }
+.bd-pageheader {
+  padding: 2rem .75rem;
+  margin-bottom: 1.5rem;
+  color: $bd-purple-light;
+  text-align: center;
+  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;
+    margin-bottom: 3rem;
+    text-align: left;
+
+    .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/assets/scss/_social-buttons.scss

-//
-// 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;
-}

docs/assets/scss/_team.scss

-//
-// Team members
-//
-
 .bd-team {
   margin-bottom: 1.5rem;
 

docs/assets/scss/_zeroclipboard.scss

+// ZeroClipboard
 //
-// ZeroClipboard styles
-//
+// Flash-based `Copy` buttons for code snippets.
 
 .zero-clipboard {
   position: relative;

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";

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.

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 %}
 

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">

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">

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.

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);

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));
           }
         }
       }, {

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);

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.

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.

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
 

scss/_alert.scss

-//
-// Alerts
-// --------------------------------------------------
-
-
 //
 // Base styles
 //

scss/_animation.scss

-//
-// Component animations
-// --------------------------------------------------
-
 .fade {
   opacity: 0;
   transition: opacity .15s linear;

scss/_breadcrumb.scss

-//
-// Breadcrumbs
-// --------------------------------------------------
-
-
 .breadcrumb {
   padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
   margin-bottom: $spacer-y;

scss/_button-group.scss

-//
-// Button groups
-// --------------------------------------------------
-
-
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {

scss/_buttons.scss

-//
-// Buttons
-// --------------------------------------------------
-
-
 //
 // Base styles
 //

scss/_carousel.scss

-//
-// Carousel
-// --------------------------------------------------
-
-
 // Wrapper for the slide container and indicators
 .carousel {
   position: relative;

scss/_close.scss

-//
-// Close icons
-// --------------------------------------------------
-
-
 .close {
   float: right;
   font-size: ($font-size-base * 1.5);

scss/_code.scss

-//
-// Code (inline and block)
-// --------------------------------------------------
-
-
 // Inline and block code styles
 code,
 kbd,

scss/_custom-forms.scss

-//
-// Custom forms
-// --------------------------------------------------
-
-
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // http://useiconic.com/open

scss/_dropdown.scss

-//
-// Dropdown menus
-// --------------------------------------------------
-
-
 // The dropdown wrapper (div)
 .dropup,
 .dropdown {
@@ -48,14 +43,15 @@
   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 {
+// Dividers (basically an hr) within the dropdown
+.dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
-  }
+}
 
-  // Links within the dropdown menu
-  > li > a {
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
   display: block;
   padding: 3px 20px;
   clear: both;
@@ -63,33 +59,33 @@
   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 {
+  // 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 {
+  // Active state
+  &.active {
     @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 {
+  // Disabled state
+  //
+  // Gray out text and ensure the hover/focus state remains gray
+  &.disabled {
     @include plain-hover-focus {
       color: $dropdown-link-disabled-color;
     }
@@ -102,6 +98,7 @@
       background-image: none; // Remove CSS gradient
       @include reset-filter();
     }
+  }
 }
 
 // Open state for the dropdown

scss/_forms.scss

-//
-// 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;

scss/_grid.scss

-//
-// Grid system
-// --------------------------------------------------
-
-
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.

scss/_input-group.scss

-//
-// Input groups
-// --------------------------------------------------
-
-
 //
 // Base styles
 //

scss/_jumbotron.scss

-//
-// Jumbotron
-// --------------------------------------------------
-
-
 .jumbotron {
   padding: $jumbotron-padding ($jumbotron-padding / 2);
   margin-bottom: $jumbotron-padding;

scss/_labels.scss

+// Base class
 //
-// Labels
-// --------------------------------------------------
-
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
 
 .label {
   display: inline-block;

scss/_list-group.scss

-//
-// List groups
-// --------------------------------------------------
-
-
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.

scss/_media.scss

-//
-// Media
-// --------------------------------------------------
-
 @if $enable-flex {
   .media {
     display: flex;

scss/_mixins.scss

-// Mixins
-// --------------------------------------------------
-
 // Toggles
 //
 // Used in conjunction with global variables to enable certain theme features.

scss/_modal.scss

-//
-// Modals
-// --------------------------------------------------
-
-
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal

scss/_nav.scss

+// Base class
 //
-// Navs
-// --------------------------------------------------
+// Kickstart any navigation component with a set of style resets. Works with
+// `<nav>`s or `<ul>`s.
 
 .nav {
   padding-left: 0;

scss/_navbar.scss

-//
-// 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,21 +64,20 @@
 }
 
 
+//
 // 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;
   }
-  }
 
   > img {
     display: block;
@@ -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;
 
-  .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-link {
+      margin-left: 1rem;
     }
   }
-}
-
-
-// Alternate navbars
-// --------------------------------------------------
-
-// todo: audit these styles
 
-// Default navbar
-.navbar-default {
-  background-color: $navbar-default-bg;
-  border-color: $navbar-default-border;
+  .nav-item + .nav-item {
+    margin-left: 1rem;
+  }
+}
 
+// 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;
+      color: $navbar-light-active-color;
     }
   }
-}
-
-// 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;
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color;
 
       @include hover-focus {
-      color: $navbar-inverse-link-hover-color;
+        color: $navbar-light-hover-color;
       }
     }
-  .nav-pills > .nav-item > .nav-link {
-    @include hover-focus {
-      color: $navbar-inverse-link-active-color;
-      background-color: $navbar-inverse-link-active-bg;
+
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-light-active-color;
       }
     }
-  .nav-pills > .active > .nav-link,
-  .nav-pills > .nav-link.active {
-    color: $navbar-inverse-link-active-color;
-    background-color: $navbar-inverse-link-active-bg;
   }
 
+  .navbar-divider {
+    background-color: rgba(0,0,0,.075);
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
   .navbar-brand {
-    color: $navbar-inverse-brand-color;
+    color: $navbar-dark-active-color;
+
     @include hover-focus {
-      color: $navbar-inverse-brand-hover-color;
-      background-color: $navbar-inverse-brand-hover-bg;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-nav {
-    .navbar-link {
-      color: $navbar-inverse-link-color;
+    .nav-link {
+      color: $navbar-dark-color;
 
       @include hover-focus {
-        color: $navbar-inverse-link-hover-color;
-        background-color: $navbar-inverse-link-hover-bg;
+        color: $navbar-dark-hover-color;
+      }
     }
 
-      &.active > a {
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
       @include plain-hover-focus {
-          color: $navbar-inverse-link-active-color;
-          background-color: $navbar-inverse-link-active-bg;
+        color: $navbar-dark-active-color;
+      }
     }
   }
 
-      &.disabled > a {
-        @include plain-hover-focus {
-          color: $navbar-inverse-link-disabled-color;
-          background-color: $navbar-inverse-link-disabled-bg;
-        }
-      }
-    }
-  }
-
-  // .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(255,255,255,.075);
+  }
 }

scss/_pager.scss

-//
-// Pager pagination
-// --------------------------------------------------
-
-
 .pager {
   padding-left: 0;
   margin-top: $spacer-y;

scss/_pagination.scss

-//
-// Pagination (multiple pages)
-// --------------------------------------------------
-
-
 .pagination {
   display: inline-block;
   padding-left: 0;

scss/_popover.scss

-//
-// Popovers
-// --------------------------------------------------
-
-
 .popover {
   position: absolute;
   top: 0;

scss/_progress.scss

-//
-// Progress bars
-// --------------------------------------------------
-
-
 //
 // Progress animations
 //

scss/_responsive-embed.scss

-//
-// Responsive embed
-// --------------------------------------------------
-
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .embed-responsive {

scss/_tables.scss

 //
-// Custom tables
-// --------------------------------------------------
-
-
-//
-// Basic tables
+// Basic Bootstrap table
 //
 
 .table {

scss/_tooltip.scss

-//
-// Tooltips
-// --------------------------------------------------
-
-
 // Base class
 .tooltip {
   position: absolute;

scss/_type.scss

-//
-// Typography
-// --------------------------------------------------
-
-
 //
 // Headings
 //

scss/_utilities-responsive.scss

-//
-// Responsive: Utility classes
-// --------------------------------------------------
-
-
 //
 // Mixins
 //

scss/_utilities.scss

-//
-// 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);

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-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
-
-$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-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-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;

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,