Demo of Table with inverse style in Bootstrap 4
Inverse Table: White Font with Dark background (Bootstrap 4 Alpha)
| ID | Name | Class | Mark |
|---|
| 1 | John | Four | 52 |
| 2 | Alex | Three | 85 |
| 3 | Rohn | Six | 55 |
<table class='table table-inverse'>
<thead><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr> </thead>
<tbody>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</tbody>
</table>
Head inverse
To the base class table we can add only head inverse class like this.
<thead class='thead-inverse'>
| ID | Name | Class | Mark |
|---|
| 1 | John | Four | 52 |
| 2 | Alex | Three | 85 |
| 3 | Rohn | Six | 55 |
<table class='table thead-inverse'>
<thead><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr> </thead>
<tbody>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</tbody>
</table>
Bordered inverse table
| ID | Name | Class | Mark |
|---|
| 1 | John | Four | 52 |
| 2 | Alex | Three | 85 |
| 3 | Rohn | Six | 55 |
<table class='table table-bordered table-inverse'>
<thead><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr> </thead>
<tbody>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</tbody>
</table>
Hoverable rows
| ID | Name | Class | Mark |
|---|
| 1 | John | Four | 52 |
| 2 | Alex | Three | 85 |
| 3 | Rohn | Six | 55 |
<table class='table table-hover table-inverse'>
<thead><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr> </thead>
<tbody>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</tbody>
</table>
Compact or small table
| ID | Name | Class | Mark |
|---|
| 1 | John | Four | 52 |
| 2 | Alex | Three | 85 |
| 3 | Rohn | Six | 55 |
<table class='table table-sm table-inverse'>
<thead><tr><th>ID</th><th>Name</th><th>Class</th><th>Mark</th></tr> </thead>
<tbody>
<tr><td>1</td><td>John</td><td>Four</td><td>52</td></tr>
<tr><td>2</td><td>Alex</td><td>Three</td><td>85</td></tr>
<tr><td>3</td><td>Rohn</td><td>Six</td><td>55</td></tr>
</tbody>
</table>
Adding contextual Classes to inverse table
| ID | Name | Class Style | Class | Mark |
|---|
| 1 | John | | Four | 52 |
| 2 | Alex | class='bg-primary' | Three | 85 |
| 3 | Rohn | | Six | 55 |
| 4 | Reddy | class='bg-info' | Three | 59 |
| 5 | Sony | | Four | 55 |
| 6 | Ram | class='bg-success' | Five | 64 |
| 7 | PreLe | | Six | 75 |
| 8 | Robin | class='bg-warning' | Seven | 52 |
| 9 | Lee | | Seven | 72 |
| 10 | Roth | class='bg-danger' | three | 62 |