Tables & pagination
The core of every BMS index screen. One .table base, opt-in modifiers for stripes, density, lines, sticky headers, sorting, and selection — plus the pagination vocabulary that lives in card footers.
Anatomy
| Service | Environment | Status | Uptime | Actions |
|---|---|---|---|---|
| bms-cloud | production | running | 99.98% | |
| bms-audit | production | running | 99.95% | |
| bms-portal | staging | degraded | 97.20% | |
| bms-cups | production | running | 99.99% | |
| bms-docs | development | stopped | — |
<div class="table-wrap">
<table class="table table-hover">
<thead><tr><th>Service</th>…</tr></thead>
<tbody>
<tr>
<td class="table-lead">bms-cloud</td>
<td><span class="badge badge-success">running</span></td>
</tr>
</tbody>
</table>
</div>
Striped rows
.table-striped
| Backup job | Schedule | Size |
|---|---|---|
| cloud-db-primary | hourly | 1.2 GB |
| audit-db | daily | 480 MB |
| portal-uploads | daily | 6.8 GB |
| ops-config | weekly | 12 MB |
| cups-spool | daily | 220 MB |
Dense with vertical lines
.table-dense.table-lined
| Queue | Ready | Busy | Failed |
|---|---|---|---|
| default | 412 | 8 | 0 |
| mailers | 36 | 2 | 0 |
| exports | 9 | 4 | 1 |
| webhooks | 128 | 12 | 3 |
| low | 1043 | 1 | 0 |
Sortable headings, sticky header
.table-sticky + .table-sort
| app-01 | syd-1 | 34% | 61% |
| app-02 | syd-1 | 41% | 58% |
| app-03 | syd-2 | 12% | 44% |
| db-01 | syd-1 | 68% | 83% |
| db-02 | syd-2 | 22% | 71% |
| jobs-01 | syd-1 | 55% | 49% |
| jobs-02 | syd-2 | 47% | 52% |
| proxy-01 | syd-1 | 9% | 31% |
| proxy-02 | syd-2 | 11% | 29% |
| cache-01 | syd-1 | 18% | 76% |
Selectable rows
2 selected| User | Role | Last sign-in | |
|---|---|---|---|
| Alex Rivera | admin | 2 hours ago | |
| Sam Whitford | operator | yesterday | |
| Jo Tanaka | operator | 3 days ago | |
| Priya Nair | viewer | last week |
Grouped rows with summary
.table-group-row + tfoot
| Line item | Environment | Monthly cost |
|---|---|---|
| Compute | ||
| App servers ×4 | production | $412.00 |
| Job runners ×2 | production | $186.00 |
| Storage | ||
| Database volumes | production | $94.50 |
| Backup archive | all | $31.20 |
| Total | $723.70 | |
Pagination
Card footer with page buttons
Showing 21–30 of 112
Centered page numbers
Simple footer
Page 2 of 8
<nav class="pagination" aria-label="Pagination"> <a href="#" class="page-btn">1</a> <a href="#" class="page-btn" aria-current="page">2</a> <span class="page-gap">…</span> <a href="#" class="page-btn">8</a> </nav>