From 36e482ed2728eec37188b5ec486283334bb3034f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Jun 2017 18:29:43 -0700
Subject: [PATCH] update navbars to rename .navbar-inverse to .navbar-dark,
 update all navbar examples and variables

---
 _includes/docs-navbar.html                    |  2 +-
 docs/4.0/components/navbar.md                 | 60 +++++++++----------
 docs/4.0/components/scrollspy.md              |  8 +--
 docs/4.0/examples/album/index.html            |  2 +-
 docs/4.0/examples/carousel/index.html         |  2 +-
 docs/4.0/examples/dashboard/index.html        |  2 +-
 docs/4.0/examples/jumbotron/index.html        |  2 +-
 docs/4.0/examples/justified-nav/index.html    |  2 +-
 docs/4.0/examples/navbar-top-fixed/index.html |  2 +-
 docs/4.0/examples/navbar-top/index.html       |  2 +-
 docs/4.0/examples/navbars/index.html          | 20 +++----
 docs/4.0/examples/offcanvas/index.html        |  2 +-
 docs/4.0/examples/starter-template/index.html |  2 +-
 .../examples/sticky-footer-navbar/index.html  |  2 +-
 docs/4.0/migration.md                         |  2 +-
 js/tests/visual/dropdown.html                 |  2 +-
 js/tests/visual/modal.html                    |  2 +-
 js/tests/visual/scrollspy.html                |  2 +-
 scss/_navbar.scss                             | 22 +++----
 scss/_variables.scss                          | 12 ++--
 20 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html
