Open demo

CSS code

HTML 
<div><span class="lbl">Arrows with a counter</span><nav aria-label="Pagination">
<div class="mini"><a href="#" aria-label="Previous page">‹</a>
<span>Page <b>3</b> of <b>24</b></span>
<a href="#" aria-label="Next page">›</a></div></nav></div>

<div><span class="lbl">Previous / next only</span><nav aria-label="Pagination">
<div class="pn"><a href="#" aria-disabled="true" tabindex="-1">← Previous</a><a href="#">Next →</a></div></nav></div>

<div><span class="lbl">Counter with progress</span><div class="prog">
<div class="mini"><span>Showing <b>21–30</b> of <b>240</b></span></div>
<div class="bar" role="progressbar" aria-label="Results viewed" aria-valuenow="30" aria-valuemin="0" aria-valuemax="240"><i></i></div></div></div>
CSS 
.mini{display:inline-flex;align-items:center;gap:16px;font-size:.88rem;color:#475569}
.mini a{box-sizing:border-box;display:grid;place-items:center;min-width:34px;height:34px;
  border:1px solid #e2e8f0;background:#fff;border-radius:8px;text-decoration:none;font-weight:600;color:#475569;
  transition:background .15s,color .15s}
.mini a:hover{background:#f1f5f9;color:#0f172a}
.mini b{font-weight:600;color:#0f172a}
.pn{display:inline-flex;flex-wrap:wrap;gap:9px}
.pn a{box-sizing:border-box;padding:0 17px;height:38px;border:1px solid #e2e8f0;background:#fff;border-radius:9px;
  display:grid;place-items:center;text-decoration:none;font-size:.87rem;font-weight:600;color:#475569;
  transition:background .15s}
.pn a:hover{background:#f1f5f9}
.pn a[aria-disabled]{opacity:.42;pointer-events:none}
.mini a:focus-visible,.pn a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.prog{width:280px;max-width:100%}
.prog .bar{height:4px;background:#e2e8f0;border-radius:99px;margin-top:11px;overflow:hidden}
.prog .bar i{display:block;height:100%;width:12.5%;background:#2563eb;border-radius:99px}

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

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Arrows with a counter</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-mini mb-0">
  <li class="page-item"><a class="page-link" href="#" aria-label="Previous page">‹</a></li>
  <li class="page-item"><span>Page <b>3</b> of <b>24</b></span></li>
  <li class="page-item"><a class="page-link" href="#" aria-label="Next page">›</a></li>
</ul>
</nav></div>

<div><span class="lbl">Previous / next only</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-pn mb-0">
  <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true" tabindex="-1">← Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">Next →</a></li>
</ul>
</nav></div>

<div><span class="lbl">Counter with progress</span>
<div class="progress-readout">
<span>Showing <b>21–30</b> of <b>240</b></span>
<div class="progress progress-uic" role="progressbar" aria-label="Results viewed" aria-valuenow="30" aria-valuemin="0" aria-valuemax="240">
  <div class="progress-bar" style="width:12.5%"></div>
</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-mini{--bs-pagination-bg:#fff;--bs-pagination-focus-bg:#fff;--bs-pagination-border-color:#e2e8f0;
  --bs-pagination-hover-bg:#f1f5f9;--bs-pagination-hover-border-color:#e2e8f0;--bs-pagination-border-radius:8px;
  gap:16px;font-size:.88rem;color:#475569}
.pagination-mini .page-item .page-link{min-width:34px;height:34px}
.pagination-mini b,.progress-readout b{font-weight:600;color:#0f172a}
.pagination-pn{--bs-pagination-padding-x:17px;--bs-pagination-font-size:.87rem;
  --bs-pagination-bg:#fff;--bs-pagination-focus-bg:#fff;--bs-pagination-border-color:#e2e8f0;
  --bs-pagination-hover-bg:#f1f5f9;--bs-pagination-hover-color:#475569;--bs-pagination-hover-border-color:#e2e8f0;
  --bs-pagination-disabled-color:#475569;--bs-pagination-disabled-bg:#fff;--bs-pagination-disabled-border-color:#e2e8f0;
  gap:9px}
.pagination-pn .page-item.disabled .page-link{opacity:.42}
.progress-readout{width:280px;max-width:100%;font-size:.88rem;color:#475569}
.progress-uic{--bs-progress-height:4px;--bs-progress-bg:#e2e8f0;--bs-progress-border-radius:99px;
  --bs-progress-bar-bg:#2563eb;margin-top:11px}
.progress-uic .progress-bar{border-radius:99px}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Arrows with a counter</span>
<nav aria-label="Pagination">
<div class="inline-flex items-center gap-4 text-[.88rem] text-slate-600">
  <a href="#" aria-label="Previous page" class="grid h-[34px] min-w-[34px] place-items-center rounded-lg border border-slate-200 bg-white font-semibold text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">‹</a>
  <span>Page <b class="font-semibold text-slate-900">3</b> of <b class="font-semibold text-slate-900">24</b></span>
  <a href="#" aria-label="Next page" class="grid h-[34px] min-w-[34px] place-items-center rounded-lg border border-slate-200 bg-white font-semibold text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">›</a>
</div>
</nav></div>

<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Previous / next only</span>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap gap-[9px]">
  <a href="#" aria-disabled="true" tabindex="-1" class="grid h-[38px] place-items-center rounded-[9px] border border-slate-200 bg-white px-[17px] text-[.87rem] font-semibold text-slate-600 hover:bg-slate-100 aria-disabled:pointer-events-none aria-disabled:opacity-[.42] transition-[color,background-color,border-color] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">← Previous</a>
  <a href="#" class="grid h-[38px] place-items-center rounded-[9px] border border-slate-200 bg-white px-[17px] text-[.87rem] font-semibold text-slate-600 hover:bg-slate-100 aria-disabled:pointer-events-none aria-disabled:opacity-[.42] transition-[color,background-color,border-color] motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">Next →</a>
</div>
</nav></div>

<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Counter with progress</span>
<div class="w-[280px] max-w-full text-[.88rem] text-slate-600">
<span>Showing <b class="font-semibold text-slate-900">21–30</b> of <b class="font-semibold text-slate-900">240</b></span>
<div class="mt-[11px] h-1 overflow-hidden rounded-full bg-slate-200" role="progressbar" aria-label="Results viewed" aria-valuenow="30" aria-valuemin="0" aria-valuemax="240">
  <span class="block h-full w-[12.5%] rounded-full bg-brand"></span>
</div>
</div></div>
CSS 
@theme {
  --color-brand: #2563eb;
}

About this set

Three compact alternatives for when a full row of page numbers is too much, either because there are hundreds of pages or because the exact page does not matter. Arrows with a counter places small bordered previous and next buttons around a Page 3 of 24 readout, a good fit for image galleries, search results and document viewers. Previous / next only is a pair of worded buttons for blogs and step-by-step lists, shown with the Previous button disabled as it would be on the first page. Counter with progress pairs a Showing 21–30 of 240 readout with a thin progress rule so readers can see how far through a long list they are. The arrows are real links inside a labelled nav, the disabled button is removed from the tab order and marked aria-disabled, and the progress rule is a progressbar with its value, minimum and maximum exposed. The Bootstrap version uses .pagination and the native .progress component; the Tailwind version uses the aria-disabled variant to fade the inactive button.

What’s included

  • Page X of Y readout between two arrow buttons
  • Worded previous and next pair with a disabled state
  • Result counter with a thin progress rule
  • Progress rule exposed as role="progressbar" with its values
  • Bootstrap version uses .pagination and .progress

Accessibility

The arrow and worded controls sit in a nav labelled Pagination, and the arrow links are named Previous page and Next page. The disabled Previous link has aria-disabled="true" and tabindex="-1" so keyboard users skip it. The progress rule is a progressbar labelled Results viewed with aria-valuenow, and every link shows a 2px focus outline; hover transitions stop under prefers-reduced-motion.

Customise it

Change the #2563eb progress colour and the 34px arrow size on .mini a in plain CSS. In Bootstrap adjust --bs-progress-bar-bg on .progress-uic and the pagination variables on .pagination-mini and .pagination-pn. In Tailwind change --color-brand and the h-[34px] min-w-[34px] classes.