Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Examples

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Table dark

.table-dark class invert the colors—with light text on dark backgrounds

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped rows

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

Name Position Office Age Start date Salary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 
<table class="table table-striped">
<thead>
  <tr role="row">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr role="row">
    <td>Airi Satou</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>33</td>
    <td>2008/11/28</td>
    <td>$162,700</td>
  </tr>
  <tr role="row">
    <td>Angelica Ramos</td>
    <td>Chief Executive Officer (CEO)</td>
    <td>London</td>
    <td>47</td>
    <td>2009/10/09</td>
    <td>$1,200,000</td>
  </tr>
  <tr role="row">
    <td>Ashton Cox</td>
    <td>Junior Technical Author</td>
    <td>San Francisco</td>
    <td>66</td>
    <td>2009/01/12</td>
    <td>$86,000</td>
  </tr>
  <tr role="row">
    <td>Bradley Greer</td>
    <td>Software Engineer</td>
    <td>London</td>
    <td>41</td>
    <td>2012/10/13</td>
    <td>$132,000</td>
  </tr>
  <tr role="row">
    <td>Brenden Wagner</td>
    <td>Software Engineer</td>
    <td>San Francisco</td>
    <td>28</td>
    <td>2011/06/07</td>
    <td>$206,850</td>
  </tr>
  <tr role="row">
    <td>Brielle Williamson</td>
    <td>Integration Specialist</td>
    <td>New York</td>
    <td>61</td>
    <td>2012/12/02</td>
    <td>$372,000</td>
  </tr>
</tbody>
</table>

Bordered table

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

Name Position Office Age Start date Salary
Airi Satou 		Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos 		Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox 		Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer 		Software Engineer Dhaka 41 2012/10/13 $132,000 
<table class="table table-bordered">
<thead>
  <tr role="row">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr role="row">
    <td>
      <div class="avatar avatar-sm mr-2">
        <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
      </div>
      Airi Satou
    </td>
    <td>Accountant</td>
    <td>
      <span class="badge badge-soft-primary">Tokyo</span>
    </td>
    <td>33</td>
    <td>2008/11/28</td>
    <td>$162,700</td>
  </tr>
  <tr role="row">
    <td>
      <div class="avatar avatar-sm mr-2">
        <img class="avatar__img" src="../assets/img/avatars/44.jpg" alt="">
      </div>
      Angelica Ramos
    </td>
    <td>Chief Executive Officer (CEO)</td>
    <td>
      <span class="badge badge-soft-secondary">London</span>
    </td>
    <td>47</td>
    <td>2009/10/09</td>
    <td>$1,200,000</td>
  </tr>
  <tr role="row">
    <td>
      <div class="avatar avatar-sm mr-2">
        <img class="avatar__img" src="../assets/img/avatars/45.jpg" alt="">
      </div>
      Ashton Cox
    </td>
    <td>Junior Technical Author</td>
    <td>
      <span class="badge badge-soft-success">San Francisco</span>
    </td>
    <td>66</td>
    <td>2009/01/12</td>
    <td>$86,000</td>
  </tr>
  <tr role="row">
    <td>
      <div class="avatar avatar-sm mr-2">
        <img class="avatar__img" src="../assets/img/avatars/44.jpg" alt="">
      </div>
      Bradley Greer
    </td>
    <td>Software Engineer</td>
    <td>
      <span class="badge badge-soft-danger">Dhaka</span>
    </td>
    <td>41</td>
    <td>2012/10/13</td>
    <td>$132,000</td>
  </tr>
</tbody>
</table>

For more details please visit Bootstrap official site. Bootstrap Documentation