index 71db111d8a..79742a4a2a 100644
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar">
+<header class="navbar navbar-dark flex-column flex-md-row bd-navbar">
   <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
     {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
   </a>
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md
index 07c86c938c..350e970dab 100644
--- a/docs/4.0/components/navbar.md
+++ b/docs/4.0/components/navbar.md
@@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -64,12 +64,12 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 
 {% example html %}
 <!-- As a link -->
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
 </nav>
 
 <!-- As a heading -->
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <span class="h1" class="navbar-brand mb-0">Navbar</span>
 </nav>
 {% endexample %}
@@ -78,7 +78,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 
 {% example html %}
 <!-- Just an image -->
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
     <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
   </a>
@@ -87,7 +87,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 
 {% example html %}
 <!-- Image and text -->
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
     <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
     Bootstrap
@@ -102,7 +102,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
 Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -129,7 +129,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -148,7 +148,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -184,7 +184,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
 Place various form controls and components within a navbar with `.form-inline`.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
@@ -195,7 +195,7 @@ Place various form controls and components within a navbar with `.form-inline`.
 Align the contents of your inline forms with utilities as needed.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded justify-content-between">
+<nav class="navbar navbar-light bg-light justify-content-between">
   <a class="navbar-brand">Navbar</a>
   <form class="form-inline">
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
@@ -207,7 +207,7 @@ Align the contents of your inline forms with utilities as needed.
 Input groups work, too:
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">@</span>
@@ -220,7 +220,7 @@ Input groups work, too:
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <button class="btn btn-outline-success" type="button">Main button</button>
     <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
@@ -233,7 +233,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <span class="navbar-text">
     Navbar text with an inline element
   </span>
@@ -243,7 +243,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 Mix and match with other components and utilities as needed.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar w/ text</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -269,10 +269,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. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` 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. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
 
 <div class="bd-example">
-  <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -300,7 +300,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-inverse bg-primary">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -358,11 +358,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 </div>
 
 {% highlight html %}
-<nav class="navbar navbar-inverse bg-inverse">
+<nav class="navbar navbar-dark bg-dark">
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-inverse bg-primary">
+<nav class="navbar navbar-dark bg-primary">
   <!-- Navbar content -->
 </nav>
 
@@ -377,7 +377,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {% example html %}
 <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-light bg-faded">
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
@@ -386,7 +386,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
@@ -398,25 +398,25 @@ When the container is within your navbar, its horizontal padding is removed at b
 Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Full width</a>
 </nav>
 {% endexample %}
 
 {% example html %}
-<nav class="navbar fixed-top navbar-light bg-faded">
+<nav class="navbar fixed-top navbar-light bg-light">
   <a class="navbar-brand" href="#">Fixed top</a>
 </nav>
 {% endexample %}
 
 {% example html %}
-<nav class="navbar fixed-bottom navbar-light bg-faded">
+<nav class="navbar fixed-bottom navbar-light bg-light">
   <a class="navbar-brand" href="#">Fixed bottom</a>
 </nav>
 {% endexample %}
 
 {% example html %}
-<nav class="navbar sticky-top navbar-light bg-faded">
+<nav class="navbar sticky-top navbar-light bg-light">
   <a class="navbar-brand" href="#">Sticky top</a>
 </nav>
 {% endexample %}
@@ -434,7 +434,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
 With no `.navbar-brand` shown in lowest breakpoint:
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
@@ -462,7 +462,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
 With a brand name shown on the left and toggler on the right:
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -491,7 +491,7 @@ With a brand name shown on the left and toggler on the right:
 With a toggler on the left and brand name on the right:
 
 {% example html %}
-<nav class="navbar navbar-expand-lg navbar-light bg-faded">
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -524,12 +524,12 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
 {% example html %}
 <div class="pos-f-t">
   <div class="collapse" id="navbarToggleExternalContent">
-    <div class="bg-inverse p-4">
+    <div class="bg-dark p-4">
       <h4 class="text-white">Collapsed content</h4>
       <span class="text-muted">Toggleable via the navbar brand.</span>
     </div>
   </div>
-  <nav class="navbar navbar-inverse bg-inverse">
+  <nav class="navbar navbar-dark bg-dark">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md
index ca9dcec5a2..9e09fd7612 100644
--- a/docs/4.0/components/scrollspy.md
+++ b/docs/4.0/components/scrollspy.md
@@ -22,7 +22,7 @@ When successfully implemented, your nav or list group will update accordingly, m
 Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
 
 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-light bg-faded">
+  <nav id="navbar-example2" class="navbar navbar-light bg-light">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav nav-pills">
       <li class="nav-item">
@@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
 </div>
 
 {% highlight html %}
-<nav id="navbar-example2" class="navbar navbar-light bg-faded">
+<nav id="navbar-example2" class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav nav-pills">
     <li class="nav-item">
@@ -100,7 +100,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 <div class="bd-example">
   <div class="row">
     <div class="col-4">
-      <nav id="navbar-example3" class="navbar navbar-light bg-faded flex-column">
+      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
         <a class="navbar-brand" href="#">Navbar</a>
         <nav class="nav nav-pills flex-column">
           <a class="nav-link" href="#item-1">Item 1</a>
@@ -139,7 +139,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 </div>
 
 {% highlight html %}
-<nav id="navbar-example3" class="navbar navbar-light bg-faded">
+<nav id="navbar-example3" class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <nav class="nav nav-pills flex-column">
     <a class="nav-link" href="#item-1">Item 1</a>
diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html
index f442be943d..7fc3cb64a9 100644
--- a/docs/4.0/examples/album/index.html
+++ b/docs/4.0/examples/album/index.html
@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-    <div class="navbar navbar-inverse bg-inverse">
+    <div class="navbar navbar-dark bg-dark">
       <div class="container d-flex justify-content-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">
diff --git a/docs/4.0/examples/carousel/index.html b/docs/4.0/examples/carousel/index.html
index 451b4c38f0..75a502fd93 100644
--- a/docs/4.0/examples/carousel/index.html
+++ b/docs/4.0/examples/carousel/index.html
@@ -17,7 +17,7 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">Carousel</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/dashboard/index.html b/docs/4.0/examples/dashboard/index.html
index e535f19d13..47841fe7f6 100644
--- a/docs/4.0/examples/dashboard/index.html
+++ b/docs/4.0/examples/dashboard/index.html
@@ -17,7 +17,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">Dashboard</a>
       <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/jumbotron/index.html b/docs/4.0/examples/jumbotron/index.html
index 15b449f78c..d1b747e988 100644
--- a/docs/4.0/examples/jumbotron/index.html
+++ b/docs/4.0/examples/jumbotron/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/justified-nav/index.html b/docs/4.0/examples/justified-nav/index.html
index 16ac2a10b9..43bb4534ab 100644
--- a/docs/4.0/examples/justified-nav/index.html
+++ b/docs/4.0/examples/justified-nav/index.html
@@ -23,7 +23,7 @@
       <div class="masthead">
         <h3 class="text-muted">Project name</h3>
 
-        <nav class="navbar navbar-expand-md navbar-light bg-faded rounded mb-3">
+        <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
diff --git a/docs/4.0/examples/navbar-top-fixed/index.html b/docs/4.0/examples/navbar-top-fixed/index.html
index f27b42dd8e..9a81499d0b 100644
--- a/docs/4.0/examples/navbar-top-fixed/index.html
+++ b/docs/4.0/examples/navbar-top-fixed/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/navbar-top/index.html b/docs/4.0/examples/navbar-top/index.html
index bdad691717..8e8957a21a 100644
--- a/docs/4.0/examples/navbar-top/index.html
+++ b/docs/4.0/examples/navbar-top/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-md navbar-inverse bg-inverse mb-4">
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
       <a class="navbar-brand" href="#">Top navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/navbars/index.html b/docs/4.0/examples/navbars/index.html
index 7b829a8b23..bf3f33cc00 100644
--- a/docs/4.0/examples/navbars/index.html
+++ b/docs/4.0/examples/navbars/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-inverse bg-inverse">
+    <nav class="navbar navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Never expand</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -50,7 +50,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Expand</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -82,7 +82,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-sm navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Expand at sm</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -114,7 +114,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-md navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Expand at md</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -146,7 +146,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Expand at lg</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -178,7 +178,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-xl navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Expand at xl</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -210,7 +210,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container">
         <a class="navbar-brand" href="#">Container</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
@@ -244,7 +244,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
@@ -273,7 +273,7 @@
     </nav>
 
     <div class="container">
-      <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -305,7 +305,7 @@
         </div>
       </nav>
 
-      <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html
index 89485ea620..bf5d0c7609 100644
--- a/docs/4.0/examples/offcanvas/index.html
+++ b/docs/4.0/examples/offcanvas/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse">
+    <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/starter-template/index.html b/docs/4.0/examples/starter-template/index.html
index d69f5a3973..edbcff5aad 100644
--- a/docs/4.0/examples/starter-template/index.html
+++ b/docs/4.0/examples/starter-template/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/examples/sticky-footer-navbar/index.html b/docs/4.0/examples/sticky-footer-navbar/index.html
index 4f5fe32ddf..e0899eae02 100644
--- a/docs/4.0/examples/sticky-footer-navbar/index.html
+++ b/docs/4.0/examples/sticky-footer-navbar/index.html
@@ -19,7 +19,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 225d54f7ca..b91205e85b 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -164,7 +164,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
 The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
 
 - Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
-- `.navbar-default` is now `.navbar-light`, though `.navbar-inverse` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`.
+- `.navbar-default` is now `.navbar-light`, though `.navbar-dark` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`.
 - Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/#color-schemes).
 - Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
 - `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index da0c1e4a67..5a5cc45f61 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -10,7 +10,7 @@
     <div class="container">
       <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
-      <nav class="navbar navbar-expand-md navbar-light bg-faded">
+      <nav class="navbar navbar-expand-md navbar-light bg-light">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 9350f4f062..0cf16c18b3 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -13,7 +13,7 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-full navbar-dark bg-inverse">
+    <nav class="navbar navbar-full navbar-dark bg-dark">
       <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
       <div class="collapse navbar-expand-md" id="navbarResponsive">
         <a class="navbar-brand" href="#">This shouldn't jump!</a>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index e305bcbdba..b3d4fb0b16 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -10,7 +10,7 @@
     </style>
   </head>
   <body data-spy="scroll" data-target=".navbar" data-offset="70">
-    <nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
+    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
       <a class="navbar-brand" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 7012460dd7..ab238e56b9 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -242,25 +242,25 @@
 }
 
 // White links against a dark background
