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:

Striped Rows

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

Bordered Table

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

Hover Rows

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

Condensed Table

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

Contextual Classes

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

The contextual classes that can be used are:

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:

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@example.com</td>
  </tr>
<table>

Complete Bootstrap Table Reference

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