Tables are essential for displaying structured data. Bootstrap makes working with tables easier by offering predefined classes that add style, responsiveness, and interactive features without writing extra CSS.
With just a few class names, you can convert plain HTML tables into clean, readable, and mobile-friendly data displays.
Basic Table
To start using Bootstrap tables, wrap your <table> element with the .table class:
This basic table will be cleanly styled with spacing, borders, and readable text.
Table Variants (Contextual Classes)
Bootstrap offers color-coded row styling to indicate different statuses or categories using these classes:
| Class | Description |
|---|---|
.table-primary |
Light blue background |
.table-success |
Green background (success) |
.table-danger |
Red background (error) |
.table-warning |
Yellow background (warning) |
.table-info |
Cyan background (info) |
Example:
Striped, Hoverable & Bordered Tables
Striped Rows
Adds alternating row colors for easier reading.
Hover Highlighting
Adds a hover effect on rows for better interactivity.
Bordered Table
Adds borders around all cells and rows.
Responsive Tables
For smaller screens, wrap the <table> in a .table-responsive container to make it scrollable horizontally:
You can also use breakpoint-specific responsive classes like .table-responsive-sm, .table-responsive-md, etc., to control when the responsiveness kicks in.
Small Tables & Alignment
Small Table
Use .table-sm to make tables more compact:
Align Text in Table Cells
You can use Bootstrap’s text utility classes inside table cells:
✅ Conclusion
Bootstrap’s table classes help you create beautiful, readable, and responsive tables without writing any CSS. With just a few utility classes, you can add contextual coloring, borders, hover states, and responsive behavior to your tables effortlessly.
