Default styling
Example of a table with default styling. By default any table
with
.table class has
transparent background color and grey border color.
Table header and table footer have the same styling: transparent
background, semibold font weight, darker horizontal border and
the same height as table body cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
| # | First Name | Last Name | Username |
Table header styling
Example of a custom table
header styling. Table
header supports default contextual and custom background colors
available in
custom color system. To use
custom color in the table header, add .bg-* class
to the header row. All border and text colors will be
automatically adjusted.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Table footer styling
Example of a custom table
footer styling. Table
footer supports custom background colors available in
custom color system. To use
custom color in the table footer, add .bg-* class
to the footer row. All border and text colors will be
autocatically adjusted.
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
| # | First Name | Last Name | Username |
|---|
Contextual and custom colors
Example of contextual classes for table
rows.
Contextual classes are used to color table rows or individual
cells. These classes come with Bootstrap by default and have
much lighter colors than in custom template colors.
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 05/04/2012 | Information |
| 4 | TB - Monthly | 05/04/2012 | Information |
Custom row colors
Example of
custom colors for table rows. Add one of
the custom colors from the template color system to any table
row for additional highlighting. Unlike contextual classes,
these colors are much stronger. View all
available colors here →.
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
| 4 | TB - Monthly | 05/04/2012 | Information |
| 4 | TB - Monthly | 05/04/2012 | Information |
Dark table
Example of a table with
dark background color.
Limitless includes a base class for all dark and solid tables -
.table-dark that needs to be added to
.table container. This class inverts all colors in
the light theme and enables dark table mode in light theme.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Dark table options
Table with custom background 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. All border, row and text colors are adjusted
automatically.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Color combination
This example demonstrates
combination of colors,
added to the table and table header. Here we have one general
color added to the <table> and highlighted table
header with another color added to the header row.
Body and footer rows are also support this option.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |
Inside colored card
Example of a basic table placed inside the card with custom
background color. This panel doesn't have any color classes and
automatically inherits border and text colors from the colored
panel styles. Color combination are also supported.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| 4 | Franklin | Morrison | @Frank |