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 toolbar

Add a div element 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.

Using .btn-group will add a border in between multiple .btn-group elements.

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-icon" data-toggle="tooltip" data-placement="top" title="Send message"><span class="glyphicon glyphicon-comment"></span></button>
      <button type="button" class="btn btn-icon" data-toggle="tooltip" data-placement="top" title="Prepare final notice"><span class="glyphicon glyphicon-file"></span></button>
      <button type="button" class="btn btn-icon" 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-icon" 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>

Positioning buttons within the toolbar

Use .btn-toolbar-group-left to position .btn-groups elements and align them on the left side of the toolbar. For aligning .btn-groups right simply use .btn-toolbar-group-righjt.

Text only buttons

When an icon falls short you can use regular text buttons. An icon button is preferred.

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-toolbar-group-left">
      <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-icon" data-toggle="tooltip" data-placement="top" title="Send message"><span class="glyphicon glyphicon-comment"></span></button>
      </div>
      <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-default">Prepare Final Notice</button>
      </div>
    </div>
    <div class="btn-toolbar-group-right">
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Occasional actions <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </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>

Borderless table

When you need a table without a border you can use .table-borderless. Please only use this class for special cases.

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-borderless">
  <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>