Merge pull request #22836 from twbs/colors-redux

v4: Colors redux

7 files changed, 94 insertions, 145 deletions

diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md
index 3acfd2a79..ed63da952 100644
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@@ -11,18 +11,10 @@ toc: true
 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read this important alert message.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're not looking too good.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> Change a few things up and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert—check it out!
+</div>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -33,18 +25,10 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
-  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
-</div>
-<div class="alert alert-info" role="alert">
-  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
-</div>
-<div class="alert alert-warning" role="alert">
-  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
-</div>
-<div class="alert alert-danger" role="alert">
-  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-</div>
+{% for color in site.data.theme-colors %}
+<div class="alert alert-{{ color.name }}" role="alert">
+  This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>{% endfor %}
 {% endexample %}
 
 ### Additional content
diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md
index 764e5a1cb..e2d92b08b 100644
--- a/docs/4.0/components/badge.md
+++ b/docs/4.0/components/badge.md
@@ -11,21 +11,21 @@ toc: true
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
 
 <div class="bd-example">
-<div class="h1">Example heading <span class="badge badge-default">New</span></div>
-<div class="h2">Example heading <span class="badge badge-default">New</span></div>
-<div class="h3">Example heading <span class="badge badge-default">New</span></div>
-<div class="h4">Example heading <span class="badge badge-default">New</span></div>
-<div class="h5">Example heading <span class="badge badge-default">New</span></div>
-<div class="h6">Example heading <span class="badge badge-default">New</span></div>
+<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
+<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
 </div>
 
 {% highlight html %}
-<h1>Example heading <span class="badge badge-default">New</span></h1>
-<h2>Example heading <span class="badge badge-default">New</span></h2>
-<h3>Example heading <span class="badge badge-default">New</span></h3>
-<h4>Example heading <span class="badge badge-default">New</span></h4>
-<h5>Example heading <span class="badge badge-default">New</span></h5>
-<h6>Example heading <span class="badge badge-default">New</span></h6>
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
 {% endhighlight %}
 
 ## Contextual variations
@@ -33,12 +33,8 @@ Badges scale to match the size of the immediate parent element by using relative
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
 {% example html %}
-<span class="badge badge-default">Default</span>
-<span class="badge badge-primary">Primary</span>
-<span class="badge badge-success">Success</span>
-<span class="badge badge-info">Info</span>
-<span class="badge badge-warning">Warning</span>
-<span class="badge badge-danger">Danger</span>
+{% for color in site.data.theme-colors %}
+<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -49,12 +45,8 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
 {% example html %}
-<span class="badge badge-pill badge-default">Default</span>
-<span class="badge badge-pill badge-primary">Primary</span>
-<span class="badge badge-pill badge-success">Success</span>
-<span class="badge badge-pill badge-info">Info</span>
-<span class="badge badge-pill badge-warning">Warning</span>
-<span class="badge badge-pill badge-danger">Danger</span>
+{% for color in site.data.theme-colors %}
+<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
 {% endexample %}
 
 ## Links
@@ -62,10 +54,6 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
 Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
 
 {% example html %}
-<a href="#" class="badge badge-default">Default</a>
-<a href="#" class="badge badge-primary">Primary</a>
-<a href="#" class="badge badge-success">Success</a>
-<a href="#" class="badge badge-info">Info</a>
-<a href="#" class="badge badge-warning">Warning</a>
-<a href="#" class="badge badge-danger">Danger</a>
+{% for color in site.data.theme-colors %}
+<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
 {% endexample %}
diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md
index cfd243dad..cfddfe18d 100644
--- a/docs/4.0/components/buttons.md
+++ b/docs/4.0/components/buttons.md
@@ -9,28 +9,12 @@ toc: true
 
 ## Examples
 
-Bootstrap includes six predefined button styles, each serving its own semantic purpose.
+Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
 
 {% example html %}
-<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
-<button type="button" class="btn btn-primary">Primary</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 
-<!-- Secondary, outline button -->
-<button type="button" class="btn btn-secondary">Secondary</button>
-
-<!-- Indicates a successful or positive action -->
-<button type="button" class="btn btn-success">Success</button>
-
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
-<!-- Indicates a dangerous or potentially negative action -->
-<button type="button" class="btn btn-danger">Danger</button>
-
-<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
@@ -56,15 +40,10 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
 {% example html %}
