Bootstrap4 Tables

Bootstrap4 Basic Tables

Bootstrap4 styles basic tables with the .table class, as shown in the example below:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Striped Tables

By adding the .table-striped class, you will see stripes on the rows within the <tbody>, as shown in the example below:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Bordered Tables

The .table-bordered class adds borders to the table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Hover State Table

The .table-hover class adds a hover effect (grey background) on every row of the table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Dark Background Table

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

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Hover State - Dark Background Table

Combine .table-dark and .table-hover to set a hover effect on a dark background table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Borderless Table

The .table-borderless class sets a borderless table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Contextual Classes

Contextual classes can be used to set the color of a specific row or cell:

Example

Firstname	Lastname	Email
Default	Defaultson
Primary	Joe
Success	Doe
Danger	Moe
Info	Dooley
Warning	Refs
Active	Activeson
Secondary	Secondson
Light	Angie
Dark	Bo

Try it Yourself »

The following table lists the description of the table color classes:

Class Name	Description
.table-primary	Blue: Indicates an important action
.table-success	Green: Indicates a successful or positive action
.table-danger	Red: Indicates a dangerous or potentially negative action
.table-info	Light blue: Indicates informational content changes
.table-warning	Orange: Indicates a warning that might need attention
.table-active	Grey: Used for hover or active state
.table-secondary	Grey: Indicates a slightly less important action
.table-light	Light grey, can be used as table row background
.table-dark	Dark grey, can be used as table row background

Table Head Colors

In Bootstrap v4.0.0-beta.2, the .thead-dark class is used to add a black background to the table header, and the .thead-light class is used to add a grey background to the table header:

In Bootstrap v4.0.0-beta, the .thead-inverse class was used for a black background, and .thead-default for a grey background.

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Small Table

The .table-sm class is used to create a smaller table by reducing the padding:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it Yourself »

Responsive Tables

The .table-responsive class is used to create responsive tables. The table will get a horizontal scrollbar when the screen is less than 992px wide. If the viewport is wider than 992px, it will look different (no scrollbar):

Example

Try it Yourself »

You can specify the screen width at which the scrollbar should appear using the following classes:

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

Example

Try it Yourself »