What is 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.

Bootstrap is the fastest way of creating styled tables by just adding the bootstrap class in the table class name.

What are the Style Classes to Create Bootstrap Table

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 examples of each class with the output you can check.

Create Simple Table Using Bootstrap

You can use below given bootstrap class to create a simple table made from bootstrap.

See the example given below and check the simple table created by this class.

Output

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

Striped Rows Table Using Bootstrap Table Classes

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 striped table with the example given below.

Output

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

Bordered Table Using Bootstrap Table Classes

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 given below and hover over each row to check the hover effect created by this style class.

Output

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

Condensed Table Using Bootstrap Table Classes

Use the class combination of .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 and find the difference with the simple table created above.

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 styled row.

Below are the five different contextual classes.

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 style creating by each 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

How to Create a Responsive Table Using Bootstrap

If you want to create a table and make it responsive, you have to use an element div with the bootstrap class .table-responsive before the .table element.

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

Reference
getbootstrap v3 buttons
getbootstrap v4 buttons

Leave a Reply

Your email address will not be published. Required fields are marked *