COLOURcode

Bootstrap tables - standalone, in wells, in panels, coloured etc.

Summary of features

Add contextual and/or associational hints to your data tables by assigning a single colour class to either the table element, or its containing panel e.g. red for financial data or green for customer data. When applied, this single class will change the colouring of the table's caption, header, footer, borders, striping and hover - even the colour of default buttons positioned within the table's elements. Choose from twelve colours (ten named and two for branding), each of which can be altered via a single SASS variable.

At a glance

  • Add contextual and/or associational colouring to your tables.
  • Style all components of a table with a single colour class.
  • Choose from up to ten named and two branding colour-sets.
  • All colour-sets based on single SASS-variable base colours.
  • Class only needs to be applied to table or its containing panel.

Tables can be styled with .table-brand1 or nestled within .panel-brand1

Table with brand1 class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with brand1 class applied .table.table-brand1

Table in panel with brand1 class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with brand1 class applied to panel only .panel.panel-brand1

Tables can be styled with .table-brand2 or nestled within .panel-brand2

Table with brand2 class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with brand2 class applied .table.table-brand2

Table in panel with brand2 class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with brand2 class applied to panel only .panel.panel-brand2

Tables can be styled with .table-blue or nestled within .panel-blue

Table with blue class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with blue class applied .table.table-blue

Table in panel with blue class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with blue class applied to panel only .panel.panel-blue

Tables can be styled with .table-yellow or nestled within .panel-yellow

Table with yellow class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with yellow class applied .table.table-yellow

Table in panel with yellow class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with yellow class applied to panel only .panel.panel-yellow

Tables can be styled with .table-red or nestled within .panel-red

Table with red class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with red class applied .table.table-red

Table in panel with red class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with red class applied to panel only .panel.panel-red

Tables can be styled with .table-green or nestled within .panel-green

Table with green class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with green class applied .table.table-green

Table in panel with green class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with green class applied to panel only .panel.panel-green

Tables can be styled with .table-orange or nestled within .panel-orange

Table with orange class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with orange class applied .table.table-orange

Table in panel with orange class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with orange class applied to panel only .panel.panel-orange

Tables can be styled with .table-purple or nestled within .panel-purple

Table with purple class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with purple class applied .table.table-purple

Table in panel with purple class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with purple class applied to panel only .panel.panel-purple

Tables can be styled with .table-gold or nestled within .panel-gold

Table with gold class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with gold class applied .table.table-gold

Table in panel with gold class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with gold class applied to panel only .panel.panel-gold

Tables can be styled with .table-bronze or nestled within .panel-bronze

Table with bronze class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with bronze class applied .table.table-bronze

Table in panel with bronze class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with bronze class applied to panel only .panel.panel-bronze

Tables can be styled with .table-silver or nestled within .panel-silver

Table with silver class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with silver class applied .table.table-silver

Table in panel with silver class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with silver class applied to panel only .panel.panel-silver

Tables can be styled with .table-grey or nestled within .panel-grey

Table with grey class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with grey class applied .table.table-grey

Table in panel with grey class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with grey class applied to panel only .panel.panel-grey

Tables can be styled with .table-default or nestled within .panel-default

Table with default class applied

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table with default class applied .table.table-default

Table in panel with default class applied to panel only

The Big Bang Theory - main characters:
# Firstname Surname Username IQ
1 Sheldon Cooper t.physicist 187
2 Leonard Hofstadter e.physicist 173
3 Howard Wolowitz a.engineer 162
4 Rajesh Koothrappali p.astrophysist 175
5 Penny - unknown - pharm.sales 100
Total IQ = 797

Table in panel with default class applied to panel only .panel.panel-default

Basic table responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table

Striped rows responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-striped

Bordered table responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-bordered

Hover rows responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-hover

Condensed table responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-condensed

Condensed striped hover table responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-condensed.table-striped.table-hover

Contextual classes responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: tr.success tr.active tr.info etc.

Contextual classes hover responsive, with caption and footer

Top five all-time best selling albums worldwide:
# Title Artist Year Sales (m)
1 Thriller Michael Jackson 1982 110
2 Back in Black AC/DC 1980 49
3 Dark Side of the Moon Pink Floyd 1973 43
4 Bat out of Hell Meat Loaf 1977 43
5 Greatest Hits 1971-75 Eagles 1976 42
Total Sales (millions) = 287

Markup: .table.table-hover tr.success etc.

Table within a modal