- Dashboard
- UI kits
- Extra kits
- Apps
- Forms
- Datatables
- Sessions
- Others
- Doc

- Version 1
- Version 2
- Version 3
- Version 4

- Basic Elements
- Form Layouts
- Input Groups
- Form Validation
- Smart Wizard
- Tag Input
- Rich Editor

- Invoice
- Inbox
- Chat

- Image Cropper
- Loaders
- Ladda Buttons
- Toastr
- Sweet Alerts
- User Tour
- Upload

- Alerts
- Accordion
- Badges
- Buttons
- Cards
- Card Metrics
- Carousels
- Lists
- Paginations
- Popover
- Progressbar
- Tables
- Tabs
- Tooltip
- Modals
- Sliders

- Sign in
- Sign up
- Forgot

- Not Found
- User Profile
- Blank Page

Mega Menu

## Mega Menu
Sidebar

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores natus laboriosam fugit, consequatur.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem odio amet eos dolore suscipit placeat.

Features

Home UI Kits Apps Forms Sessions Support

Components

- Accordion
- Alerts
- Buttons
- Badges
- Carousels
- Lists
- Popover
- Tables
- Datatables
- Modals
- Sliders
- Tabs

Home UI Kits Apps Forms Sessions Support
3

New message new 10 sec ago

James: Hey! are you busy?

New order received new 2 hours ago

1 Headphone, 3 iPhone x

Product out of stock 3 10 hours ago

Headphone E67, R98, XL90, Q77

Server Up! 3 14 hours ago

Server rebooted successfully

Timothy Carlson
Account settings Billing history Sign out

# 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

Sidebar Colors

RTL

Enable RTL