Open demo

CSS code

HTML 
<div><span class="lbl">Data table footer</span><div class="tbl">
<div class="tbl-scroll" tabindex="0" role="region" aria-label="Invoices">
<table><thead><tr><th scope="col">Invoice</th><th scope="col">Client</th><th scope="col">Status</th><th scope="col">Amount</th></tr></thead>
<tbody>
<tr><td>INV-2418</td><td>Northwind</td><td>Paid</td><td>£1,240.00</td></tr>
<tr><td>INV-2419</td><td>Kestrel Ltd</td><td>Pending</td><td>£860.00</td></tr>
<tr><td>INV-2420</td><td>Halden & Co</td><td>Paid</td><td>£3,115.50</td></tr>
</tbody></table>
</div>
<div class="foot">
<div class="left"><label>Rows per page
<select><option>10</option><option selected>25</option><option>50</option></select></label>
<span>26–50 of 248</span></div>
<nav aria-label="Pagination"><div class="pg">
<a href="#" aria-label="Previous page">‹</a><a href="#">1</a><a href="#" aria-current="page">2</a><a href="#">3</a><span class="gap">…</span><a href="#">10</a><a href="#" aria-label="Next page">›</a></div></nav>
</div></div></div>
CSS 
.pg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none}
.pg a{box-sizing:border-box;display:grid;place-items:center;min-width:38px;height:38px;padding:0 11px;
  text-decoration:none;font-size:.88rem;font-weight:600;color:#475569;border-radius:9px;
  transition:background .15s,color .15s,border-color .15s}
