Logo
  • Logo

Bootstrap Tables

Tables

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

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

# 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 colspan="2">Larry the Bird</td>
							      <td>@twitter</td>
							    </tr>
							  </tbody>
							</table>

Variants

Use contextual classes to color tables, table rows or individual cells.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<!-- On tables -->
							<table class="table-primary">...</table>
							<table class="table-secondary">...</table>
							<table class="table-success">...</table>
							<table class="table-danger">...</table>
							<table class="table-warning">...</table>
							<table class="table-info">...</table>
							<table class="table-light">...</table>
							<table class="table-dark">...</table>
							
							<!-- On rows -->
							<tr class="table-primary">...</tr>
							<tr class="table-secondary">...</tr>
							<tr class="table-success">...</tr>
							<tr class="table-danger">...</tr>
							<tr class="table-warning">...</tr>
							<tr class="table-info">...</tr>
							<tr class="table-light">...</tr>
							<tr class="table-dark">...</tr>
							
							<!-- On cells (`td` or `th`) -->
							<tr>
							  <td class="table-primary">...</td>
							  <td class="table-secondary">...</td>
							  <td class="table-success">...</td>
							  <td class="table-danger">...</td>
							  <td class="table-warning">...</td>
							  <td class="table-info">...</td>
							  <td class="table-light">...</td>
							  <td class="table-dark">...</td>
							</tr>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Accented tables

Striped rows

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
							  ...
							</table>

Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped-columns">
							  ...
							</table>

These classes can also be added to table variants:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-striped">
							  ...
							</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-striped-columns">
							  ...
							</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-success table-striped">
							  ...
							</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-success table-striped-columns">
							  ...
							</table>

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
							  ...
							</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-dark table-hover">
							  ...
							</table>

These hoverable rows can also be combined with the striped rows variant:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-hover">
							  ...
							</table>

Active tables

Highlight a table row or cell by adding a .table-active class.

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

Get A Free Quote / Need a Help ? Contact Us

Color Switcher