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 |