Bootstrap 4 Tables

Bootstrap 4 Tables

Bootstrap 4 tables are generally a series of rows and columns that contains data inside a table cell. Bootstrap table class is used to enhance the table layout and also make it device friendly i.e responsive.

Basic Table

To create bootstrap basic table, assign.table class to the <table> base 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

Note:Bootstrap basic table is created easily ,by assigning .table to the <table> base class.

Dark table

Assign .table & .table-dark to the <table> base class to create dark background of the table.

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

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

Table Stripped Row

To create bootstrap stripped row, assign .table-striped class to <table> element base class.These class adds zebra-stripes to a 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

Note:Stripped row of table can be created by assigning .table , & .table-striped to the <table> element base class.

Bordered Table

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

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

Note:Bootstrap bordered table can be created very easily by assigning .table & .bordered-table class to the <table> element base class.

Bootstrap Responsive Table

Assign .table-responsive class to the <table> element base class to create responsive table.Basically,it adds horizontal scrollbar when when content size is too big horizontally.

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

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

Bootstrap Table Head Color

To provide table head color,assign either .table-light or .table-dark class to <thead> element base class.The .table-light class is used to create light table head while .table-dark class is used to create dark table head.

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

Note: The .table-light & .table-dark classes are used to create light and dark table head correspondingly.

Table Contextual Classes

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

Note: To provide table background color,assign table contextual classes to the <table> element base class.

Online Test / Quiz