Merge branch 'v4-dev' into v4-navbars

diff --cc docs/components/navbar.md
index ea5a361063ce6c2de851b5809e07ff151126c975,49ca8533dc45a80c29eee34c7d79a54912e531ca..097ce308a7ed7336d12a96a678a036e0fb1d2cc9
--- 1/docs/components/navbar.md
--- 2/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@@ -64,9 -64,8 +65,9 @@@ The `.navbar-brand` can be applied to m
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  
 +<!-- As a heading -->
  <nav class="navbar navbar-light bg-faded">
-   <h1 class="navbar-brand m-b-0">Navbar</h1>
+   <h1 class="navbar-brand mb-0">Navbar</h1>
  </nav>
  
  {% endexample %}
@@@ -271,25 -242,9 +272,9 @@@ Our collapse plugin allows you to use 
  
  {% example html %}
  <nav class="navbar navbar-light bg-faded">
-   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
-     &#9776;
-   </button>
+   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse" id="exCollapsingNavbar">
-     <div class="bg-inverse text-muted p-a-1">
-       <h4>Collapsed content</h4>
-       <span class="text-muted">Toggleable via the navbar brand.</span>
-     </div>
-   </div>
- </nav>
- {% endexample %}
- 
- {% example html %}
- <nav class="navbar navbar-dark bg-inverse">
-   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbarDark" aria-controls="exCollapsingNavbarDark" aria-expanded="false" aria-label="Toggle navigation">
-     &#9776;
-   </button>
-   <div class="collapse" id="exCollapsingNavbarDark">
-     <div class="bg-inverse text-muted p-a-1">
 -    <div class="bg-inverse p-1">
++    <div class="bg-inverse text-muted p-1">
        <h4>Collapsed content</h4>
        <span class="text-muted">Toggleable via the navbar brand.</span>
      </div>

diff --cc scss/_navbar.scss
index 9d3db1b263c109f57539a114e58a392357479e3e,c91e830bdd043610d46684ea6d56417c48bfcba0..cdc21e78ca5ec351e15757bd73d9e1b9a8378aec
--- 1/scss/_navbar.scss
--- 2/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@@ -105,12 -105,15 +105,15 @@@
  // Bootstrap JavaScript plugin.
  
  .navbar-toggler {
 -  padding: .5rem .75rem;
 -  font-size: $font-size-lg;
+   width: 2.5em;
+   height: 2em;
 +  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
 +  font-size: $navbar-toggler-font-size;
    line-height: 1;
-   background: none;
+   background: transparent no-repeat center center;
+   background-size: 24px 24px;
    border: $border-width solid transparent;
 -  @include border-radius($btn-border-radius);
 +  @include border-radius($navbar-toggler-border-radius);
  
    @include hover-focus {
      text-decoration: none;

diff --cc scss/_variables.scss
index 2dcfe8b880e8820b74835af30a5fbeee41627f7f,c1bcbdc2c0eae52274971b8ce9b5722b9d809921..e8a18790b7a0460da7572f52b89d54f69d334697
--- 1/scss/_variables.scss
--- 2/scss/_variables.scss
+++ b/scss/_variables.scss
@@@ -477,14 -495,8 +495,16 @@@ $zindex-modal:             1050 !defaul
  $navbar-border-radius:              $border-radius !default;
  $navbar-padding-x:                  $spacer !default;
  $navbar-padding-y:                  ($spacer / 2) !default;
 +
  $navbar-brand-padding-y:            .25rem !default;
  
 +$navbar-divider-padding-y:          .425rem !default;
 +
 +$navbar-toggler-font-size:           $font-size-lg !default;
 +$navbar-toggler-border-radius:       $btn-border-radius !default;
++$navbar-toggler-padding-x:           .75rem !default;
++$navbar-toggler-padding-y:           .5rem !default;
 +
  $navbar-dark-color:                 rgba(255,255,255,.5) !default;
  $navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
  $navbar-dark-active-color:          rgba(255,255,255,1) !default;