collapsing navbar tools

dist/css/bootstrap.css

@@ -3201,7 +3201,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 }
 
 .navbar-toggler {
-  float: left;
   padding: .55rem .75rem;
   margin-right: 1rem;
   margin-bottom: 0;
@@ -3214,6 +3213,17 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   text-decoration: none;
 }
 
+@media (min-width: 34em) {
+  .navbar-toggleable-xs {
+    display: block !important;
+  }
+}
+@media (min-width: 48em) {
+  .navbar-toggleable-sm {
+    display: block !important;
+  }
+}
+
 .navbar-form {
   padding: 10px 1rem;
   margin-right: -1rem;

docs/_includes/nav-docs.html

@@ -12,7 +12,7 @@
     <ul class="dropdown-menu bs-docs-search-results" id="search-results"></ul>
   </form>
 
-  <nav class="bs-docs-links collapse hidden-xs-down" id="docsNavbarContent">
+  <nav class="bs-docs-links collapse navbar-toggleable-xs" id="docsNavbarContent">
     {% for group in site.data.nav %}
       {% assign link = group.pages | first %}
       {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}

docs/assets/scss/docs.scss

@@ -1012,7 +1012,7 @@ body {
   @include media-breakpoint-up(sm) {
     margin-left: 0;
     margin-right: 0;
-    margin-bottom: -1rem;
+    margin-bottom: 0;
     padding: 1.5rem;
     border-width: .2rem;
   }
@@ -1276,7 +1276,7 @@ body {
 
 .highlight {
   padding: 1rem;
-  margin: 1rem -1rem;
+  margin: 0 -1rem 1rem;
   background-color: #f7f7f9;
 
   @include media-breakpoint-up(sm) {

docs/components/navbar.md

@@ -155,15 +155,31 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
 {% example html %}
-<div class="collapse" id="navbar-header">
+<div class="collapse" id="exCollapsingNavbar">
   <div class="inverse p-a">
-    <h3>Collapsed content</h3>
+    <h4>Collapsed content</h4>
     <p>Toggleable via the navbar brand.</p>
   </div>
 </div>
 <nav class="navbar navbar-default">
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
     &#9776;
   </button>
 </nav>
 {% endexample %}
+
+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">
+  <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>
+  </div>
+</nav>
+{% endexample %}
+
+

docs/dist/css/bootstrap.css

@@ -3201,7 +3201,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 }
 
 .navbar-toggler {
-  float: left;
   padding: .55rem .75rem;
   margin-right: 1rem;
   margin-bottom: 0;
@@ -3214,6 +3213,17 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   text-decoration: none;
 }
 
+@media (min-width: 34em) {
+  .navbar-toggleable-xs {
+    display: block !important;
+  }
+}
+@media (min-width: 48em) {
+  .navbar-toggleable-sm {
+    display: block !important;
+  }
+}
+
 .navbar-form {
   padding: 10px 1rem;
   margin-right: -1rem;

scss/_navbar.scss

@@ -99,7 +99,6 @@
 // JavaScript plugin.
 
 .navbar-toggler {
-  float: left;
   padding: .55rem .75rem;
   margin-right: $spacer;
   margin-bottom: 0; // For headings
@@ -113,6 +112,20 @@
   }
 }
 
+// Custom override for
+.navbar-toggleable {
+  &-xs {
+    @include media-breakpoint-up(sm) {
+      display: block !important;
+    }
+  }
+  &-sm {
+    @include media-breakpoint-up(md) {
+      display: block !important;
+    }
+  }
+}
+
 
 // Navbar form
 //