Clean up navbar to remove .navbar-toggle, .navbar-collapse, and .navbar-header as they are no longer used; Add .navbar-toggler to .navbar-inverse

dist/css/bootstrap.css

@@ -3120,73 +3120,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     border-radius: .25rem;
   }
 }
-@media (min-width: 48em) {
-  .navbar-header {
-    float: left;
-  }
-}
-.navbar-collapse {
-  padding-right: .75rem;
-  padding-left: .75rem;
-  overflow-x: visible;
-  -webkit-overflow-scrolling: touch;
-  border-top: 1px solid transparent;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-}
-.navbar-collapse.in {
-  overflow-y: auto;
-}
-@media (min-width: 48em) {
-  .navbar-collapse {
-    width: auto;
-    border-top: 0;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-  }
-  .navbar-collapse.collapse {
-    display: block !important;
-    height: auto !important;
-    padding-bottom: 0;
-    overflow: visible !important;
-    visibility: visible !important;
-  }
-  .navbar-collapse.in {
-    overflow-y: visible;
-  }
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-static-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-.navbar-fixed-top .navbar-collapse,
-.navbar-fixed-bottom .navbar-collapse {
-  max-height: 340px;
-}
-@media (max-device-width: 480px) and (orientation: landscape) {
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    max-height: 200px;
-  }
-}
-.container > .navbar-header,
-.container-fluid > .navbar-header,
-.container > .navbar-collapse,
-.container-fluid > .navbar-collapse {
-  margin-right: -.75rem;
-  margin-left: -.75rem;
-}
-@media (min-width: 48em) {
-  .container > .navbar-header,
-  .container-fluid > .navbar-header,
-  .container > .navbar-collapse,
-  .container-fluid > .navbar-collapse {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
 .navbar-static-top {
   z-index: 1000;
   border-width: 0 0 1px;
@@ -3256,35 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-toggler:focus {
   text-decoration: none;
 }
-.navbar-toggle {
-  position: relative;
-  float: right;
-  padding: 9px 10px;
-  margin-top: 8px;
-  margin-right: .75rem;
-  margin-bottom: 8px;
-  background-color: transparent;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: .25rem;
-}
-.navbar-toggle:focus {
-  outline: 0;
-}
-.navbar-toggle .icon-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px;
-}
-.navbar-toggle .icon-bar + .icon-bar {
-  margin-top: 4px;
-}
-@media (min-width: 48em) {
-  .navbar-toggle {
-    display: none;
-  }
-}
 .navbar-nav {
   margin: 6.5px -.75rem;
 }
@@ -3556,12 +3460,15 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: #373a3c;
   border-color: #1f2021;
 }
+.navbar-inverse .navbar-toggler,
 .navbar-inverse .navbar-brand > a,
 .navbar-inverse .nav-pills > .nav-item > .nav-link {
   color: #aab0b5;
 }
+.navbar-inverse .navbar-toggler:hover,
 .navbar-inverse .navbar-brand > a:hover,
 .navbar-inverse .nav-pills > .nav-item > .nav-link:hover,
+.navbar-inverse .navbar-toggler:focus,
 .navbar-inverse .navbar-brand > a:focus,
 .navbar-inverse .nav-pills > .nav-item > .nav-link:focus {
   color: #fff;
@@ -5163,10 +5070,6 @@ button.close {
 .nav:after,
 .navbar:before,
 .navbar:after,
-.navbar-header:before,
-.navbar-header:after,
-.navbar-collapse:before,
-.navbar-collapse:after,
 .pager:before,
 .pager:after,
 .modal-footer:before,
@@ -5184,8 +5087,6 @@ button.close {
 .btn-group-vertical > .btn-group:after,
 .nav:after,
 .navbar:after,
-.navbar-header:after,
-.navbar-collapse:after,
 .pager:after,
 .modal-footer:after {
   clear: both;

docs/dist/css/bootstrap.css

@@ -3120,73 +3120,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     border-radius: .25rem;
   }
 }
-@media (min-width: 48em) {
-  .navbar-header {
-    float: left;
-  }
-}
-.navbar-collapse {
-  padding-right: .75rem;
-  padding-left: .75rem;
-  overflow-x: visible;
-  -webkit-overflow-scrolling: touch;
-  border-top: 1px solid transparent;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-}
-.navbar-collapse.in {
-  overflow-y: auto;
-}
-@media (min-width: 48em) {
-  .navbar-collapse {
-    width: auto;
-    border-top: 0;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-  }
-  .navbar-collapse.collapse {
-    display: block !important;
-    height: auto !important;
-    padding-bottom: 0;
-    overflow: visible !important;
-    visibility: visible !important;
-  }
-  .navbar-collapse.in {
-    overflow-y: visible;
-  }
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-static-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-.navbar-fixed-top .navbar-collapse,
-.navbar-fixed-bottom .navbar-collapse {
-  max-height: 340px;
-}
-@media (max-device-width: 480px) and (orientation: landscape) {
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    max-height: 200px;
-  }
-}
-.container > .navbar-header,
-.container-fluid > .navbar-header,
-.container > .navbar-collapse,
-.container-fluid > .navbar-collapse {
-  margin-right: -.75rem;
-  margin-left: -.75rem;
-}
-@media (min-width: 48em) {
-  .container > .navbar-header,
-  .container-fluid > .navbar-header,
-  .container > .navbar-collapse,
-  .container-fluid > .navbar-collapse {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
 .navbar-static-top {
   z-index: 1000;
   border-width: 0 0 1px;
@@ -3256,35 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-toggler:focus {
   text-decoration: none;
 }
-.navbar-toggle {
-  position: relative;
-  float: right;
-  padding: 9px 10px;
-  margin-top: 8px;
-  margin-right: .75rem;
-  margin-bottom: 8px;
-  background-color: transparent;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: .25rem;
-}
-.navbar-toggle:focus {
-  outline: 0;
-}
-.navbar-toggle .icon-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px;
-}
-.navbar-toggle .icon-bar + .icon-bar {
-  margin-top: 4px;
-}
-@media (min-width: 48em) {
-  .navbar-toggle {
-    display: none;
-  }
-}
 .navbar-nav {
   margin: 6.5px -.75rem;
 }
@@ -3556,12 +3460,15 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: #373a3c;
   border-color: #1f2021;
 }
+.navbar-inverse .navbar-toggler,
 .navbar-inverse .navbar-brand > a,
 .navbar-inverse .nav-pills > .nav-item > .nav-link {
   color: #aab0b5;
 }
+.navbar-inverse .navbar-toggler:hover,
 .navbar-inverse .navbar-brand > a:hover,
 .navbar-inverse .nav-pills > .nav-item > .nav-link:hover,
+.navbar-inverse .navbar-toggler:focus,
 .navbar-inverse .navbar-brand > a:focus,
 .navbar-inverse .nav-pills > .nav-item > .nav-link:focus {
   color: #fff;
@@ -5163,10 +5070,6 @@ button.close {
 .nav:after,
 .navbar:before,
 .navbar:after,
-.navbar-header:before,
-.navbar-header:after,
-.navbar-collapse:before,
-.navbar-collapse:after,
 .pager:before,
 .pager:after,
 .modal-footer:before,
@@ -5184,8 +5087,6 @@ button.close {
 .btn-group-vertical > .btn-group:after,
 .nav:after,
 .navbar:after,
-.navbar-header:after,
-.navbar-collapse:after,
 .pager:after,
 .modal-footer:after {
   clear: both;

less/_navbar.less

@@ -24,102 +24,6 @@
 }
 
 
-// Navbar heading
-//
-// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
-// styling of responsive aspects.
-
-.navbar-header {
-  &:extend(.clearfix all);
-
-  @media (min-width: @grid-float-breakpoint) {
-    float: left;
-  }
-}
-
-
-// Navbar collapse (body)
-//
-// Group your navbar content into this for easy collapsing and expanding across
-// various device sizes. By default, this content is collapsed when <768px, but
-// will expand past that for a horizontal display.
-//
-// To start (on mobile devices) the navbar links, forms, and buttons are stacked
-// vertically and include a `max-height` to overflow in case you have too much
-// content for the user's viewport.
-
-.navbar-collapse {
-  overflow-x: visible;
-  padding-right: @navbar-padding-horizontal;
-  padding-left:  @navbar-padding-horizontal;
-  border-top: 1px solid transparent;
-  .box-shadow(inset 0 1px 0 rgba(255,255,255,.1));
-  &:extend(.clearfix all);
-  -webkit-overflow-scrolling: touch;
-
-  &.in {
-    overflow-y: auto;
-  }
-
-  @media (min-width: @grid-float-breakpoint) {
-    width: auto;
-    border-top: 0;
-    .box-shadow(none);
-
-    &.collapse {
-      display: block !important;
-      visibility: visible !important;
-      height: auto !important;
-      padding-bottom: 0; // Override default setting
-      overflow: visible !important;
-    }
-
-    &.in {
-      overflow-y: visible;
-    }
-
-    // Undo the collapse side padding for navbars with containers to ensure
-    // alignment of right-aligned contents.
-    .navbar-fixed-top &,
-    .navbar-static-top &,
-    .navbar-fixed-bottom & {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}
-
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  .navbar-collapse {
-    max-height: @navbar-collapse-max-height;
-
-    @media (max-device-width: 480px) and (orientation: landscape) {
-      max-height: 200px;
-    }
-  }
-}
-
-
-// Both navbar header and collapse
-//
-// When a container is present, change the behavior of the header and collapse.
-
-.container,
-.container-fluid {
-  > .navbar-header,
-  > .navbar-collapse {
-    margin-right: -@navbar-padding-horizontal;
-    margin-left:  -@navbar-padding-horizontal;
-
-    @media (min-width: @grid-float-breakpoint) {
-      margin-right: 0;
-      margin-left:  0;
-    }
-  }
-}
-
-
 //
 // Navbar alignment options
 //
@@ -190,7 +94,12 @@
 */
 }
 
-// New hotness
+
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
+
 .navbar-toggler {
   float: left;
   padding: .55rem .75rem;
@@ -208,47 +117,6 @@
 }
 
 
-
-// Navbar toggle
-//
-// Custom button for toggling the `.navbar-collapse`, powered by the collapse
-// JavaScript plugin.
-
-.navbar-toggle {
-  position: relative;
-  float: right;
-  margin-right: @navbar-padding-horizontal;
-  padding: 9px 10px;
-  .navbar-vertical-align(34px);
-  background-color: transparent;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid transparent;
-  .border-radius(@border-radius-base);
-
-  // We remove the `outline` here, but later compensate by attaching `:hover`
-  // styles to `:focus`.
-  &:focus {
-    outline: 0;
-  }
-
-  // Bars
-  .icon-bar {
-    display: block;
-    width: 22px;
-    height: 2px;
-    .border-radius(1px);
-  }
-  .icon-bar + .icon-bar {
-    margin-top: 4px;
-  }
-
-  @media (min-width: @grid-float-breakpoint) {
-    display: none;
-  }
-}
-
-
-
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make
@@ -553,6 +421,7 @@
   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;