Tables styling

  1. Home
  2. Tables
  3. Table Styling

Default styling

Example of a table with bootstrap default styling. By default any table with .table class has transparent background color.

Firstname Lastname Email Password
John Doe john@example.com ********
Mary Moe mary@example.com *****
July Dooley july@example.com **********
Piter pan july@example.com ********

Table header styling

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 Email 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 Email Password
John Doe john@example.com ********
Mary Moe mary@example.com ******
July Dooley july@example.com ********
July Dooley july@example.com ***********

Contingent classes

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

Custom row colors

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

Custom table formatting

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 Email 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 Email Password
John Doe john@example.com ********
Mary Moe mary@example.com *****
July Dooley july@example.com **********
Piter pan july@example.com ********
Firstname Lastname Email 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 Email 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 Email Password
John Doe john@example.com ********
Mary Moe mary@example.com *****
July Dooley july@example.com **********
Piter pan july@example.com ********
Firstname Lastname Email Password

Table formatting options

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 Email 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 Email Password
John Doe john@example.com ********
Mary Moe mary@example.com *****
July Dooley july@example.com **********
Piter pan july@example.com ********