- Dashboard
  - Version 1
  - Version 2
  - Version 3
  - Version 4
- UI Kits
  - Alerts
  - Dropdown
  - Buttons
  - Bootstrap tab
  - Cards
  - Card Metrics
  - Carousels
  - Collapsibles
  - Lists
  - Paginations
  - Popover
  - Progressbar
  - Tables
  - Tabs
  - Tooltip
  - Typography
  - Modals
  - Sliders
- Extra Kits
  - Image Cropper
  - Loaders
  - Ladda Buttons
  - Toastr
  - Sweet Alerts
  - User Tour
  - Upload
- Apps
  - contact List
  - Invoice
  - Inbox
  - Chat
  - Task Manager
    - Todo List
    - Task manager
    - Task manager list
    - Minimal ToDo
  - Ecommerce
    - Products
    - Product Details
    - Cart
    - Checkout
  - Contact
    - Contact Lists
    - Contact Grid
    - Contact Details
- Widgets
  - widget card
  - widget statistics
  - Widget List
  - Widget App
  - Weather App
- Charts
  - echarts
  - ChartJs
  - Apex Charts
    - Area Charts
    - Bar Charts
    - Bubble Charts
    - Column Charts
    - CandleStick Charts
    - Line Charts
    - Mix Charts
    - Mix Charts
    - PieDonut Charts
    - Radar Charts
    - RadialBar Charts
    - Scatter Charts
    - Sparkline Charts
- Forms
  - Basic Elements
  - Basic action bar
  - Form Layouts
  - Multi column forms
  - Input Groups
  - Form Validation
  - Smart Wizard
  - Smart Wizard
  - Tag Input
  - Rich Editor
- Datatables
- Sessions
  - Sign in
  - Sign up
  - Forgot
- Others
  - Not Found
  - User Profile
  - Blank Page
- Doc

# Table

- Componets
- Table

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

# | 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 |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Dark Table Head

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

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

#### Striped rows

Use `.table-striped` to add zebra-striping to any table rowwithin 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 rowwithin the `<tbody>`.

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not 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 |
3 | Watch | 12-10-2019 | $30 | Not 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 |
3 | Watch | 12-10-2019 | $30 | Not 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` 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 |

#### 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 | Handle 2 | Handle 3 | Handle 4
--- | --- | --- | --- | --- | --- | ---
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 Background

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 | Handle 2 | Handle 3 | Handle 4
--- | --- | --- | --- | --- | --- | ---
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>` 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 With Caption

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
# | 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 |
3 | Watch | 12-10-2019 | $30 | Not 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 |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

Gull - Laravel + Bootstrap 4 admin template

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero quis beatae officia saepe perferendis voluptatum minima eveniet voluptates dolorum, temporibus nisi maxime nesciunt totam repudiandae commodi sequi dolor quibusdam

Buy Gull HTML

© 2018 Gull HTML

All rights reserved

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New