Content

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, buttons, forms, and more.

Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Page Contents

Examples

Using the most basic table markup, here's how .table-based tables look in Figuration. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="col"></th>
      <th scope="col">Table Footer 1</th>
      <th scope="col">Table Footer 2</th>
      <th scope="col">Table Footer 3</th>
    </tr>
  </tfoot>
</table>

You can also invert the colors—with light text on dark backgrounds—with .table-inverse.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Table Head Options

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

Just like the headers, use one of two modifier classes to make <tfoot>s appear light or dark gray.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot class="tfoot-inverse">
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot class="tfoot-default">
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Striped Rows

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

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

<table class="table table-striped table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Borderless Table

Add .table-borderless to remove borders from all sides of the cells, but leave a border between the table's header or footer and the table body.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-borderless table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Non-Bordered Table

Add .table-noborder to remove borders from all sides of the cells, including the border between the table's header or footer and the table body.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-noborder">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-noborder table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Mixed-Border Table

Mix .table-bordered along with .table-borderless or .table-noborder to vary the table's borders.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-bordered table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-bordered table-noborder">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Hoverable Rows

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

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell

<table class="table table-hover table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
</table>

Condensed Table

Add .table-condensed to make tables more compact by reducing the cell padding.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-condensed">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table table-condensed table-inverse">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2">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>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Contextual Classes

Use contextual classes to color table rows or individual cells.

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

Class	Description
`.table-active`	Applies the hover color to a particular row or cell
`.table-success`	Indicates a successful or positive action
`.table-info`	Indicates a neutral informative change or action
`.table-warning`	Indicates a warning that might need attention
`.table-danger`	Indicates a dangerous or potentially negative action

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content
	Column footer	Column footer	Column footer

<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-info">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-info">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td>
</tr>

Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content
	Column footer	Column footer	Column footer

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-info">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-info">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
</tr>

You can also use text or background utilities to achieve multiple styles.

#	Table Header 1	Table Header 2	Table Header 3
1	table cell	table cell	table cell
2	table cell		table cell
3	table cell	table cell	table cell
	Table Footer 1	Table Footer 2	Table Footer 3

<table class="table">
  <thead class="text-light bg-blue-500">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Table Header 1</th>
      <th scope="col">Table Header 2</th>
      <th scope="col">Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-cyan-500">
      <th scope="row">1</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td colspan="2" class="text-success">table cell</td>
      <td class="text-danger">table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="text-light bg-success">table cell</td>
      <td>table cell</td>
      <td class="text-dark bg-red-100">table cell</td>
    </tr>
  </tbody>
  <tfoot class="bg-blue-100">
    <tr>
      <th></th>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </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.

List of users
#	First Name	Last Name	Username
1	John	Doe	jdoe
2	Jane	Smith	jsmith
3	James	White	jwhite

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>jdoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>jsmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>White</td>
      <td>jwhite</td>
    </tr>
  </tbody>
</table>

Scrolling Tables

Having an issue with tables becoming too wide for their containers? Add .table-scroll to any .table to make them scroll horizontally if they become wider than their container.

Vertical Clipping

Scrolling tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always Scrolling

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	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
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	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
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer

<table class="table table-scroll">
  ...
</table>

Responsive Scrolling

Table scrolling is also available in responsive variants of the form .table-scroll-*-down, where the table will horizontally scroll when the table is wider than it's container and when the viewport is at the given breakpoint or smaller.

Responsive variants are:

.table-scroll-xs-down
.table-scroll-sm-down
.table-scroll-md-down
.table-scroll-lg-down

Heads up! There is no .table-scroll-*-down class created for the largest breakpoint, .table-scroll-xl-down, since it is functionally equivalent to using .table-scroll.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	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
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
	Table footer	Table footer	Table footer	Table footer	Table footer	Table footer

<table class="table table-scroll-md-down">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Table heading</th>
        <th scope="col">Table heading</th>
        <th scope="col">Table heading</th>
        <th scope="col">Table heading</th>
        <th scope="col">Table heading</th>
        <th scope="col">Table heading</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>
      </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>
      </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>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th></th>
        <th>Table footer</th>
        <th>Table footer</th>
        <th>Table footer</th>
        <th>Table footer</th>
        <th>Table footer</th>
        <th>Table footer</th>
      </tr>
    </tfoot>
  </table>