-.navbar-inverse {
+.navbar-dark {
   .navbar-brand {
-    color: $navbar-inverse-active-color;
+    color: $navbar-dark-active-color;
 
     @include hover-focus {
-      color: $navbar-inverse-active-color;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-nav {
     .nav-link {
-      color: $navbar-inverse-color;
+      color: $navbar-dark-color;
 
       @include hover-focus {
-        color: $navbar-inverse-hover-color;
+        color: $navbar-dark-hover-color;
       }
 
       &.disabled {
-        color: $navbar-inverse-disabled-color;
+        color: $navbar-dark-disabled-color;
       }
     }
 
@@ -268,20 +268,20 @@
     .active > .nav-link,
     .nav-link.show,
     .nav-link.active {
-      color: $navbar-inverse-active-color;
+      color: $navbar-dark-active-color;
     }
   }
 
   .navbar-toggler {
-    color: $navbar-inverse-color;
-    border-color: $navbar-inverse-toggler-border-color;
+    color: $navbar-dark-color;
+    border-color: $navbar-dark-toggler-border-color;
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-inverse-toggler-icon-bg;
+    background-image: $navbar-dark-toggler-icon-bg;
   }
 
   .navbar-text {
-    color: $navbar-inverse-color;
+    color: $navbar-dark-color;
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 864e0c5306..af7404e98a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -600,12 +600,12 @@ $navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;
 
-$navbar-inverse-color:                 rgba($white,.5) !default;
-$navbar-inverse-hover-color:           rgba($white,.75) !default;
-$navbar-inverse-active-color:          rgba($white,1) !default;
-$navbar-inverse-disabled-color:        rgba($white,.25) !default;
-$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-inverse-toggler-border-color:  rgba($white,.1) !default;
+$navbar-dark-color:                 rgba($white,.5) !default;
+$navbar-dark-hover-color:           rgba($white,.75) !default;
+$navbar-dark-active-color:          rgba($white,1) !default;
+$navbar-dark-disabled-color:        rgba($white,.25) !default;
+$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  rgba($white,.1) !default;
 
 $navbar-light-color:                rgba($black,.5) !default;
 $navbar-light-hover-color:          rgba($black,.7) !default;
-- 
2.47.2