### Basic Tables

Using the most basic table markup, here’s how `.table`-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

Example 1: Table with outer spacing

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

Example 2: Minimal Table with no outer spacing.

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

#### Inverse table

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

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

#### Inverse table with info background

You can also invert the colors—with light text on dark backgrounds—with `.bg-info, .bg-success, .bg-warning and .bg-danger classes`.

To set the light background color use `.bg-[color]` class where `[color]` is the value of your selected color from modern color palette. So for teal color background class will be `.bg-teal`. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.

To set the selected background color lighten use `.bg-lighten-[*]` class where `[*]` is the value between '1-5' of your selected lighten color from modern color palette. So for color lighten 4 background class will be `.bg-lighten-4`. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.

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

#### Table head options

Similar to default and inverse tables, use one of two modifier classes `.thead-default` or `.thead-inverse` 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

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

#### Table head options with primary background

Use background classes `bg-*` to make custom `thead` background. You can also use Modern Admin color palette classes for background.

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

# | 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>`. This styling doesn't work in IE8 and below as `:nth-child` CSS selector isn't supported.

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

#### Striped rows with inverse table

Use `.table-inverse` with `.table-striped` to add zebra-striping to any inverse table row within the `<tbody>`. This styling doesn't work in IE8 and below as `:nth-child` CSS selector isn't supported.

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

#### Bordered striped

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

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

#### Bordered Table Inverse

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

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

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

#### Contextual classes

Use contextual classes to color table rows or individual cells.

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

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

#### Contextual classes inverse

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

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

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

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding `.table-responsive` class on `.table`. Or, pick a maximum breakpoint with which to have a responsive table up to by adding `.table-responsive{-sm|-md|-lg|-xl}`.

#### Vertical clipping/truncation

Responsive 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 responsive

# | Table heading | 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 | Table cell
2 | 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 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

##### Breakpoint specific

Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell

# | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell

# | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell

# | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now