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