Bootstrap 5 Table

Bootstrap 5 Tables

Bootstrap 5 tables are basically series of rows and columns that contains data in a cell. Bootstrap table class is used to enhance the look of the table.

Basic Table

To create bootstrap 5 simple table, you have to add .table class to the <table> base class.

Example

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Code Explanation

Note: To create bootstrap 5 basic table, assign .table to the <table> base class.

Dark table

To create table with dark background ,use extra class .table-dark to the <table> base class i.e<table class="table table-dark">.

Example

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Dark Table

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Code Explanation

Note: To create bootstrap dark table, assign .table & .dark-table to the <table> base class.

Striped Dark Table

Apply .table-striped class to <table> base class. These class adds zebra-stripes to a table.

Example

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Code Explanation

Note: To create bootstrap striped dark table, assign .table , .dark-table & .table-striped to the <table> base class.

Bordered Table

Apply .table-bordered class to <table> base class. This class adds borders on all sides of the table and cells.

Example

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Code Explanation

Note: To create bootstrap bordered dark table, assign .table , .bordered-table to the <table> base class.

Bootstrap Responsive Table

Apply .table-responsive{-sm|-md|-lg|-xl|-xxl} class to the <table>

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Andre Ren Developer

Code Explanation

Note: To create bootstrap responsive table,assign .table , .table-responsive to the <table> base class.

Table Head Color

Apply .table-light or .table-dark class to <thead> base class. It create table with light head using .table-lightclass while as table dark head by using .table-dark class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Oliza Ren Developer

Code Explanation

Note: To provide table header color assign .table-light & .table-dark to the <table> base class.

Bootstrap 5 Tables Color

Bootstrap 5 provides different predefined class such as .table-* classes that are used to provide background color to the table, table row or table cell. Here * denotes success, info, warning, danger, primary, secondary, etc

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

# First Name Last Name Work
1 Smith Jane Web Designer
2 John Doe Graphics Designer
3 Oliza Ren Developer

Code Explanation

Note: To provide, bootstrap 5 tables background color, assign table contextual classes such as .table-* to the <table> element base class.

Online Test / Quiz