Navbar:

##### Table

UI elements
Basic Table

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class `.table` to any `table tag` , then extend with custom styles or our various included modifier classes.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Basic Dark Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Light table Head

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Dark table Head

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Striped rows

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

    <tbody>

.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Dark Striped Table

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

    <tbody>

.

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Light Bordered Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Dark Bordered Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Light Borderless Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Dark Borderless Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Light Hoverable Table

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

    <tbody>

.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Dark Hoverable Table

Add `.table-hover` enable a hover state on table rows within a ``

    <tbody>

.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Light Small Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Dark Small Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Light Table With Contextual classes

Use contextual classes to color table rows or individual cells.

# | First | Last | Handle | Handle2 | Handle3 | Handle4
--- | --- | --- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
... | ... | ... | ... | ... | ... | ...

Dark Table With Contextual classes

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

# | First | Last | Handle | Handle2 | Handle3 | Handle4
--- | --- | --- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
... | ... | ... | ... | ... | ... | ...

Light Table Caption

A `caption tag` 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
# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Dark Table Caption

A `caption tag` 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
# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

Light Responsive Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |

Dark Responsive Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
1 | Watch | 12-10-2019 | $30 | Delivered |