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
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless