Bootstrap Tables
-
3
Notifications
-
Emay Walter liked your post
10 minutes ago -
Allie Gratershared your post
5 hours ago -
Colin Sikcommented on your post
yesterday - Check all
-
-
2
Jane Cooper
active
-
Hello.how are you?
-
Hi, i'm fine.what about you?
-
I am facing js issue can you help me?
-
Sure, i will help you.
-
-
-
2
-
Wade Warren
UI DesignerBasic Table with Border Bottom Color
Use a class table 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 a class table-inverse 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 class.
Inverse Table with Primary Background
Use a class .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-xsto 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
Dashed border use class .table-dashed , for Dotted border use class.table-dotted, for Double border use class.table-Double