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.

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:-

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.

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:-

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:-

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:-

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.

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

• Add Border To Table With Bootstrap, CSS or jQuery
• Color Alternate Table Rows Using Boostrap
• Horizontally Center Align Table Text Using Bootstrap
• Add and Remove Table Rows Dynamically Using jQuery