Bootstrap: Tables

Basic example

For basic styling—light padding and only horizontal dividers use the <Table> component.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</Table>

Striped rows

Use striped option to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table striped>
  ...
</Table>

Bordered rows

Add bordered option for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table bordered>
  ...
</Table>

Hover rows

Add hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table hover>
  ...
</Table>

Condensed table

Add condensed to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table condensed>
  ...
</Table>

Contextual classes

Use contextual classes to color table rows or individual cells.

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- On rows -->
<tr className='active'>...</tr>
<tr className='success'>...</tr>
<tr className='warning'>...</tr>
<tr className='danger'>...</tr>
<tr className='info'>...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td className='active'>...</td>
  <td className='success'>...</td>
  <td className='warning'>...</td>
  <td className='danger'>...</td>
  <td className='info'>...</td>
</tr>

Responsive tables

Create responsive tables by adding responsive option to any <Table> to make them scroll horizontally on small devices.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<Table responsive>
  ...
</Table>

Bootstrap: Rubix Enhancements

Collapsed

<Table> component with zero margins

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table collapsed>
  ...
</Table>

Align Top/Middle/Bottom

<Table> alignment (alignTop/alignMiddle/alignBottom)

# First Name Last Name Username
1 Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<Table alignBottom>
  ...
</Table>