-<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-success">Success</button>
-<button type="button" class="btn btn-outline-info">Info</button>
-<button type="button" class="btn btn-outline-warning">Warning</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>
+{% for color in site.data.theme-colors %}
+<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 {% endexample %}
 
-
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index bc20da88f..56c4442c9 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -52,7 +52,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
 Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
 
 {% example html %}
-<div class="card">
+<div class="card" style="width: 20rem;">
   <div class="card-body">
     <h4 class="card-title">Card title</h4>
     <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
@@ -68,7 +68,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 `.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
 
 {% example html %}
-<div class="card">
+<div class="card" style="width: 20rem;">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-body">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -81,7 +81,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 Create lists of content in a card with a flush list group.
 
 {% example html %}
-<div class="card">
+<div class="card" style="width: 20rem;">
   <ul class="list-group list-group-flush">
     <li class="list-group-item">Cras justo odio</li>
     <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 
 {% example html %}
 <div class="card">
-  <h3 class="card-header">Featured</h3>
+  <h4 class="card-header">Featured</h4>
   <div class="card-body">
     <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
   <div class="col-sm-6">
     <div class="card">
       <div class="card-body">
-        <h3 class="card-title">Special title treatment</h3>
+        <h4 class="card-title">Special title treatment</h4>
         <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
@@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 {% example html %}
 <div class="card w-75">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
 
 <div class="card w-50">
   <div class="card-body">
-    <h3 class="card-title">Card title</h3>
+    <h4 class="card-title">Card title</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Button</a>
   </div>
@@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 {% example html %}
 <div class="card" style="width: 20rem;">
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -349,10 +349,10 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 
 ### Image overlays
 
-Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below).
+Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-dark` (see below).
 
 {% example html %}
-<div class="card card-inverse">
+<div class="card card-dark">
   <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
   <div class="card-img-overlay">
     <h4 class="card-title">Card title</h4>
@@ -366,17 +366,17 @@ Turn an image into a card background and overlay your card's text. Depending on
 
 Cards include various options for customizing their backgrounds, borders, and color.
 
-### Inverted text
+### Dark cards
 
-By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it.
+By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-dark`. Then, specify a dark `background-color` and `border-color` to go with it.
 
-You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants).
+You can also use `.card-dark` with the [contextual backgrounds variants](#background-variants).
 
 {% example html %}
-<div class="card card-inverse" style="background-color: #333; border-color: #333;">
+<div class="card card-dark" style="background-color: #333; border-color: #333;">
   <div class="card-header">Header</div>
   <div class="card-body">
-    <h3 class="card-title">Special title treatment</h3>
+    <h4 class="card-title">Special title treatment</h4>
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
@@ -386,10 +386,10 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
 
 ### Background variants
 
-Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
+Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-dark`.**
 
 {% example html %}
-<div class="card card-inverse card-primary mb-3 text-center">
+<div class="card card-dark card-primary mb-3 text-center">
   <div class="card-body">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -397,7 +397,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-success mb-3 text-center">
+<div class="card card-dark card-success mb-3 text-center">
   <div class="card-body">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -405,7 +405,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-info mb-3 text-center">
+<div class="card card-dark card-info mb-3 text-center">
   <div class="card-body">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -413,7 +413,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-warning mb-3 text-center">
+<div class="card card-dark card-warning mb-3 text-center">
   <div class="card-body">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -421,7 +421,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-danger text-center">
+<div class="card card-dark card-danger text-center">
   <div class="card-body">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -666,7 +666,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
-  <div class="card card-inverse card-primary p-3 text-center">
+  <div class="card card-dark card-primary p-3 text-center">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
       <footer>
diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md
index 4e544ce18..66d76a77d 100644
--- a/docs/4.0/components/list-group.md
+++ b/docs/4.0/components/list-group.md
@@ -87,10 +87,9 @@ Use contextual classes to style list items with a stateful background and color.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">Dapibus ac facilisis in</li>
-  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
-  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
-  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
-  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+
+  {% for color in site.data.theme-colors %}
+  <li class="list-group-item list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</li>{% endfor %}
 </ul>
 {% endexample %}
 
@@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 {% example html %}
 <div class="list-group">
   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
+
+  {% for color in site.data.theme-colors %}
+  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</a>{% endfor %}
 </div>
 {% endexample %}
 
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md
index 07c86c938..350e970da 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 ca9dcec5a..9e09fd761 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>