Bootstrap 5 dark tables are ideal for admin dashboards and dark-themed applications. This page covers 4 dark table patterns — full dark, dark header, custom brand dark and striped dark.
Key Classes Reference
| Class | What It Does |
|---|---|
.table-dark | Full dark table |
thead.table-dark | Dark header only |
.table-striped | Alternating row colors |
.table-hover | Row highlight on hover |
.table-bordered | Cell borders |
data-bs-theme="dark" | Auto dark mode for all tables |
1. Bootstrap 5 Full Dark Table
Complete dark table using table-dark class on the table element.
2. Bootstrap 5 Dark Header, Light Body Table
Dark thead with table-dark on only the header row — light body below.
3. Custom Dark Table (Brand Colors)
Fully custom dark table with brand color header using custom CSS instead of Bootstrap's table-dark.
4. Bootstrap 5 Dark Striped Table
Dark table with alternating row colors using table-dark and table-striped together.
Frequently Asked Questions
Add table-dark to the table element: <table class='table table-dark'>. This applies Bootstrap's dark color scheme to the entire table including header, body and borders. For only the header use thead.table-dark instead.
Combine freely: table-dark table-striped table-hover table-bordered. table-striped adds alternating dark row colors. table-hover adds a darker hover state. table-bordered adds borders between cells. All work with table-dark.
With Bootstrap 5.3 dark mode via data-bs-theme='dark' on the html element, the default table (without table-dark) automatically adapts to dark colors. You can still use table-dark explicitly for a darker variant within an already-dark page.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.