#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### Table head options

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

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

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

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

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete

#### Small Table

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

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

#### 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 | Edit Delete
React Project | Ronald Frest |  | Completed | Edit Delete
Angular Project | Peter Charls |  | Active | Edit Delete
Vuejs Project | Jack Obes |  | Scheduled | Edit Delete
Bootstrap Project | Jerry Milton |  | Pending | Edit Delete
Figma Project | Janne Ale |  | Active | Edit Delete
React Custom | Ted Richer |  | Scheduled | Edit Delete
Latest Bootstrap | Perry Parker |  | Pending | Edit Delete
Angular UI | Ana Bell |  | Completed | Edit Delete
Bootstrap UI | Jerry Milton |  | Completed | Edit Delete

##### Table without card

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

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

#### Table Hover Animation

Add `.table-hover-animation` to enable a hover stat with animation on table rows within a `<tbody>`.

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