8 different Bootstrap Table styles that explain how to use in projects

8 different Bootstrap Table styles that explain how to use in projects

What are Bootstrap Tables?

The Bootstrap framework includes CSS classes for the tables in your web documents. The Bootstrap table classes allow different and beautiful table styles that you can create quite easily by simply including the CSS classes in the table tags.

A few of the table classes in Bootstrap framework 3 are:

  • .table – for basic table style without a border.
  • .table-striped – To add zebra striping to table rows (not compatible with IE 8).
  • .table-bordered – Adds a bordered table
  • .table-hover – Use this if you want hovered rows in the tables

Following are a few examples of using the table classes with online examples that you can see by clicking at “Experience it online”.

A basic Bootstrap based table example

The following example uses the .table class of Bootstrap CSS to create a table. The created table is without the borders.

Bootstrap table simple

Experience this online

As you can see online, a table is created without the borders around a table and its rows. The headings are bold while table data is left aligned.

Bootstrap stripped rows example

Following example uses the table-striped class to create the stripped rows in a table.

Experience this online

You can see, the first row’s background is light gray and the next is white. The next row is light gray and so on. The rows are styled by the :nth-child CSS selector, which is not compatible with IE 8. So if you have no issue with older browsers then you can simply use this class. And look how simple it is to create a beautiful stripped table with Bootstrap framework.

Creating a bordered table Bootstrap example

Following example creates a bordered table using the same data as in the above examples by using the .table-bordered class.

Bootstrap table border

Experience this online

Hover rows table example with Bootstrap

As mouse comes over a row in a table, the background color will change. This style looks nice and especially for long tables, it enables users to differentiate the ‘seen’ rows to the others in a table. You can create hover rows by using the .table-hover class. Look at an example below that shows how easy it is to create a hover style table.

Experience this online

You can also add table-bordered in the <table> tag to add the border in hovered style. See example below:

Experience this online

You can see, a table with hover rows and a border is created by using table classes of Bootstrap framework.

Adding Bootstrap classes to rows

In the above example, we have seen how to apply Bootstrap CSS classes to the table tag. You can also apply classes to individual rows or even table data elements in your web pages. For example showing a row as “active”. Following are a few examples of using the CSS classes in the rows.

Example of using classes in the rows

The following example uses success, active, info classes in a table with a border. The rows can be differentiated by different colors.

Bootstrap table

Experience this online

Note that, names in the table are just for illustration purpose.

Example of using the classes in the table data

You can also use these classes in <td> to distinguish data in the table. See example below:

Bootstrap table td

Experience this online

Responsive Tables with Bootstrap

As such, Bootstrap framework is mobile first; how come Bootstrap based tables cannot be responsive! As the screen gets smaller, the behavior of a table also changes to give the best user experience. If you simply use the above examples in smaller devices like under 300* resolution, the horizontal bar comes in at the browser level. To make the user experience much better, you can wrap table into .table-responsive.

You can simply create a div above the table and wrap that table into the table-responsive class. If the screen resolution is less than 768px then the table will scroll horizontally. Following example shows how to use it:

Experience this online

Related reading: Twitter Bootstrap Tutorial | A demo theme with bootstrap | Bootstrap CSS