Tables
A plain HTML table from the tutorial looks bare: no padding, no lines. The table class on a <table> tag immediately gives it cell padding and thin row separators, and extra classes add stripes, hover and borders. In the admin dashboard a table is the main way to show a list of orders or users.
A basic table
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
<thead>
<tr><th>#</th><th>Customer</th><th>Plan</th><th>Amount</th></tr>
</thead>
<tbody>
<tr><td>101</td><td>Anna Smith</td><td>Team</td><td>$90</td></tr>
<tr><td>102</td><td>Oleg Petrov</td><td>Free</td><td>$0</td></tr>
<tr><td>103</td><td>Maria Kim</td><td>Team</td><td>$45</td></tr>
</tbody>
</table>A full-width orders table: a bold header, padded cells and lines between rows.
Style variants
The classes are added to table and can be combined:
| Class | What it does |
|---|---|
table-striped | Alternates row backgrounds |
table-hover | Highlights the row under the cursor |
table-bordered | Borders on all cells |
table-borderless | No lines |
table-sm | Compact: half the cell padding |
align-middle | Cell content vertically centered |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-striped table-hover table-sm">
<thead class="table-light">
<tr><th>User</th><th>Tasks</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>Anna</td><td>12</td><td>Active</td></tr>
<tr class="table-warning"><td>Oleg</td><td>3</td><td>Unpaid</td></tr>
<tr><td>Maria</td><td>8</td><td>Active</td></tr>
</tbody>
</table>A striped compact table with a light gray header; Oleg's row is yellow, and the row under the cursor is highlighted.
Colored rows and cells
The table-{color} classes color a <tr> row or a single cell: table-danger for overdue, table-success for paid. The whole table can be dark: table table-dark.
Scrolling on a phone
A wide table does not fit a narrow screen. Wrap it in table-responsive — the block gets horizontal scrolling, and the page does not shift sideways:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="table-responsive">
<table class="table text-nowrap">
<thead>
<tr><th>#</th><th>Customer</th><th>Email</th><th>Plan</th><th>Payment date</th><th>Amount</th></tr>
</thead>
<tbody>
<tr><td>101</td><td>Anna Smith</td><td>anna@example.com</td><td>Team</td><td>2026-10-02</td><td>$90</td></tr>
</tbody>
</table>
</div>Narrow the window and the table gets its own scrollbar. The text-nowrap class forbids wrapping text in cells.
Common mistake
Putting table-responsive on the <table> tag itself. The class only works on a wrapper div around the table: the wrapper is what adds scrolling. If the table still sticks out of a phone screen, check that the wrapper is there.