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 .tableto any table tag ,then extend with custom styles or our various included modifier classes.
Basic Dark Table
invert the colors—with light text on dark backgrounds—with .table-dark.
| # | Name | Avatar | Status | Action | |
|---|---|---|---|---|---|
| 1 | Smith Doe |  | Smith@gmail.com | Active | |
| 2 | Jhon Doe | | Jhon@gmail.com | Pending | |
| 3 | Alex | | Otto@gmail.com | Not Active |
Light Bordered Table
Add .table-borderedfor 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-borderedfor borders on all sides of the table and cells.
| # | Name | Avatar | Status | Action | |
|---|---|---|---|---|---|
| 1 | Smith Doe | | Smith@gmail.com | Active | |
| 2 | Jhon Doe | | Jhon@gmail.com | Pending | |
| 3 | Alex | | Otto@gmail.com | Not Active |
Light Hoverable Table
Add .table-hoverto enable a hover state on table rows within a <tbody>.
| # | Name | Avatar | 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-hoverto enable a hover state on table rows within a <tbody>.
| # | Name | Avatar | 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-smto make tables more compact by cutting cell padding in half.
| # | Name | Avatar | 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-smto make tables more compact by cutting cell padding in half.
| # | Name | Avatar | 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.
| # | Name | Avatar | 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.
| # | Name | Avatar | 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 .tablewith .table-responsive. Or,pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
Dark Responsive Table
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .tablewith .table-responsive. Or,pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
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 sunt.
©2026 Gull HTML
All rights reserved
