Bootstrap 5.3 Table Examples
Basic Table
| # |
First |
Last |
Handle |
| 1 |
Mark |
Otto |
@mdo |
| 2 |
Jacob |
Thornton |
@fat |
| 3 |
Larry the Bird |
@twitter |
Striped Rows
| # |
Product |
Price |
Quantity |
| 1 |
Widget |
$19.99 |
100 |
| 2 |
Gadget |
$29.99 |
50 |
| 3 |
Gizmo |
$9.99 |
200 |
Hoverable + Bordered
| ID |
Name |
Status |
Actions |
| 1001 |
Project Alpha |
Active |
|
| 1002 |
Project Beta |
Pending |
|
| 1003 |
Project Gamma (Active Row) |
Inactive |
|
Row Color Variants
| Primary |
Example row |
| Secondary |
Example row |
| Success |
Example row |
| Danger |
Example row |
| Warning |
Example row |
| Info |
Example row |
| Light |
Example row |
| Dark |
Example row |
Small (Compact) Table
| # |
Item |
Qty |
| 1 | Item A | 10 |
|---|
| 2 | Item B | 20 |
|---|
| 3 | Item C | 30 |
|---|
| 4 | Item D | 40 |
|---|
| 5 | Item E | 50 |
|---|
Responsive Table
Scroll horizontally on smaller screens
| # |
Column 1 |
Column 2 |
Column 3 |
Column 4 |
Column 5 |
Column 6 |
Column 7 |
Column 8 |
| 1 |
Data |
Data |
Data |
Data |
Data |
Data |
Data |
Data |
Vertical Alignment
| Heading |
Heading |
Heading |
| This cell contains a lot of text to demonstrate vertical alignment in Bootstrap tables when cells have varying content heights. |
Aligned middle (default) |
Aligned top |
Table with Caption
List of registered users
| # |
User |
Email |
| 1 |
John Doe |
john@example.com |
Caption Top
List of registered users (caption on top)
| # |
User |
Email |
| 1 |
Jane Smith |
jane@example.com |
| 2 |
Bob Johnson |
bob@example.com |
Table Head Variants
Light Header
| # |
Name |
Role |
| 1 |
Alice |
Developer |
| 2 |
Bob |
Designer |
Dark Header
| # |
Name |
Role |
| 1 |
Charlie |
Manager |
| 2 |
Diana |
Analyst |
Table Group Divider
Use .table-group-divider to add a thicker border between sections.
| # |
Item |
Price |
| 1 |
Widget A |
$25.00 |
| 2 |
Widget B |
$30.00 |
| 3 |
Widget C |
$15.00 |
Table with Footer
| Description |
Quantity |
Price |
Total |
| Product A |
2 |
$10.00 |
$20.00 |
| Product B |
1 |
$25.00 |
$25.00 |
| Product C |
3 |
$5.00 |
$15.00 |
| Subtotal |
$60.00 |
| Tax (10%) |
$6.00 |
| Grand Total |
$66.00 |
Nested Tables
Nested tables do not inherit parent styles.
| Category |
Items |
| Electronics |
| Name |
Price |
| Laptop |
$999 |
| Phone |
$699 |
|
| Accessories |
| Name |
Price |
| Keyboard |
$79 |
| Mouse |
$49 |
|