Bootstrap 4 Tables

Bootstrap 4 Tables
Bootstrap 4 Tables

Bootstrap 4 Basic Table

A basic Bootstrap 4 table has a light padding and horizontal dividers.

The .table class adds basic styling to a table:

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Bordered Table

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

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com

Black/Dark Table

The .table-dark class adds a black background to the table:

Example

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com