Bootstrap5 Tables

The Bootstrap 5 Table component provides a set of features and styles that make tables easier to build, responsive, and visually appealing.

We can easily create tables with different styles, sorting functionality, pagination, and responsive layouts.

Bootstrap5 Basic Table

In Bootstrap 5, creating a basic table structure is simple. You just need to use the standard HTML <table> element and add the table class.

Bootstrap5 styles the basic table using the .table class, as shown in the example below:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Striped Table

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 »

Bordered Table

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

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Hover Table

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

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Dark Table

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

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Dark Striped Table

Combining the .table-dark and .table-striped classes creates a dark striped table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Hover Effect - Dark Table

Combining the .table-dark and .table-hover classes sets the hover effect for a dark background table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Borderless Table

The .table-borderless class creates a borderless table:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Contextual Classes

Contextual classes can be used to set the color of rows or cells:

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 »

The table below lists the descriptions of the table color classes:

Class Name	Description
.table-primary	Blue: Indicates an important action.
.table-success	Green: Indicates a successful or allowed action.
.table-danger	Red: Indicates a dangerous action.
.table-info	Light blue: Indicates a change in content.
.table-warning	Orange: Indicates an action that needs attention.
.table-active	Grey: Used for hover effects.
.table-secondary	Grey: Indicates less important content.
.table-light	Light grey, can be used as a row background.
.table-dark	Dark grey, can be used as a row background.

Table Head Colors

We can also set the color of the table header. For example, the .table-dark class adds a dark background to the header, and the .table-light class adds a grey background:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Small Table

The .table-sm class creates a smaller table by reducing padding:

Example

Firstname	Lastname	Email
John	Doe
Mary	Moe
July	Dooley

Try it »

Responsive Table

The .table-responsive class creates a responsive table: it adds a horizontal scrollbar when the screen width is less than 992px. If the viewport width is greater than 992px, it displays differently (no scrollbar):

Example

Try it »

You can set the scrollbar to appear at specific screen widths using the following classes:

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

Example

Try it »