| 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>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>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>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>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-default btn-icon" data-toggle="tooltip" data-placement="top" title="Send message"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="btn btn-default 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-default 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-default btn-icon" data-toggle="tooltip" data-placement="top" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
</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>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.
When an icon falls short you can use regular text buttons. An icon button is preferred.
Toolbar buttons support the contextual classes (e.g. .btn-success).
<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-default btn-icon" data-toggle="tooltip" data-placement="top" title="Send message"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-file"></span> 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-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More <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>
<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"><span class="glyphicon glyphicon-plus"></span></button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-default btn-icon" data-toggle="tooltip" data-placement="top" title="Duplicate item"><span class="glyphicon glyphicon-duplicate"></span></button>
<button type="button" class="btn btn-default btn-icon" data-toggle="tooltip" data-placement="top" title="Settings"><span class="glyphicon glyphicon-cog"></span></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"><span class="glyphicon glyphicon-trash"></span></button>
</div>
</div>
</div>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>Use .table-panel-spaced to separate the rows of a table, best viewed on a background with a contrast color.
<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"> </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>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>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)">
<span class="glyphicon glyphicon-check"></span>
</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>