Basic Tables
Basic Example #
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</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 |
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Striped Rows Table #
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 | Simsons |
<table class="table table-striped table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped Rows Table Dark #
Use .table-dark .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 | Simsons |
<table class="table table-dark table-striped table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped Rows Table Success #
Use .table-success .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 | Simsons |
<table class="table table-success table-striped table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td> Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</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 | Simsons |
<table class="table table-striped-columns table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped columns Dark#
Use .table-dark .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 | Simsons |
<table class="table table-dark table-striped-columns table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped columns Dark#
Use .table-success .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 | Simsons |
<table class="table table-success table-striped-columns table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</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 | Simsons |
<table class="table table-hover table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Hoverable rows Dark #
Add .table-dark .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 | Simsons |
<table class="table table-dark table-hover table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</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 | Simsons |
<table class="table table-centered">
<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 class="table-active">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td class="table-active">Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Active Tables Dark#
Highlight a table row or cell by adding a .table-dark .table-active class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-dark table-centered">
<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 class="table-active">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td class="table-active">Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered Table #
Add .table-bordered for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-bordered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered color Table #
Add .table-bordered & .border-primary can be added to change colors.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-bordered border-primary table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tables without borders #
Add .table-borderless for a table without borders..
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-borderless table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tables without borders Dark#
Add .table-borderless .table-dark for a table without borders and dark table.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-borderless table-dark table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small tables #
Add .table-sm to make any .table more compact by cutting all cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-sm">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small Tables Dark#
Add .table-sm .table-dark to make any .table more compact by cutting all cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-dark table-sm">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table group dividers #
Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<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 class="table-group-divider">
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Vertical alignment #
Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the vertical align classes to re-align where needed.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
<table class="table align-middle table-centered">
<thead>
<tr>
<th scope="col" class="w-25">Heading 1</th>
<th scope="col" class="w-25">Heading 2</th>
<th scope="col" class="w-25">Heading 3</th>
<th scope="col" class="w-25">Heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</tr>
<tr class="align-bottom">
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</tr>
<tr>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td class="align-top">This cell is aligned to the top.</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</tr>
</tbody>
</table>
Nesting Table #
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | ||||||||||||
|
|||||||||||||||
| 3 | Larry | the Bird | |||||||||||||
<table class="table table-bordered table-striped table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<td>B</td>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<td>C</td>
<td>First</td>
<td>Last</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table head #
Similar to tables and dark tables, use the modifier classes .table-lightto make <thead>s appear light or dark gray.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-centered">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table head Dark#
Similar to tables and dark tables, use the modifier classes .table-dark to make <thead>s appear light or dark gray.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-centered">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table foot#
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| Footer | Footer | Footer | Footer |
<table class="table table-centered">
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
Captions#
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | Simsons |
<table class="table table-centered">
<caption>List of users</caption>
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td>Simsons</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Captions#
You can also put the <caption> on the top of the table with .caption-top
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table caption-top table-centered">
<caption>List of users</caption>
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Always responsive #
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>2</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>3</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
With avatars #
A list of all the users in your account including their name, title, email and role.
| Name | Title | Role | Action | |
|---|---|---|---|---|
Tony M. Carter |
Designer | tonymcarter@jourrapide.com | Member | Edit |
James E. Chamb |
UI/UX Designer | jamesechambliss@teleworm.us | Admin | Edit |
Charlotte J. Torres |
Copywriter | charlotte@jourrapide.com | Member | Edit |
Mary J. Germain |
Full Stack | maryjgermain@jourrapide.com | CEO | Edit |
Kevin C. Reyes |
Director of Product | kevincreyes@jourrapide.com | Member | Edit |
<table class="table table-hover table-centered">
<thead class="table-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0"> Tony M. Carter</h5>
</div>
</div>
</td>
<td>Designer</td>
<td>tonymcarter@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">James E. Chamb</h5>
</div>
</div>
</td>
<td>UI/UX Designer</td>
<td>jamesechambliss@teleworm.us</td>
<td>Admin</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">Charlotte J. Torres</h5>
</div>
</div>
</td>
<td>Copywriter</td>
<td>charlotte@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr class="table-active">
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0 d-flex align-items-center gap-1">Mary J. Germain<i class='bx bxs-badge-check text-success'></i></iconify-icon></h5>
</div>
</div>
</td>
<td>Full Stack</td>
<td>maryjgermain@jourrapide.com</td>
<td>CEO</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">Kevin C. Reyes</h5>
</div>
</div>
</td>
<td>Director of Product</td>
<td>kevincreyes@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
</tbody>
</table>
With checkboxes #
A list of all the users in your account including their name, title, email and role.
|
|
Name | Title | Role | Action | |
|---|---|---|---|---|---|
|
|
Tony M. Carter | Designer | tonymcarter@jourrapide.com | Member | Edit |
|
|
James E. Chamb | UI/UX Designer | jamesechambliss@teleworm.us | Admin | Edit |
|
|
Charlotte J. Torres | Copywriter | charlotte@jourrapide.com | Member | Edit |
|
|
Mary J. Germain | Full Stack | maryjgermain@jourrapide.com | CEO | Edit |
|
|
Kevin C. Reyes | Director of Product | kevincreyes@jourrapide.com | Member | Edit |
<table class="table table-striped table-borderless table-centered">
<thead class="table-light">
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
</div>
</th>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
</div>
</td>
<td> Tony M. Carter </td>
<td>Designer</td>
<td>tonymcarter@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
</div>
</td>
<td>James E. Chamb</td>
<td>UI/UX Designer</td>
<td>jamesechambliss@teleworm.us</td>
<td>Admin</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
</div>
</td>
<td> Charlotte J. Torres </td>
<td>Copywriter</td>
<td>charlotte@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
</div>
</td>
<td>
Mary J. Germain <i class='bx bxs-badge-check text-success'></i></iconify-icon>
</td>
<td>Full Stack</td>
<td>maryjgermain@jourrapide.com</td>
<td>CEO</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
</div>
</td>
<td>Kevin C. Reyes</td>
<td>Director of Product</td>
<td>kevincreyes@jourrapide.com</td>
<td>Member</td>
<td><a href="#!" class="btn btn-primary btn-sm w-100">Edit</a></td>
</tr>
</tbody>
</table>
Nesting Table #
Border styles, active styles, and table variants are not inherited by nested tables.
| Invoice Number | Invoice Amount | Confirmation by the client | Planned payment date | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| F-011221/21 | $ 879.500 | 11/05/2023 | 12/05/2023 | ||||||||||||||||
|
|||||||||||||||||||
| F-011221/19 | $ 93.250 | 9/05/2023 | 10/05/2023 | ||||||||||||||||
<table class="table table-bordered table-striped table-centered">
<thead>
<tr>
<th scope="col">Invoice Number</th>
<th scope="col">Invoice Amount</th>
<th scope="col">Confirmation by the client</th>
<th scope="col">Planned payment date</th>
</tr>
</thead>
<tbody>
<tr>
<td>F-011221/21</td>
<td>$ 879.500</td>
<td>11/05/2023</td>
<td>12/05/2023</td>
</tr>
<tr>
<td colspan="4">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">ERP number</th>
<th scope="col">Carrier legal entity</th>
<th scope="col">Responsible logistician</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>3-128-3</td>
<td>ToBrookfield Asset Management</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">Kevin C. Reyes</h5>
</div>
</div>
</td>
<td><span class="badge bg-success-subtle text-success py-1 px-2">Verified</span></td>
</tr>
<tr>
<td>3-128-2</td>
<td>Brookfield Asset Management</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">Mary J. Germain</h5>
</div>
</div>
</td>
<td><span class="badge bg-warning-subtle text-warning py-1 px-2">Pending</span></td>
</tr>
<tr>
<td>3-128-1</td>
<td>Westfield Asset Management</td>
<td>
<div class="d-flex align-items-center gap-1">
<img src="assets/images/users/avatar-8.jpg" alt="" class="avatar-sm rounded-circle">
<div class="d-block">
<h5 class="mb-0">Charlotte J. Torres
</h5>
</div>
</div>
</td>
<td><span class="badge bg-danger-subtle text-danger py-1 px-2">Rejected</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>F-011221/19</td>
<td>$ 93.250</td>
<td>9/05/2023</td>
<td>10/05/2023</td>
</tr>
</tbody>
</table>