Don't Miss Out! Our new update has been released.
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 |
Bootstrap Table With Variants
Use table class to any table, and border-bottom-* class for Border bottom color
.
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 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.
Striped Columns
Use table-striped-columns to add zebra-striping to any table column.
Active Tables
Highlight a table row or cell by adding a table-active class.
Table Borders
Add table-bordered for borders on all sides of the table and cells.
Table Without Borders
Add table-borderless for a table without borders.
Vertical alignment
Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the vertical align classes to re-align where needed.
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
Anatomy (Table Head)
Similar to tables and dark tables, use the modifier classes table-light or table-dark to make <thead>s appear light or dark gray.
Table Foot
To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our CSS. Since we need to target all the tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it.
Table Group Dividers
Add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).
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.