Online

Bootstrap - Tables

The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a simple way.

Example :-

Result

Basic Table Layout
Name City
Tanmay Bangalore
Sachin Mumbai

Optional Table Classes

Along with the base table markup and the .table class, there are a few additional classes that you can use to style the markup. Following sections will give you a glimpse of all these classes.

Example :-

Result

Striped Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

Bordered Table

By adding the .table-bordered class, you will get borders surrounding every element and rounded corners around the entire table as seen in the following example

Example

Result

Bordered Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

Hover Table

By adding the .table-hover class, a light gray background will be added to rows while the cursor hovers over them, as seen in the following example -

Example

Result

Hover Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

Contextual classes

The Contextual classes shown in following table will allow you to change the background color of your table rows or individual cells.

Example

Result

Contextual Table Layout
Product Payment Date Status
Product1 23/11/2013 Pending
Product2 10/11/2013 Delivered
Product3 20/10/2013 In Call to confirm
Product4 20/10/2013 Declined

Responsive Tables

By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Example

Result

Responsive Table Layout
Product Payment Date Status
Product1 23/11/2013 Pending
Product2 10/11/2013 Delivered
Product3 20/10/2013 In Call to confirm
Product4 20/10/2013 Declined