diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 2b0b837bed..7d0656d4b3 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -265,10 +265,10 @@ Mix and match with other components and utilities as needed.
 
 ## Color schemes
 
-Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
+Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities.
 
 <div class="bd-example">
-  <nav class="navbar navbar-dark navbar-toggleable-md bg-inverse">
+  <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse">
     <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button>
     <a class="navbar-brand" href="#">Navbar</a>
 
@@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
     </div>
   </nav>
 
-  <nav class="navbar navbar-dark navbar-toggleable-md bg-primary">
+  <nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
     <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"></button>
     <a class="navbar-brand" href="#">Navbar</a>
 
@@ -348,11 +348,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 </div>
 
 {% highlight html %}
-<nav class="navbar navbar-dark bg-inverse">
+<nav class="navbar navbar-inverse bg-inverse">
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-dark bg-primary">
+<nav class="navbar navbar-inverse bg-primary">
   <!-- Navbar content -->
 </nav>
 
@@ -478,7 +478,7 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
       <span class="text-muted">Toggleable via the navbar brand.</span>
     </div>
   </div>
-  <nav class="navbar navbar-dark bg-inverse">
+  <nav class="navbar navbar-inverse bg-inverse">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button>
   </nav>
 </div>
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 237c2e9806..217ee5877c 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -38,7 +38,7 @@
         </div>
       </div>
     </div>
-    <div class="navbar navbar-dark bg-inverse navbar-toggleable-sm">
+    <div class="navbar navbar-inverse bg-inverse navbar-toggleable-sm">
       <div class="container flex-items-between">
         <a href="#" class="navbar-brand">Album</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index fbfe015310..f591235368 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Carousel</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 9abbcf19d5..96133e61ab 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
       <div class="collapse navbar-toggleable-sm" id="navbar">
         <a class="navbar-brand" href="#">Project name</a>
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
index 27572dbfe5..f926b71f3a 100644
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">
diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css
index fdec2a4334..2f6de026e8 100644
--- a/docs/examples/justified-nav/justified-nav.css
+++ b/docs/examples/justified-nav/justified-nav.css
@@ -20,17 +20,26 @@ body {
 }
 
 .navbar {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee));
+  background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%);
+  background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%);
   background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
   border: 1px solid #e5e5e5;
 }
 
 @media (min-width: 768px) {
   .navbar-nav {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
   }
 
   .navbar-nav .nav-item {
-    flex: 1 0 auto;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
   }
 }
 
diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html
index 6f2964720e..c38aaef1b1 100644
--- a/docs/examples/navbar-top-fixed/index.html
+++ b/docs/examples/navbar-top-fixed/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
index e685523856..04c03ac218 100644
--- a/docs/examples/navbar-top/index.html
+++ b/docs/examples/navbar-top/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark navbar-toggleable-md bg-inverse mb-3">
+    <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html
index fcef38de23..934c2cd033 100644
--- a/docs/examples/navbars/index.html
+++ b/docs/examples/navbars/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Navbar</a>
 
@@ -51,7 +51,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <div class="container">
         <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a class="navbar-brand" href="#">Container</a>
@@ -84,7 +84,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
 
       <div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index f43e0e5d5e..53f2db1602 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <div class="container">
         <a class="navbar-brand" href="#">Project name</a>
         <ul class="nav navbar-nav">
diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html
index cb45245aab..fe6dfc0691 100644
--- a/docs/examples/starter-template/index.html
+++ b/docs/examples/starter-template/index.html
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">
diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html
index a78be094d0..bc2708a505 100644
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@@ -21,7 +21,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 7a18c41f59..49ac071789 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -177,26 +177,26 @@
 }
 
 // White links against a dark background
-.navbar-dark {
+.navbar-inverse {
   .navbar-brand,
   .navbar-toggler {
-    color: $navbar-dark-active-color;
+    color: $navbar-inverse-active-color;
 
     @include hover-focus {
-      color: $navbar-dark-active-color;
+      color: $navbar-inverse-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-dark-color;
+      color: $navbar-inverse-color;
 
       @include hover-focus {
-        color: $navbar-dark-hover-color;
+        color: $navbar-inverse-hover-color;
       }
 
       &.disabled {
-        color: $navbar-dark-disabled-color;
+        color: $navbar-inverse-disabled-color;
       }
     }
 
@@ -205,14 +205,14 @@
     .nav-link.open,
     .nav-link.active {
       @include plain-hover-focus {
-        color: $navbar-dark-active-color;
+        color: $navbar-inverse-active-color;
       }
     }
   }
 
   .navbar-toggler {
-    background-image: $navbar-dark-toggler-bg;
-    border-color: $navbar-dark-toggler-border;
+    background-image: $navbar-inverse-toggler-bg;
+    border-color: $navbar-inverse-toggler-border;
   }
 
   .navbar-divider {
@@ -220,7 +220,7 @@
   }
 
   .navbar-text {
-    color: $navbar-dark-color;
+    color: $navbar-inverse-color;
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2889d6d493..8fd3818619 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -596,12 +596,12 @@ $navbar-toggler-padding-y:           .5rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !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;
-$navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
-$navbar-dark-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-dark-toggler-border:        rgba(255,255,255,.1) !default;
+$navbar-inverse-color:                 rgba(255,255,255,.5) !default;
+$navbar-inverse-hover-color:           rgba(255,255,255,.75) !default;
+$navbar-inverse-active-color:          rgba(255,255,255,1) !default;
+$navbar-inverse-disabled-color:        rgba(255,255,255,.25) !default;
+$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-inverse-toggler-border:        rgba(255,255,255,.1) !default;
 
 $navbar-light-color:                rgba(0,0,0,.5) !default;
 $navbar-light-hover-color:          rgba(0,0,0,.7) !default;