.pg a:hover{background:#e2e8f0;color:#0f172a}
.pg a:focus-visible,.foot select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.pg .gap{min-width:26px;color:#64748b;display:grid;place-items:center;height:38px;font-weight:600}
.pg a[aria-current]{background:#2563eb;color:#fff}

.tbl{background:#fff;border:1px solid #e2e8f0;border-radius:13px;overflow:hidden;width:100%}
.tbl-scroll{overflow-x:auto}
.tbl-scroll:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.tbl table{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{text-align:left;white-space:nowrap;padding:11px 16px;border-bottom:1px solid #f1f5f9}
.tbl th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#64748b;background:#f8fafc}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;
  flex-wrap:wrap}
.foot .left{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#64748b}
.foot select{font:inherit;font-size:.82rem;padding:6px 9px;border:1px solid #8491a5;border-radius:7px;
  background:#fff;color:#0f172a}
.foot .pg a{min-width:32px;height:32px;font-size:.82rem;border:1px solid #e2e8f0;background:#fff}
.foot .pg .gap{height:32px}
.foot .pg a[aria-current]{background:#2563eb;border-color:#2563eb;color:#fff}

@media(prefers-reduced-motion:reduce){.pg a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Data table footer</span>
<div class="card card-table overflow-hidden">
<div class="table-responsive" tabindex="0" role="region" aria-label="Invoices">
<table class="table table-uic mb-0">
<thead><tr><th scope="col">Invoice</th><th scope="col">Client</th><th scope="col">Status</th><th scope="col">Amount</th></tr></thead>
<tbody>
<tr><td>INV-2418</td><td>Northwind</td><td>Paid</td><td>£1,240.00</td></tr>
<tr><td>INV-2419</td><td>Kestrel Ltd</td><td>Pending</td><td>£860.00</td></tr>
<tr><td>INV-2420</td><td>Halden & Co</td><td>Paid</td><td>£3,115.50</td></tr>
</tbody></table>
</div>
<div class="table-foot d-flex flex-wrap align-items-center justify-content-between gap-3">
<div class="d-flex align-items-center gap-2"><label>Rows per page
  <select class="form-select form-select-sm"><option>10</option><option selected>25</option><option>50</option></select></label>
<span>26–50 of 248</span></div>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-bordered pagination-table mb-0">
  <li class="page-item"><a class="page-link" href="#" aria-label="Previous page">‹</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link active" href="#" aria-current="page">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item disabled page-gap"><span class="page-link">…</span></li>
  <li class="page-item"><a class="page-link" href="#">10</a></li>
  <li class="page-item"><a class="page-link" href="#" aria-label="Next page">›</a></li>
</ul>
</nav>
</div>
</div></div>
CSS 
.pagination-uic{
  --bs-pagination-padding-x:11px;--bs-pagination-padding-y:0;--bs-pagination-font-size:.88rem;
  --bs-pagination-color:#475569;--bs-pagination-bg:transparent;
  --bs-pagination-border-width:1px;--bs-pagination-border-color:transparent;--bs-pagination-border-radius:9px;
  --bs-pagination-hover-color:#0f172a;--bs-pagination-hover-bg:#e2e8f0;--bs-pagination-hover-border-color:transparent;
  --bs-pagination-focus-color:#475569;--bs-pagination-focus-bg:transparent;--bs-pagination-focus-box-shadow:none;
  --bs-pagination-active-color:#fff;--bs-pagination-active-bg:#2563eb;--bs-pagination-active-border-color:#2563eb;
  --bs-pagination-disabled-color:#64748b;--bs-pagination-disabled-bg:transparent;--bs-pagination-disabled-border-color:transparent;
  flex-wrap:wrap;align-items:center;gap:6px}
.pagination-uic .page-item .page-link{display:grid;place-items:center;min-width:38px;height:38px;font-weight:600;
  margin-left:0;border-radius:var(--bs-pagination-border-radius)}
.pagination-uic .page-link:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.pagination-uic .page-gap .page-link{min-width:26px;padding:0;background:transparent;border-color:transparent}
.pagination-bordered{--bs-pagination-bg:#fff;--bs-pagination-focus-bg:#fff;
  --bs-pagination-border-color:#e2e8f0;--bs-pagination-hover-border-color:#e2e8f0}
.card-table{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:13px}
.table-uic{--bs-table-color:#1e293b;--bs-table-border-color:#f1f5f9;font-size:.86rem}
.table-uic>:not(caption)>*>*{padding:11px 16px}
.table-uic thead{--bs-table-bg:#f8fafc;--bs-table-color:#64748b}
.table-uic th,.table-uic td{white-space:nowrap}
.table-responsive:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.table-uic th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.table-foot{padding:12px 16px;font-size:.82rem;color:#64748b}
.table-foot .form-select{display:inline-block;width:auto;margin-left:4px;font-size:.82rem;border-color:#8491a5;border-radius:7px;color:#0f172a}
.table-foot .form-select:focus-visible{outline:2px solid #2563eb;outline-offset:2px;box-shadow:none}
.pagination-table{--bs-pagination-font-size:.82rem}
.pagination-table .page-item .page-link{min-width:32px;height:32px}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Data table footer</span>
<div class="w-full overflow-hidden rounded-[13px] border border-slate-200 bg-white">
<div class="overflow-x-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand" tabindex="0" role="region" aria-label="Invoices">
<table class="w-full border-collapse text-[.86rem]">
<thead><tr><th scope="col" class="whitespace-nowrap border-b border-slate-100 bg-slate-50 px-4 py-[11px] text-left text-[.72rem] tracking-[.08em] text-slate-500 uppercase">Invoice</th><th scope="col" class="whitespace-nowrap border-b border-slate-100 bg-slate-50 px-4 py-[11px] text-left text-[.72rem] tracking-[.08em] text-slate-500 uppercase">Client</th><th scope="col" class="whitespace-nowrap border-b border-slate-100 bg-slate-50 px-4 py-[11px] text-left text-[.72rem] tracking-[.08em] text-slate-500 uppercase">Status</th><th scope="col" class="whitespace-nowrap border-b border-slate-100 bg-slate-50 px-4 py-[11px] text-left text-[.72rem] tracking-[.08em] text-slate-500 uppercase">Amount</th></tr></thead>
<tbody>
<tr><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">INV-2418</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Northwind</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Paid</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">£1,240.00</td></tr>
<tr><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">INV-2419</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Kestrel Ltd</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Pending</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">£860.00</td></tr>
<tr><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">INV-2420</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Halden & Co</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">Paid</td><td class="whitespace-nowrap border-b border-slate-100 px-4 py-[11px]">£3,115.50</td></tr>
</tbody></table>
</div>
<div class="flex flex-wrap items-center justify-between gap-4 px-4 py-3">
<div class="flex items-center gap-2.5 text-[.82rem] text-slate-500"><label>Rows per page
  <select class="ml-1 rounded-[7px] border border-[#8491a5] bg-white px-[9px] py-1.5 text-[.82rem] text-slate-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"><option>10</option><option selected>25</option><option>50</option></select></label>
<span>26–50 of 248</span></div>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap items-center gap-1.5">
  <a href="#" aria-label="Previous page" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-slate-200 bg-white text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">‹</a>
  <a href="#" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-slate-200 bg-white text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">1</a>
  <a href="#" aria-current="page" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-brand bg-brand text-white">2</a>
  <a href="#" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-slate-200 bg-white text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">3</a>
  <span class="grid h-8 min-w-[26px] place-items-center font-semibold text-slate-500">…</span>
  <a href="#" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-slate-200 bg-white text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">10</a>
  <a href="#" aria-label="Next page" class="grid h-8 min-w-8 place-items-center rounded-[9px] border px-[11px] text-[.82rem] font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border-slate-200 bg-white text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">›</a>
</div>
</nav>
</div>
</div></div>
CSS 
@theme {
  --color-brand: #2563eb;
}

About this set

Pagination where it is used most: in the footer of a data table. The demo shows an invoice table in a rounded card with a footer that holds a Rows per page select and a 26–50 of 248 range readout on the left, and compact 32px bordered page links aligned to the right. The footer uses flex with wrapping, so on a narrow screen the page links drop below the rows-per-page control rather than squeezing it. The table itself sits in a horizontally scrollable region, so its columns stay readable on a phone instead of being clipped by the card; the region is focusable and labelled so keyboard users can scroll it too. Column headers are marked with scope=”col”, the select is wrapped in its label, and the page links sit in a nav labelled Pagination with aria-current on the active page. The Bootstrap version combines .card, .table, .table-responsive, .form-select-sm and .pagination, restyled through their CSS variables; the Tailwind version builds the same card, table and footer with utility classes.

What’s included

  • Rows-per-page select and range readout
  • Compact 32px page links aligned right
  • Footer wraps cleanly on narrow screens
  • Horizontally scrollable, keyboard-focusable table region
  • Bootstrap version uses .card, .table, .table-responsive and .pagination

Accessibility

Headers use scope="col", the rows-per-page select is wrapped in its label, and the page links sit in a nav labelled Pagination with aria-current="page" on the active page. The scrollable table wrapper has tabindex="0", role="region" and an aria-label, so it can be scrolled from the keyboard. Links, the select and the region show a 2px blue focus outline, header text meets 4.5:1 contrast, and transitions stop under prefers-reduced-motion.

Customise it

In plain CSS change the #2563eb current page, the 32px link size in .foot .pg a and the #e2e8f0 card border on .tbl. In Bootstrap edit --bs-card-border-color on .card-table, --bs-table-border-color on .table-uic and the pagination variables. In Tailwind swap --color-brand, h-8 min-w-8 and border-slate-200.