###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Basic Tables

##### Regular Table

Add class `.table` in table tag.

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer
4 | David | Perry | Perry123 | supporter
5 | Anthony | Davie | Davie123 | member
6 | Alan | Gilchrist | Gilchrist123 | supporter

##### Table head options

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

# | thead-primary | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-secondary | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-success | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-warning | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-info | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-danger | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-dark | Last Name | Username | Role
--- | --- | --- | --- | ---

# | thead-light | Last Name | Username | Role
--- | --- | --- | --- | ---

##### Table Hover

Add class `.table-hover` in table tag.

# | Products | Popularity | Sales
--- | --- | --- | ---
1 | Milk Powder | 1,6,6,9,7,4,8,5,2,1 | 28.76%
2 | Air Conditioner | 7,5,2,4,5,7,9,3,1,2 | 8.55%
3 | RC Cars | 0,3,6,1,2,4,6,3,2,1 | 58.56%
4 | Down Coat | 9,8,5,4,9,4,3,2,1,8 | 35.76%

##### Bordered Table

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

Task | Progress | Deadline | Action
--- | --- | --- | ---
Lunar probe project |  | May 15, 2015 |
Dream successful plan |  | July 1, 2015 |
Office automatization |  | Apr 12, 2015 |
The sun climbing plan |  | Aug 9, 2015 |
Open strategy |  | Apr 2, 2015 |
Tantas earum numeris |  | July 11, 2015 |

##### Striped Table

Add class `.table-striped` in table tag.

Task | Progress | Deadline | Action
--- | --- | --- | ---
Lunar probe project |  | May 15, 2015 |
Dream successful plan |  | July 1, 2015 |
Office automatization |  | Apr 12, 2015 |
The sun climbing plan |  | Aug 9, 2015 |
Open strategy |  | Apr 2, 2015 |
Tantas earum numeris |  | July 11, 2015 |

##### Large table

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

Task | Deadline | Action
--- | --- | ---
Lunar probe project | May 15, 2015 |
Dream successful plan | July 1, 2015 |
Office automatization | Apr 12, 2015 |

##### Small table

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

Task | Deadline | Action
--- | --- | ---
Lunar probe project | May 15, 2015 |
Dream successful plan | July 1, 2015 |
Office automatization | Apr 12, 2015 |

##### Responsive Table

Create responsive tables by wrapping any table in `.table-responsive` class.

Invoice | User | Date | Amount | Status | Country
--- | --- | --- | --- | --- | ---
Order #26589 | Herman Beck | Oct 16, 2016 | $45.00 | Paid | EN
Order #58746 | Mary Adams | Oct 12, 2016 | $245.30 | Pending | CN
Order #98458 | Caleb Richards | May 18, 2016 | $38.00 | Shipped | AU
Order #32658 | June Lane | Apr 28, 2016 | $77.99 | Paid | FR

###### Breakpoint specific

Use `table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint.

Invoice | User | Date | Amount | Status | Country
--- | --- | --- | --- | --- | ---
Order #26589 | Herman Beck | Oct 16, 2016 | $45.00 | Paid | EN
Order #58746 | Mary Adams | Oct 12, 2016 | $245.30 | Pending | CN
Order #98458 | Caleb Richards | May 18, 2016 | $38.00 | Shipped | AU
Order #32658 | June Lane | Apr 28, 2016 | $77.99 | Paid | FR

##### Table flush

Add class `.table-flush` in table tag.

Task | Progress | Deadline | Action
--- | --- | --- | ---
Lunar probe project |  | May 15, 2015 |
Dream successful plan |  | July 1, 2015 |
Office automatization |  | Apr 12, 2015 |
The sun climbing plan |  | Aug 9, 2015 |
Open strategy |  | Apr 2, 2015 |
Tantas earum numeris |  | July 11, 2015 |

##### Contextual Classes

Use classes `( .active, .success, .info, .warning, .danger )` to color table rows or individual cells.

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
Active | Column content | Column content | Column content
Default | Column content | Column content | Column content
Primary | Column content | Column content | Column content
Secondary | Column content | Column content | Column content
Success | Column content | Column content | Column content
Danger | Column content | Column content | Column content
Warning | Column content | Column content | Column content
Info | Column content | Column content | Column content
Light | Column content | Column content | Column content
Dark | Column content | Column content | Column content

###### Dark table

Regular table background variants are not available with the dark 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

##### Table Color Variations

Use classes `( .active, .success, .info, .warning, .danger )` to color table rows or individual cells.

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer

# | First Name | Last Name | Username | Role
--- | --- | --- | --- | ---
1 | Jens | Brincker | Brincker123 | admin
2 | Mark | Hay | Hay123 | member
3 | Anthony | Davie | Davie123 | developer