Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 172

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>

Updated: 09-Mar-20