Tables

Basic example


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<table class="table">
  <caption>Optional table caption</caption>
  <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


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<table class="table table-striped">
  <caption>Optional table caption</caption>
  <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>
	

Bordered table


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<table class="table table-bordered">
  <caption>Optional table caption</caption>
  <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>
	

Hover rows


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<table class="table table-hover">
  <caption>Optional table caption</caption>
  <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>
	

Condensed table


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<table class="table table-condensed">
  <caption>Optional table caption</caption>
  <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>
	

Contextual classes


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
4JohnDoe@JD

<table class="table table-condensed">
  <caption>Optional table caption</caption>
  <thead>
    <tr class="active">
      <th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
    </tr>
    <tr class="warning">
      <td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
    </tr>
    <tr class="danger">
      <td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td>
    </tr>
    <tr class="info">
      <td>4</td><td>John</td><td>Doe</td><td>@JD</td>
    </tr>
  </tbody>
</table>
	

Responsive tables


Optional table caption
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

<div class="table-responsive">
  <table class="table">
    <caption>Optional table caption</caption>
    <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>
</div>