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 | ******** |