Merge pull request #22836 from twbs/colors-redux

v4: Colors redux

23 files changed, 232 insertions, 254 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>
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 8d4fcfe64..db05e8378 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -438,19 +438,11 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
 
 Use contextual classes to color table rows or individual cells.
 
-| Class | Description |
-| --- | --- |
-| `.table-active` | Applies the hover color to a particular row or cell |
-| `.table-success` | Indicates a successful or positive action |
-| `.table-info` | Indicates a neutral informative change or action |
-| `.table-warning` | Indicates a warning that might need attention |
-| `.table-danger` | Indicates a dangerous or potentially negative action |
-
 <div class="bd-example">
   <table class="table">
     <thead>
       <tr>
-        <th>#</th>
+        <th>Type</th>
         <th>Column heading</th>
         <th>Column heading</th>
         <th>Column heading</th>
@@ -458,59 +450,25 @@ Use contextual classes to color table rows or individual cells.
     </thead>
     <tbody>
       <tr class="table-active">
-        <th scope="row">1</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">2</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="table-success">
-        <th scope="row">3</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">4</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="table-info">
-        <th scope="row">5</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr>
-        <th scope="row">6</th>
-        <td>Column content</td>
-        <td>Column content</td>
-        <td>Column content</td>
-      </tr>
-      <tr class="table-warning">
-        <th scope="row">7</th>
+        <th scope="row">Active</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <th scope="row">8</th>
+        <th scope="row">Default</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-danger">
-        <th scope="row">9</th>
+
+      {% for color in site.data.theme-colors %}
+      <tr class="table-{{ color.name }}">
+        <th scope="row">{{ color.name | capitalize }}</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
-      </tr>
+      </tr>{% endfor %}
     </tbody>
   </table>
 </div>
@@ -518,18 +476,14 @@ Use contextual classes to color table rows or individual cells.
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>
-<tr class="table-success">...</tr>
-<tr class="table-info">...</tr>
-<tr class="table-warning">...</tr>
-<tr class="table-danger">...</tr>
+{% for color in site.data.theme-colors %}
+<tr class="table-{{ color.name }}">...</tr>{% endfor %}
 
 <!-- On cells (`td` or `th`) -->
 <tr>
   <td class="table-active">...</td>
-  <td class="table-success">...</td>
-  <td class="table-info">...</td>
-  <td class="table-warning">...</td>
-  <td class="table-danger">...</td>
+  {% for color in site.data.theme-colors %}
+  <td class="table-{{ color.name }}">...</td>{% endfor %}
 </tr>
 {% endhighlight %}
 
diff --git a/docs/4.0/examples/album/index.html b/docs/4.0/examples/album/index.html
index f442be943..a0dfcd8d2 100644
--- a/docs/4.0/examples/album/index.html
+++ b/docs/4.0/examples/album/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <div class="collapse bg-inverse" id="navbarHeader">
+    <div class="collapse bg-dark" id="navbarHeader">
       <div class="container">
         <div class="row">
           <div class="col-sm-8 py-4">
@@ -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 451b4c38f..75a502fd9 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 e535f19d1..3e66fca24 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>
@@ -47,7 +47,7 @@
 
     <div class="container-fluid">
       <div class="row">
-        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar">
+        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
           <ul class="nav nav-pills flex-column">
             <li class="nav-item">
               <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
diff --git a/docs/4.0/examples/jumbotron/index.html b/docs/4.0/examples/jumbotron/index.html
index 15b449f78..d1b747e98 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 16ac2a10b..43bb4534a 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 f27b42dd8..9a81499d0 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 bdad69171..8e8957a21 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 7b829a8b2..bf3f33cc0 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 89485ea62..bf5d0c760 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 d69f5a397..edbcff5aa 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 4f5fe32dd..e0899eae0 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/getting-started/options.md b/docs/4.0/getting-started/options.md
index 30ef80c0c..4788c847a 100644
--- a/docs/4.0/getting-started/options.md
+++ b/docs/4.0/getting-started/options.md
@@ -13,8 +13,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can
 For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
 
 {% highlight scss %}
-$body-bg:    $gray-dark;
-$body-color: $gray-light;
+$body-bg:    $gray-900;
+$body-color: $gray-600;
 {% endhighlight %}
 
 Do the same for any variable you need to override, including the global options listed below.
