- ###### Files

- Two new item submitted

  Marketing Manager
  '17kb

- 52 JPG file Generated

  FontEnd Developer
  '11kb

- 25 PDF File Uploaded

  Digital Marketing Manager
  '150kb

- Anna_Strong.doc

  Web Designer
  '256kb

- ###### Members

- John Doe

  UI designer

- Michal Clark

  FontEnd Developer

- Milena Gibson

  Digital Marketing Manager

- Anna Strong

  Web Designer

- No results found.

#### Table Basic

Using the most basic table Leanne Grahamup, 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.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Dark Table

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

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Table head options

Similar to tables and dark tables, use the modifier classes `.table-dark` to make `<thead>`s appear dark.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

Use the modifier class `.table-light` to make `<thead>`s appear light.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

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

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Striped rows with inverse dark

Use `.table-dark` 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.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Bordered table

Add `.table-bordered` for borders on all sides of the table and cells. For Inverse Dark Table, add `.table-dark` along with `.table-bordered`.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Borderless Table

Add `.table-borderless` for a table without borders. It can also be used on dark tables.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Hoverable rows

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

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Small Table

Add `.table-sm` class with `.table` to display small size table.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### Contextual classes

Use contextual classes to color table rows or individual cells. Read full documnetation here.

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Figma Project | Ronnie Shane |  | Active |
React Project | Ronald Frest |  | Completed |
Angular Project | Peter Charls |  | Active |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |
Figma Project | Janne Ale |  | Active |
React Custom | Ted Richer |  | Scheduled |
Latest Bootstrap | Perry Parker |  | Pending |
Angular UI | Ana Bell |  | Completed |
Bootstrap UI | Jerry Milton |  | Completed |

##### Table without card

Project | Client | Users | Status | Actions
--- | --- | --- | --- | ---
Angular Project | Peter Charls |  | Active |
React Project | Ronald Frest |  | Completed |
Vuejs Project | Jack Obes |  | Scheduled |
Bootstrap Project | Jerry Milton |  | Pending |

#### 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}`. Read full documentation here.

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

# | Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 | Heading 7 | Heading 8 | Heading 9 | Heading 10 | Heading 11 | Heading 12 | Heading 13
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
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
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
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
4 | 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

#### Theme Customizer

Customize & Preview in Real Time

Skin

Light
Bordered
Dark
Semi Dark

Buy Now