Tables
Default Table
This is just a Simple Bootstrap style table. To use this just apply .table class to your table element.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
Bordered Table
To use this just apply .table , .table-bordered classes to your table element to make it bordered.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
Hover Table
To use this just apply .table , .table-hover classes to your table element to make it hoverable.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
Striped Table
To use this just apply .table , .table-bordered classes to your table element to make it striped.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
Small Table
To use this just apply .table , .table-sm class to your table element to make it small.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
Contextual Classes
To use this just apply .table-active , .table-success , .table-warning , .table-danger , .table-info classes on the row or cells.
| # | Product Name | Status | Price | MRP |
|---|---|---|---|---|
| 1 | Colgate Toothpaste | in stock | $5 | $6 |
| 2 | Pink T-Shirt | out of stock | $20 | $40 |
| 3 | Nike Running Shoes | in stock | $100 | $120 |
| 4 | Reebok Casual Shoes | out of stock | $70 | $80 |
| 5 | Titan Raga Premium Watch | in stock | $100 | $120 |
| 6 | Philips Hair Remover | out of stock | $50 | $70 |
