Basic example

Invoice Member name Import batch
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues 
<table class="table">
  <thead>
    <tr>
      <th>
        <a class="toggle" data-state="false" href="javascript:void(0)">
          <span class="glyphicon glyphicon-check"></span>
        </a>
      </th>
      <th>Invoice</th>
      <th>Member name</th>
      <th>Import batch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
  </tbody>
</table>

Striped rows

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

Invoice Member name Import batch
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues 
<table class="table table-striped">
  <thead>
    <tr>
      <th>
        <a class="toggle" data-state="false" href="javascript:void(0)">
          <span class="glyphicon glyphicon-check"></span>
        </a>
      </th>
      <th>Invoice</th>
      <th>Member name</th>
      <th>Import batch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
  </tbody>
</table>

No hover rows

Add .table-nohover to disable the hover state on table rows within a <tbody>.

Invoice Member name Import batch
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues 
<table class="table table-nohover">
  <thead>
    <tr>
      <th>
        <a class="toggle" data-state="false" href="javascript:void(0)">
          <span class="glyphicon glyphicon-check"></span>
        </a>
      </th>
      <th>Invoice</th>
      <th>Member name</th>
      <th>Import batch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
  </tbody>
</table>

Table with actions

Add a div with the class .table-actions before a <table> element. The actions that can be applied to selected table rows should always be accompanied by a tooltip.

Invoice Member name Import batch
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues 
<div class="table-actions">
  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Send message"><span class="glyphicon glyphicon-comment"></span></button>
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Send final notice"><span class="glyphicon glyphicon-file"></span></button>
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Retract invoice"><span class="glyphicon glyphicon-remove-sign"></span></button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
    </div>
  </div>
</div>
<table class="table">
  <thead>
    <tr>
      <th>
        <a class="toggle" data-state="false" href="javascript:void(0)">
          <span class="glyphicon glyphicon-check"></span>
        </a>
      </th>
      <th>Invoice</th>
      <th>Member name</th>
      <th>Import batch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td><a href="#">123456</a></td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
  </tbody>
</table>

Table with panel-like looks

Use .table-panel to give a table a panel-like look. This will remove the border between rows and add rounded corners.

Marijke Meesters
m.meesters@example.com
Kamerstraat 23, 1234AB Plaats, Netherlands
IBAN NL91ABNA0417164300 
<table class="table table-panel v-center">
  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-user text-muted" aria-hidden="true"></span></td>
      <td><strong>Marijke Meesters</strong></td>
    </tr>
    <tr>
      <td><span class="glyphicon glyphicon-envelope text-muted" aria-hidden="true"></span></td>
      <td>m.meesters@example.com</td>
    </tr>
    <tr>
      <td><span class="glyphicon glyphicon-home text-muted" aria-hidden="true"></span></td>
      <td>Kamerstraat 23, 1234AB Plaats, Netherlands</td>
    </tr>
    <tr>
      <td>IBAN</td>
      <td>NL91ABNA0417164300</td>
    </tr>
  </tbody>
</table>

Separated rows

Use .table-panel-spaced to separate the rows of a table, best viewed on a background with a contrast color.

Customer Message Created at  
John Doe I have a question about this invoice... 02 Dec 2017 - 08:20
Jane Doe Does the invoice also include the fees for... 01 Dec 2017 - 11:19
Laura Leroy I didn't sign up for the classes mentioned... 08 Jan 2018 - 16:17 
<table class="table table-panel table-panel-spaced table-clickable v-center">
   <thead>
      <tr>
         <th class="checkable">
            <a class="select-all">
              <span class="glyphicon glyphicon-check"></span>
            </a>
         </th>
         <th>Customer</th>
         <th>Message</th>
         <th style="min-width: 150px">Created at</th>
         <th style="min-width: 110px">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox"></td>
         <td>John Doe</td>
         <td>I have a question about this invoice...</td>
         <td>02 Dec 2017 - 08:20</td>
         <td class="text-right">
            <a class="btn btn-default btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="glyphicon glyphicon-chevron-right"></i>
            </a>
         </td>
      </tr>
      <tr>
         <td><input type="checkbox"></td>
         <td>Jane Doe</td>
         <td>Does the invoice also include the fees for...</td>
         <td>01 Dec 2017 - 11:19</td>
         <td class="text-right">
            <a class="btn btn-default btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="glyphicon glyphicon-chevron-right"></i>
            </a>
         </td>
      </tr>
      <tr>
         <td><input type="checkbox"></td>
         <td>Laura Leroy</td>
         <td>I didn't sign up for the classes mentioned...</td>
         <td>08 Jan 2018 - 16:17</td>
         <td class="text-right">
            <a class="btn btn-default btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="glyphicon glyphicon-chevron-right"></i>
            </a>
         </td>
      </tr>
   </tbody>
</table>