Bootstrap 4 Table

A Bootstrap 4 table has a light padding and horizontal dividers. To style the table using bootstrap class use "table" class in the table tag.

Example 1: Display list of developers using bootstrap table class.

<div class="container">
    <h2>Developers List</h2>
    <table class="table"> 
        ...
    </table>
</div>

Striped Rows - The .table-striped class adds zebra-stripes to a table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped"> 
        ...
    </table>
</div> 

Bordered Table - The .table-bordered class adds borders on all sides of the table and cells.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-bordered"> 
        ...
    </table>
</div>

Hover Rows - The .table-hover class adds a hover effect (grey background color) on table row.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-hover"> 
        ...
    </table>
</div>

Black/Dark Table - The .table-dark class adds a black background with white text color to the table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-dark"> 
        ...
    </table>
</div> 

Dark Striped Table - Combine .table-dark and .table-striped to create a dark, striped table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-dark table-striped"> 
        ...
    </table>
</div> 

Similarly you can use .table-hover class with table-dark to create grey background color on table rows white hover.

Condensed Table or Small Table - The .table-sm class makes a table more compact by cutting cell padding in half.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-sm"> 
        ...
    </table>
</div> 

Contextual Classes - can be used to color table rows or table cells. The contextual classes that can be used are:

Class	Description
.table-active	Grey: Applies the grey background color to the table row or table cell.
.table-primary	Blue: Indicates an important action.
.table-success	Green: Indicates a successful or positive action.
.table-info	Light blue: Indicates a neutral informative change or action.
.table-warning	Orange: Indicates a warning that might need attention.
.table-danger	Red: Indicates a dangerous or potentially negative action.
.table-secondary	Grey: Indicates a slightly less important action.
.table-light	Light grey table or table row background.
.table-dark	Dark grey table or table row background.

Table Head Colors - The .thead-dark class adds a black background to table th tag, and the .thead-light class adds a grey background to table th tag.

<table class="table table-dark table-striped">
    <thead class="thead-dark">
        ...
    <thead>
</table>

Responsive Tables - The .table-responsive class creates a responsive table: an horizontal scrollbar is added to the table on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px wide, there is no difference.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

You can also use the following classes to make a table responsive.

Class                   Screen width
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>