Don't Miss Out! Out new update has been release.
Bootstrap Basic Tables
Basic Table with Border Bottom Color
Use table class to any table, and border-bottom-* class for Border bottom color
.
| Id | First Name | Last Name | Username | Designation | Company | Language | Country |
|---|---|---|---|---|---|---|---|
| 1 |  Ram Jacob |
Wolfe | RamJacob@twitter | Developer | Apple Inc. | Php | IND |
| 2 |  John Deo |
Gummer | JohnDeo@twitter | Designer | Hewlett packard | Html | US |
| 3 |  Elana John |
Cazale | ElanaJohn@twitter | Designer | Microsoft | Pug | UK |
| 4 |  Meryl Streep |
Roberts | MerylStreep@twitter | Developer | Tata Ltd. | React | IDN |
| 5 |  Emma Stone |
Stone | EmmaStone@twitter | Developer | Wipro Ltd. | Vue | IRN |
| 6 |  Eliana Jons |
Jons | ElianaJons@twitter | Developer | Info Ltd. | Vue | IRN |
Inverse Table
Use table-inverse class inside table element.
Hoverable Rows with Horizontal Border
Hoverable row use a class table-hover and for horizontal border use a class table-border-horizontal , solid border use a class border-solid, table classes.
Inverse Table with Primary Background
Use bg-info, bg-success, bg-warning and bg-danger classes with light text on dark backgrounds inside table element.
To set the light background color use bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be bg-teal.
Caption
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
Table Head Options
Similar to tables , use the modifier classes table-[color] to make thead appear in any color.
Striped Row with Inverse Table
Use table-striped to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
Breakpoint Specific
Use table-responsive"❴-sm|-md|-lg|-xl|-xxl❵" functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
Responsive Tables with Light Background
A table-responsive , light-card inside table element.
Sizing Tables
Example of extra large table, Add table-xl class to the table , Large table Add table-lg , Default table Add table-de , Small table Add table-sm , Extra Small table Add table-xs to create a table.
Custom Table Color with Hover and Stripped
Use class table-hover, table-striped table-*table-info , table-success , table-success , table-info , table-danger , table-primary , table-secondary , table-light , table-active inside table element.
Dashed Border
Use table-dashed class for dash border for dotted border use class table-dotted for double border use class table-double.