From 5c95dcc300b2f05f99f71347631b0f5dc2ddffe6 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 18 Aug 2017 18:23:06 -0700
Subject: [PATCH] v4 docs Update Table docs with `.table-dark` and
 `.thead-light` changes

---
 docs/4.0/content/tables.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index db05e8378c..9de7c55536 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -45,10 +45,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
 </table>
 {% endexample %}
 
-You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
+You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
 
 {% example html %}
-<table class="table table-inverse">
+<table class="table table-dark">
   <thead>
     <tr>
       <th>#</th>
@@ -82,11 +82,11 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
 
 ## Table head options
 
-Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
+Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.
 
 {% example html %}
 <table class="table">
-  <thead class="thead-inverse">
+  <thead class="thead-dark">
     <tr>
       <th>#</th>
       <th>First Name</th>
@@ -117,7 +117,7 @@ Similar to default and inverse tables, use one of two modifier classes to make `
 </table>
 
 <table class="table">
-  <thead class="thead-default">
+  <thead class="thead-light">
     <tr>
       <th>#</th>
       <th>First Name</th>
@@ -186,7 +186,7 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
 {% endexample %}
 
 {% example html %}
-<table class="table table-striped table-inverse">
+<table class="table table-striped table-dark">
   <thead>
     <tr>
       <th>#</th>
@@ -261,7 +261,7 @@ Add `.table-bordered` for borders on all sides of the table and cells.
 {% endexample %}
 
 {% example html %}
-<table class="table table-bordered table-inverse">
+<table class="table table-bordered table-dark">
   <thead>
     <tr>
       <th>#</th>
@@ -335,7 +335,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 {% endexample %}
 
 {% example html %}
-<table class="table table-hover table-inverse">
+<table class="table table-hover table-dark">
   <thead>
     <tr>
       <th>#</th>
@@ -403,7 +403,7 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
 {% endexample %}
 
 {% example html %}
-<table class="table table-sm table-inverse">
+<table class="table table-sm table-dark">
   <thead>
     <tr>
       <th>#</th>
@@ -487,10 +487,10 @@ Use contextual classes to color table rows or individual cells.
 </tr>
 {% endhighlight %}
 
-Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
+Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
 
 <div class="bd-example">
-  <table class="table table-inverse">
+  <table class="table table-dark">
     <thead>
       <tr>
         <th>#</th>