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)">
          <i class="fas fa-check-square"></i>
        </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)">
          <i class="fas fa-check-square"></i>
        </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)">
          <i class="fas fa-check-square"></i>
        </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>

Condensed table

Add .table-condensed to make tables more compact by using less padding.

Invoice Member name Import batch
123456 John Doe Membership dues
123456 John Doe Membership dues
123456 John Doe Membership dues 
<table class="table table-condensed">
  <thead>
    <tr>
      <th>Invoice</th>
      <th>Member name</th>
      <th>Import batch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
    <tr>
      <td>123456</td>
      <td>John Doe</td>
      <td>Membership dues</td>
    </tr>
  </tbody>
</table>

Table with toolbar

Add a div element with the class .toolbar 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="toolbar p-2">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Send message"><i class="fas fa-comment-alt"></i></button>
    <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Prepare final notice"><i class="fas fa-file"></i></button>
    <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Retract invoice"><i class="fas fa-fw fa-times-circle"></i></button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-trash-alt"></i></button>
  </div>
</div>
<table class="table">
  <thead>
    <tr>
      <th>
        <a class="toggle" data-state="false" href="javascript:void(0)">
          <i class="fas fa-check-square"></i>
        </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 .toolbar-group.toolbar-group-left to position elements and align them on the left side of the toolbar. To align elements on the right simply use .toolbar-group.toolbar-group-right.

Text buttons

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

Contextual buttons

Toolbar buttons support the contextual classes (e.g. .btn-success).

Action Another action Something else here
Separated link 

<div class="toolbar p-2">
  <div class="toolbar-group toolbar-group-left mr-2">
    <div class="btn-group" role="group" aria-label="First group">
      <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Send message"><i class="fas fa-comment-alt"></i></button>
      <button type="button" class="btn btn-light mr-1"><i class="fas fa-file"></i> Prepare Final Notice</button>
    </div>
  </div>
  <div class="toolbar-group toolbar-group-right">
    <div class="btn-group" role="group" aria-label="Second group">
      <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        More
      </button>
      <div class="dropdown-menu float-right">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </div>
</div>

<br>

<div class="toolbar p-2">
  <div class="toolbar-group toolbar-group-left" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary btn-icon" data-toggle="tooltip" data-placement="top" title="Add item"><i class="fas fa-plus float-right"></i></button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
      <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Duplicate item"><i class="fas fa-copy"></i></button>
      <button type="button" class="btn btn-light btn-icon" data-toggle="tooltip" data-placement="top" title="Settings"><i class="fas fw fa-cog"></i></button>
    </div>
  </div>
  <div class="toolbar-group toolbar-group-right">
    <div class="btn-group" role="group" aria-label="Third group">
      <button type="button" class="btn btn-danger btn-icon" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-trash-alt"></i></button>
    </div>
  </div>
</div>

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><i class="fas fa-user-alt text-muted" aria-hidden="true"></i></td>
      <td><strong>Marijke Meesters</strong></td>
    </tr>
    <tr>
      <td><i class="fas fa-envelope text-muted" aria-hidden="true"></i></td>
      <td>m.meesters@example.com</td>
    </tr>
    <tr>
      <td><i class="fas fa-home text-muted" aria-hidden="true"></i></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 href="" class="select-all">
              <i class="fas fa-check-square"></i>
            </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-light btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="fas fa-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-light btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="fas fa-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-light btn-sm btn-tooltip" title="View" rel="tooltip" data-placement="bottom" href="#">
              <i class="fas fa-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)">
          <i class="fas fa-check-square"></i>
        </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>

Sorting example

Use .column-default on a <th> to add a hover effect to it. Together with the data-sort attribute you can set it to asc or des to display a matching arrow beside the column text.

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)">
          <i class="fas fa-check-square"></i>
        </a>
      </th>
      <th class="column-sortable" data-sort="des">
        Invoice
      </th>
      <th class="column-sortable" data-sort="">
        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>