Bootstrap Tables

Here we will discuss various ways in which Bootstrap can help the developers to make the tables look perfect on the web-pages.

Bootstrap Basic Table

Let us start with the basic table in bootstrap. Here the design is minimal with light padding and only horizontal dividers.

The class used for basic table is .table. Here’s a sample code for the same:

Bootstrap Striped Rows

To add zebra stripes to your table you can use the.table-striped class. Here’s the sample code

Bootstrap Bordered Table

For adding table borders, Bootstrap has provided the .table-bordered class. This will add borders at all sides of the table and cells.

Observer the below code:

Bootstrap Hover Rows

To give a special effect on hover, we can use the .table-hover class. Following code illustrates the same

Bootstrap Condensed Table

The .table-condensed class will help make a table compact, by cutting cell padding in half.

See the code below for better understanding

Bootstrap Contextual Classes

Contextual classes are special classes that can be used to color table rows/table cells (<td>)

Here is a list of contextual classes provided by Bootstrap:

  • .active: To apply the hover color to the table rows or table cell
  • .info: To indicates neutral informative change of action
  • .success: To show a successful or positive action
  • .danger: To show some dangerous (potentially negative) action
  • .warning: Indicates a warning that might need attention

Bootstrap Responsive Tables

Responsiveness is an indispensable feature of Bootstrap for any web-page element.

In case of tables, the responsiveness can be achieved using the .table-responsive class.

This makes the table horizontally scrollable on any device with the screen width less than 768px.

However, there is no considerable change in devices with the screen size larger than 768px.

Following is a sample code for responsive tables in Bootstrap: