bootstrap tables


A basic Bootstrap table has a light padding and only horizontal dividers. The table class adds basic styling to a table.

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com

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

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com

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

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com

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

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com

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

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com

Contextual classes can be used to color table rows <tr> or table cells <td>.

Firstname Lastname Email
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com

The table-responsive class creates a responsive table. The table will then scroll horizontally on small devices under 768px.