Tutorialsplane

Bootstrap Tables

Bootstrap tables : Tables are basically used to represent data in row column format. Bootstrap provide classes to create responsive tables with cool look. .table class is used for basic table design in bootstrap. Bootstrap tables becomes important when you want to show data in table format with cool look. There are following types of bootstrap tables available in bootstrap.

Bootstrap Tables Type

Let us learn bootstrap tables with demo and example-

Bootstrap Basic Table

It adds simple style in table it adds the simple line between the rows.

for basic bootstrap table .table class is used.

Bootstrap Table : Basic

NameEmailCountry
Jhohnjhone@gmail.comUSA
Kellykelly@gmail.comUSA
Kamanakamna@gmail.comIndia
Anayanay@gmail.comCanada

Example

The above example will produce the following output-

Bootstrap Bordered Table

For adding border in bootstrap table class.table-bordered is used

Bootstrap Table : Bordered

NameEmailCountry
Jhohnjhone@gmail.comUSA
Kellykelly@gmail.comUSA
Kamanakamna@gmail.comIndia
Anayanay@gmail.comCanada

The above example will produce the following output-

Bootstrap Table: Condensed

It makes tables cells more compact by removing the space.
For adding condensed table property in bootstrap table class.table-condensed is used

Bootstrap Table: Condensed

NameEmailCountry
Jhohnjhone@gmail.comUSA
Kellykelly@gmail.comUSA
Kamanakamna@gmail.comIndia
Anayanay@gmail.comCanada

The above example will produce the following output-

Bootstrap Table: Striped Rows

Used to provide zebra-strips.
For adding stripped in bootstrap table class.table-striped is used

Bootstrap Table: Striped Rows

NameEmailCountry
Jhohnjhone@gmail.comUSA
Kellykelly@gmail.comUSA
Kamanakamna@gmail.comIndia
Anayanay@gmail.comCanada

The above example will produce the following output-

Bootstrap Table: Table Hover

Used to provide hover functionality in table.
For table hover in bootstrap table class.table-hover is used

Bootstrap Table: Table Hover

NameEmailCountry
Jhohnjhone@gmail.comUSA
Kellykelly@gmail.comUSA
Kamanakamna@gmail.comIndia
Anayanay@gmail.comCanada

Try All In One ยป

The above example will produce the following output-

Gallery