Border options
Examples of <tbody> borders
Horizontal borders
Example of horizontal table borders. This is a default table border style attached to .table class. All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using .border utility class added to the container with .table-responsive class.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Vertical borders
Example of vertical table borders. This custom table border layout displays vertical borders only. However border between table head and table body is also visible for better visual separation. To use this layout add .table-columned class to the table with .table class.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Both borders
Example of a fully bordered table. Here we have both vertical and horizontal borders displayed. All borders have the same color, table head is visually divided from the table body with a bit darker border color. To use this layout add .table-bordered class to the table with .table class.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Borderless table
Example of borderless table. Here all border are hidden, except border between table head and table body, table body and table footer, this border is added to all table layouts and is always visible. To hide all borders from the table, add .table-borderless class to the table with .table class.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Table head borders
Basic and custom <thead> row borders
Default border
Example of a default thead border. This border has 1px width and slightly darker color than other borders for better visual separation of table head and table body. Vertical cell borders in the table head always have the same color as borders in table body.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Solid border
Example of a solid border inside table head. This border inherits all styling options from the default border style, the only difference is it has 2px width. Sometimes it could be useful for visual separation and addition highlight. To use this border add .table-border-solid to the table head row.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Double border
Example of a double border inside table head. This border has 3px width, double style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-double to the table head row.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Border color
Example of a table head border with custom color. According to the custom color system options, you can set any of predefined colors by adding .border-bottom-* class to the table head row. This technique works with all border styles demonstrated above. You can check all available colors here →.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Table body borders
Custom <tbody> border styling
Default border
Example of default borders inside table body. Basic table body borders have the same light grey color, style and width. Since this is a default table body border styling, rows don't require any additional classes and work in default markup with .table classes added to the table.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Solid border
Example of a solid borders inside table body. This border inherits all styling options from the default border style, the only difference is it has 2px width. To use this border add .table-border-solid to the table body row. This border style works only with horizontal borders.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Double border
Example of double borders inside table body. This has 3px width and double style. Visually it separates rows and the table looks more like a list of rows. To use this border add .border-double to the table body row. This border style works only with horizontal borders.
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
4 Franklin Morrison @Frank
Dashed border
Example of dashed borders inside table body. This border perfectly fits when you need to highlight incomplete or extra rows. Dashed border style works only with horizontal borders and only in table body, it is mostly useless in table head. To use this border style add .table-border-dashed to the table body row.
# 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