Tables
Default
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Colors
Use the following contextual color classes for a table (<table>), row (<tr>) or cell (<th> or <td>): .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark.
These color classes work together with all the other table styles.
Table
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Row
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Cell
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<p>Use the following contextual color classes for a table (<code><table></code>), row (<code><tr></code>) or cell (<code><th></code> or <code><td></code>): <code>.table-primary</code>, <code>.table-secondary</code>, <code>.table-success</code>, <code>.table-danger</code>, <code>.table-warning</code>, <code>.table-info</code>, <code>.table-light</code>, and <code>.table-dark</code>.</p>
<p>These color classes work together with all the other table styles.</p>
<h4 class="h5 text-muted mt-3">Table</h4>
<table class="table table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Row</h4>
<table class="table">
<thead>
<tr class="table-primary">
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Cell</h4>
<table class="table">
<thead>
<tr>
<th scope="col" class="table-primary">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><p>Use the following contextual color classes for a table (<code><table></code>), row (<code><tr></code>) or cell (<code><th></code> or <code><td></code>): <code>.table-primary</code>, <code>.table-secondary</code>, <code>.table-success</code>, <code>.table-danger</code>, <code>.table-warning</code>, <code>.table-info</code>, <code>.table-light</code>, and <code>.table-dark</code>.</p>
<p>These color classes work together with all the other table styles.</p>
<h4 class="h5 text-muted mt-3">Table</h4>
<table class="table table-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Row</h4>
<table class="table">
<thead>
<tr class="table-primary">
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Cell</h4>
<table class="table">
<thead>
<tr>
<th scope="col" class="table-primary">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Accents
Striped
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Hover
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Striped and hover
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Active row or cell
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<h4 class="h5 text-muted mt-3">Striped</h4>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Hover</h4>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Striped and hover</h4>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Active row or cell</h4>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="table-active">Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><h4 class="h5 text-muted mt-3">Striped</h4>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Hover</h4>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Striped and hover</h4>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Active row or cell</h4>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="table-active">Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Borders
Bordered
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Colored border
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Borderless
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<h4 class="h5 text-muted mt-3">Bordered</h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Colored border</h4>
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Borderless</h4>
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><h4 class="h5 text-muted mt-3">Bordered</h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Colored border</h4>
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Borderless</h4>
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Small
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Vertical alignment
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. |
| 2 | France | French | ParLorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.is |
| 3 | Germany | German | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. |
<table class="table align-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</td>
</tr>
<tr class="align-bottom">
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>ParLorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.is</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td class="align-top">German</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</td>
</tr>
</tbody>
</table><table class="table align-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</td>
</tr>
<tr class="align-bottom">
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>ParLorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.is</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td class="align-top">German</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</td>
</tr>
</tbody>
</table>
Nesting
| # | Country | Language | Capital | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | England | English | London | ||||||||||||||||
| 2 | France | French | Paris | ||||||||||||||||
| 3 |
|
||||||||||||||||||
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Head and foot
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
| Footer | Footer | Footer | Footer |
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
<tfoot class="table-primary">
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table><table class="table">
<thead class="table-primary">
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
<tfoot class="table-primary">
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
Captions
Default
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
Top
| # | Country | Language | Capital |
|---|---|---|---|
| 1 | England | English | London |
| 2 | France | French | Paris |
| 3 | Germany | German | Berlin |
<h4 class="h5 text-muted mt-3">Default</h4>
<table class="table">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Top</h4>
<table class="table caption-top">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table><h4 class="h5 text-muted mt-3">Default</h4>
<table class="table">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
<h4 class="h5 text-muted mt-3">Top</h4>
<table class="table caption-top">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Language</th>
<th scope="col">Capital</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>England</td>
<td>English</td>
<td>London</td>
</tr>
<tr>
<th scope="row">2</th>
<td>France</td>
<td>French</td>
<td>Paris</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Germany</td>
<td>German</td>
<td>Berlin</td>
</tr>
</tbody>
</table>
Responsive
All breakpoints
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Below small
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Below medium
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Below large
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Below extra large
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Below extra extra large
| # | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head | Table head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<h4 class="h5 text-muted mt-3">All breakpoints</h4>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below small</h4>
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below medium</h4>
<div class="table-responsive-md">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below large</h4>
<div class="table-responsive-lg">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below extra large</h4>
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below extra extra large</h4>
<div class="table-responsive-xxl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div><h4 class="h5 text-muted mt-3">All breakpoints</h4>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below small</h4>
<div class="table-responsive-sm">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below medium</h4>
<div class="table-responsive-md">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below large</h4>
<div class="table-responsive-lg">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below extra large</h4>
<div class="table-responsive-xl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<h4 class="h5 text-muted mt-3">Below extra extra large</h4>
<div class="table-responsive-xxl">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
<th scope="col">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>