Bootstrap Table

A Bootstrap table is a way of creating a table using the predefined Bootstrap classes. You can create a beautiful looking table by using the pre-styled classes in your tables. See the example below.

Test it Live

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Bootstrap is the fastest way of creating styled tables by just adding the Bootstrap class in the table class name. Below you can find the Bootstrap table live examples with descriptions.

So, let’s get started.

Bootstrap Table Classes

There are many bootstrap classes available to create tables. These classes are given below.

Class Name Description
.table The class can be used to create a simple table using bootstrap.
.table-striped If you want to create a table with zebra-striped like alternate background.
.table-bordered Use this class to create a bordered table.
.table-hover If you want to create a hover effect for each row of a table, you can use this class
.table-condensed To reduce the padding of each cell of a table, use this class.

Below are the description and live examples of each class with the output you can check here.

Simple Bootstrap Table

To create a simple table in Bootstrap, you can use Bootstrap .table class. See the below example showing the use of this class to create a simple table using Bootstrap.

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Striped Rows in Bootstrap Table

A striped table is a table with an alternate zebra-striped background for alternate tables. You have to use the combination of .table as the base class and .table-striped class to create a striped styled table.

See the example below showing the striped table:-

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Bordered Bootstrap Table

If you want to create a border for each cell, you can use a bootstrap class .table-bordered with the base class .table.

See the example below to check the bordered table from each side of a table.

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Hover Rows Table Using Bootstrap Table Classes

If you want to add a hover effect to each row of a table, you have to use the class .table-hover with the base class .table.

See the example below showing the hovered rows when you hover over each row:-

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Condensed Bootstrap Table

Condensed table can be created by using the Bootstrap class .table as a base class and .table-condensed to make the condensed table cells. The condensed table creates a table with half the padding of the simple table cell. It reduces the padding of each table cells to half.

See the table created below showing the condensed table in Bootstrap:-

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

Bootstrap Contextual Classes for Coloring Background

There are five contextual classes to create a colored style row. You just need to add a class that gives you the required color for the table row.

Class Name Description
.active It can be used to give a hover color to the table cells.
.success If you want to show position action, you can use this class.
.info To create a cell showing neutral informative action.
.warning Use this class to indicate a warning that might need attention.
.danger Specify a dangerous or potentially negative action.

See the below example to check the table rows background color using contextual classes:-

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154
4 Mahendra Singh Dhoni 124
5 Yuvraj Singh 178

Responsive Table in Bootstrap

If you want to create a responsive table in Bootstrap, you have to use <div> element with Bootstrap class .table-responsive and add it before the <table> element with .table class.

It gives you the flexibility to open the table in any small screen size. You will get a horizontal scroll on all small screen sizes.

Test it Live

Output

Sr No Player Name Score
1 Virat Kohli 128
2 Chris Gayle 187
3 AB De Villier 154

You may also like to read