@@ -35,3 +35,81 @@ You can find and customize these variables for key global options in our `_varia
 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                                    |
 | `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |
 | `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |
+
+## Color
+
+Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.
+
+### All colors
+
+All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
+
+<div class="row">
+  {% for color in site.data.colors %}
+    <div class="col-md-4">
+      {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
+        <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+      {% endunless %}
+    </div>
+  {% endfor %}
+</div>
+
+Here's how you can use these in your Sass:
+
+{% highlight scss %}
+// With variable
+.alpha { color: $purple; }
+
+// From the Sass map with our `color()` function
+.beta { color: color("purple"); }
+{% endhighlight %}
+
+[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`.
+
+{% callout info %}
+In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.
+{% endcallout %}
+
+### Theme colors
+
+We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file.
+
+<div class="row">
+  {% for color in site.data.theme-colors %}
+    <div class="col-md-4">
+      <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+    </div>
+  {% endfor %}
+</div>
+
+### Grays
+
+An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project.
+
+<div class="row mb-3">
+  <div class="col-md-4">
+    {% for color in site.data.grays %}
+      <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+    {% endfor %}
+  </div>
+</div>
+
+Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map:
+
+{% highlight scss %}
+$colors: (
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  blue: $blue,
+  pink: $pink,
+  purple: $purple,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-900
+) !default;
+{% endhighlight %}
+
+Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 061f598a9..f82bb4aef 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 essentially 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 essentially 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).
@@ -201,11 +201,11 @@ Dropped entirely for the new card component.
 - `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
 - `.panel-body` to `.card-body`
 - `.panel-footer` to `.card-footer`
-- `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`)
-- `.panel-success` to `.card-success` and `.card-inverse` (or use `.bg-success` on `.card-header`)
-- `.panel-info` to `.card-info` and `.card-inverse` (or use `.bg-info` on `.card-header`)
-- `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`)
-- `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` on `.card-header`)
+- `.panel-primary` to `.card-primary` and `.card-dark` (or use `.bg-primary` on `.card-header`)
+- `.panel-success` to `.card-success` and `.card-dark` (or use `.bg-success` on `.card-header`)
+- `.panel-info` to `.card-info` and `.card-dark` (or use `.bg-info` on `.card-header`)
+- `.panel-warning` to `.card-warning` and `.card-dark` (or use `.bg-warning` on `.card-header`)
+- `.panel-danger` to `.card-danger` and `.card-dark` (or use `.bg-danger` on `.card-header`)
 
 ### Carousel
 
diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md
index 8bf3f4674..3b1ee4338 100644
--- a/docs/4.0/utilities/borders.md
+++ b/docs/4.0/utilities/borders.md
@@ -13,6 +13,7 @@ Add classes to an element to remove all borders or some borders.
 
 <div class="bd-example-border-utils">
 {% example html %}
+<span class="border"></span>
 <span class="border-0"></span>
 <span class="border-top-0"></span>
 <span class="border-right-0"></span>
@@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders.
 {% endexample %}
 </div>
 
+## Border color
+
+Change the border color using utilities built on our theme colors.
+
+<div class="bd-example-border-utils">
+{% example html %}
+{% for color in site.data.theme-colors %}
+<span class="border border-{{ color.name }}"></span>{% endfor %}
+{% endexample %}
+</div>
+
 ## Border-radius
 
 Add classes to an element to easily round its corners.
diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 80e096cf9..11ac0be60 100644
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -7,37 +7,22 @@ toc: true
 ---
 
 {% example html %}
-<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-gray-dark">Eget risus varius blandit sit ultricies vehicula amet non magna.</p>
-<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
+{% for color in site.data.theme-colors %}
+<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
 {% endexample %}
 
 Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
 
 {% example html %}
-<a href="#" class="text-muted">Muted link</a>
-<a href="#" class="text-primary">Primary link</a>
-<a href="#" class="text-success">Success link</a>
-<a href="#" class="text-info">Info link</a>
-<a href="#" class="text-warning">Warning link</a>
-<a href="#" class="text-danger">Danger link</a>
+{% for color in site.data.theme-colors %}
+<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
 {% endexample %}
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
 
 {% example html %}
-<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
-<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
-<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
-<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
-<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
-<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
-<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
+{% for color in site.data.theme-colors %}
+<div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
 {% endexample %}
 
 {% callout info %}