Bootstrap Tables


Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

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

Try it Yourself »

Striped Rows

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

Example

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

Try it Yourself »

Bordered Table

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

Example

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

Try it Yourself »

Hover Rows

The .table-hover class enables a hover state on table rows:

Example

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

Try it Yourself »

Condensed Table

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

Example

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

Try it Yourself »

Contextual Classes

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

Example

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

Try it Yourself »

The contextual classes that can be used are:

Class Description
.active Applies the hover color to the table row or table cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Complete Bootstrap Table Reference

For a complete reference of all table classes, go to our complete Bootstrap Tables Reference.



Color Picker

colorpicker