Example of a table with bootstrap default styling. By default any table with
.table class has transparent background color.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
Example of a custom table header styling. Table header supports
default contextual and custom background colors available in bootstrap brand colors. To use bootstrap brand color in the table
header, add .bg-* class to the header row. All border and text colors will be
automatically adjusted.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ****** |
| July | Dooley | july@example.com | ******** |
| July | Dooley | july@example.com | *********** |
Apart form bootstrap color options you can also use Modern Admin color palette options, To set
the selected bg color lighten use .bg-* where * is the value of your
selected color from palette, and with that use .bg-lighten-* or .bg-darken-*
class where * is the value between '1-5' of your selected lighten/darken color
from modern color palette. So for color lighten 4 bg class will be .bg-lighten-4.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ****** |
| July | Dooley | july@example.com | ******** |
| July | Dooley | july@example.com | *********** |
Example of Contingent classes for table rows. Contingent classes
are used to color table rows or individual cells. It use Bootstrap by default colors.
| Firstname | Lastname | Password | Status | |
|---|---|---|---|---|
| John | Doe | john@example.com | *********** | Approved |
| Mary | Moe | mary@example.com | ********* | Declined |
| July | Dooley | july@example.com | ****** | Pending |
| Piter | pan | july@example.com | ********* | Information |
| Jon | Snow | july@example.com | *********** | Active |
Modern Admin color palette options can be use also for the contingent classes, To set the
selected bg color lighten use .bg-* where * is the value of your
selected color from palette, and with that use .bg-lighten-* or .bg-darken-*
class where * is the value between '1-5' of your selected lighten/darken color
from modern color palette. So for color lighten 4 bg class will be .bg-lighten-4.
| Firstname | Lastname | Password | Status | |
|---|---|---|---|---|
| John | Doe | john@example.com | *********** | Approved |
| Mary | Moe | mary@example.com | ********* | Declined |
| July | Dooley | july@example.com | ****** | Pending |
| Piter | pan | july@example.com | ********* | Information |
| Jon | Snow | july@example.com | *********** | Active |
Example of custom colors for table rows. Add custom background colors
available in bootstrap brand colors.
To use bootstrap brand color in the table footer, add .bg-* class to the footer
row. All border and text colors will be automatically adjusted.
| Firstname | Lastname | Password | Status | |
|---|---|---|---|---|
| Alexandra | Blake | john@example.com | *********** | Approved |
| Alonso | Lanier | john@example.com | *********** | - |
| Mary | Moe | mary@example.com | ********* | Declined |
| Carol | Sankey | john@example.com | *********** | - |
| July | Dooley | july@example.com | ****** | Pending |
| Andrea | Baker | john@example.com | *********** | - |
| Piter | pan | july@example.com | ********* | Information |
| John | Doe | john@example.com | *********** | - |
| Claire | Burgess | july@example.com | *********** | Active |
Modern Admin color palette options can be use also for the custom row color, To set the selected
bg color lighten use .bg-* where * is the value of your selected
color from palette, and with that use .bg-lighten-* or .bg-darken-*
class where * is the value between '1-5' of your selected lighten/darken color
from modern color palette. So for color lighten 4 bg class will be .bg-lighten-4.
| Firstname | Lastname | Password | Status | |
|---|---|---|---|---|
| Alexandra | Blake | john@example.com | *********** | Approved |
| Alonso | Lanier | john@example.com | *********** | - |
| Mary | Moe | mary@example.com | ********* | Declined |
| Carol | Sankey | john@example.com | *********** | - |
| July | Dooley | july@example.com | ****** | Pending |
| Andrea | Baker | john@example.com | *********** | - |
| Piter | pan | july@example.com | ********* | Information |
| John | Doe | john@example.com | *********** | - |
| Claire | Burgess | july@example.com | *********** | Active |
Example of a table with custom formatting color. Add custom
background colors available in bootstrap
brand colors. To use bootstrap brand color in the table footer, add .bg-*
class to the footer row. All border and text colors will be automatically adjusted.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
Header and footer formatting
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
| Firstname | Lastname | Password |
Modern Admin color palette options can be use also for the custom table formatting, To set the
selected bg color lighten use .bg-* where * is the value of your
selected color from palette, and with that use .bg-lighten-* or .bg-darken-*
class where * is the value between '1-5' of your selected lighten/darken color
from modern color palette. So for color lighten 4 bg class will be .bg-lighten-4.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
Header and footer formatting
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
| Firstname | Lastname | Password |
Table with custom formatting color supports all default table layouts and options. In this example our table displays all possible borders, striped rows and changes background color on row hover.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |
Modern Admin color palette options can be use also for the custom table formatting options, To
set the selected bg color lighten use .bg-* where * is the value of
your selected color from palette, and with that use .bg-lighten-* or .bg-darken-*
class where * is the value between '1-5' of your selected lighten/darken color
from modern color palette. So for color lighten 4 bg class will be .bg-lighten-4.
| Firstname | Lastname | Password | |
|---|---|---|---|
| John | Doe | john@example.com | ******** |
| Mary | Moe | mary@example.com | ***** |
| July | Dooley | july@example.com | ********** |
| Piter | pan | july@example.com | ******** |