#### Basic example

For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Dark table

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

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Table head

Use one of two modifier classes to make `<thead>`s appear light or dark gray.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Striped rows

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

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Bordered table

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

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Borderless table

Add `.table-borderless` for a table without borders.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Table Border color

Add `.table-bordered` & `.border-*` for colored borders on all sides of the table and cells.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Table Border color

Add `.table-bordered` & `.border-*` for colored borders on all sides of the table and cells.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Vertical alignment

Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

# | First Name | Last Name | Action
--- | --- | --- | ---
1 | Mark | Otto |
2 | Jacob | Thornton |
3 | Larry | the Bird |
4 | Jacob | Thornton |

#### Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
Header | Header | Header
--- | --- | ---
A | First | Last
B | First | Last
3 | Jacob | Thornton | @fat

#### Hoverable rows

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

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Small table

Add `.table-sm` to make tables more compact by cutting cell padding in half.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter
4 | Mark | Otto | @mdo
5 | Jacob | Thornton | @fat

#### Contextual classes

Use contextual classes to color table rows or individual cells.

# | 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

#### 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 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Responsive table

Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px).

# | 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

##### Theme Customizer

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Layout Position

Fixed
Scrollable

###### Topbar Color

Light
Dark

###### Direction

LTR
RTL

##### Offcanvas right

...