Bootstrap Tables

We can create different types of Bootstrap tables by using different classes to style them.The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.

The .table class adds basic styling to a table:

Example -

Bootstrap Striped Rows Table:

The .table-striped class adds zebra-stripes to a table:

Example -

Bootstrap Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Example -

Bootstrap Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Example -

Bootstrap Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Example -

Bootstrap Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

Example -

Bootstrap Responsive Tables

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

Example -