Open demo

CSS code

HTML 
<div><span class="lbl">Plain</span><nav aria-label="Pagination">
<div class="pg"><a href="#" aria-label="Previous page">‹</a><a href="#">1</a><a href="#">2</a><a href="#" aria-current="page">3</a><a href="#">4</a><a href="#">5</a><span class="gap">…</span><a href="#">24</a><a href="#" aria-label="Next page">›</a></div></nav></div>

<div><span class="lbl">Bordered</span><nav aria-label="Pagination">
<div class="pg b"><a href="#" aria-label="Previous page">‹</a><a href="#">1</a><a href="#">2</a><a href="#" aria-current="page">3</a><a href="#">4</a><a href="#">5</a><span class="gap">…</span><a href="#">24</a><a href="#" aria-label="Next page">›</a></div></nav></div>

<div><span class="lbl">Soft current page</span><nav aria-label="Pagination">
<div class="pg soft b"><a href="#" aria-label="Previous page">‹</a><a href="#">1</a><a href="#">2</a><a href="#" aria-current="page">3</a><a href="#">4</a><a href="#">5</a><span class="gap">…</span><a href="#">24</a><a href="#" aria-label="Next page">›</a></div></nav></div>

<div><span class="lbl">Worded arrows</span><nav aria-label="Pagination">
<div class="pg b words"><a href="#" class="lbl2">‹ Previous</a><a href="#">1</a><a href="#" aria-current="page">2</a><a href="#">3</a><span class="gap">…</span><a href="#">18</a><a href="#" class="lbl2">Next ›</a></div></nav></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{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}
.pg a[aria-disabled]{opacity:.42;pointer-events:none}

.b a{border:1px solid #e2e8f0;background:#fff}
.b a[aria-current]{border-color:#2563eb}
.words .lbl2{padding:0 15px}
.soft a[aria-current]{background:#dbeafe;color:#1d4ed8}

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

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Plain</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic 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" href="#">2</a></li>
  <li class="page-item"><a class="page-link active" href="#" aria-current="page">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item disabled page-gap"><span class="page-link">…</span></li>
  <li class="page-item"><a class="page-link" href="#">24</a></li>
  <li class="page-item"><a class="page-link" href="#" aria-label="Next page">›</a></li>
</ul>
</nav></div>

<div><span class="lbl">Bordered</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-bordered 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" href="#">2</a></li>
  <li class="page-item"><a class="page-link active" href="#" aria-current="page">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item disabled page-gap"><span class="page-link">…</span></li>
  <li class="page-item"><a class="page-link" href="#">24</a></li>
  <li class="page-item"><a class="page-link" href="#" aria-label="Next page">›</a></li>
</ul>
</nav></div>

<div><span class="lbl">Soft current page</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-bordered pagination-soft 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" href="#">2</a></li>
  <li class="page-item"><a class="page-link active" href="#" aria-current="page">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item disabled page-gap"><span class="page-link">…</span></li>
  <li class="page-item"><a class="page-link" href="#">24</a></li>
  <li class="page-item"><a class="page-link" href="#" aria-label="Next page">›</a></li>
</ul>
</nav></div>

<div><span class="lbl">Worded arrows</span>
<nav aria-label="Pagination">
<ul class="pagination pagination-uic pagination-bordered mb-0">
  <li class="page-item"><a class="page-link px-3" href="#">‹ Previous</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="#">18</a></li>
  <li class="page-item"><a class="page-link px-3" href="#">Next ›</a></li>
</ul>
</nav></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}
.pagination-soft{--bs-pagination-active-bg:#dbeafe;--bs-pagination-active-color:#1d4ed8}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Plain</span>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap items-center gap-1.5">
  <a href="#" aria-label="Previous page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand 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-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand 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="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">2</a>
  <a href="#" aria-current="page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand bg-brand text-white">3</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">4</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">5</a>
  <span class="grid h-[38px] min-w-[26px] place-items-center font-semibold text-slate-500">…</span>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-[color,background-color,border-color] motion-reduce:transition-none">24</a>
  <a href="#" aria-label="Next page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand 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><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Bordered</span>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap items-center gap-1.5">
  <a href="#" aria-label="Previous page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">2</a>
  <a href="#" aria-current="page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border border-brand bg-brand text-white">3</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">4</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">5</a>
  <span class="grid h-[38px] min-w-[26px] place-items-center font-semibold text-slate-500">…</span>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">24</a>
  <a href="#" aria-label="Next page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Soft current page</span>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap items-center gap-1.5">
  <a href="#" aria-label="Previous page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">2</a>
  <a href="#" aria-current="page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border border-brand bg-[#dbeafe] text-[#1d4ed8]">3</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">4</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">5</a>
  <span class="grid h-[38px] min-w-[26px] place-items-center font-semibold text-slate-500">…</span>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">24</a>
  <a href="#" aria-label="Next page" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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><span class="mb-4 block text-[.72rem] uppercase tracking-[.12em] text-slate-500">Worded arrows</span>
<nav aria-label="Pagination">
<div class="inline-flex flex-wrap items-center gap-1.5">
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[15px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">‹ Previous</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border border-brand bg-brand text-white">2</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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-[38px] min-w-[26px] place-items-center font-semibold text-slate-500">…</span>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[11px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">18</a>
  <a href="#" class="grid h-[38px] min-w-[38px] place-items-center text-[.88rem] font-semibold rounded-[9px] px-[15px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand border 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">Next ›</a>
</div>
</nav></div>
CSS 
@theme {
  --color-brand: #2563eb;
}

About this set

The standard numbered pagination control in four weights. Plain shows bare page numbers with a filled blue current page and a light hover background. Bordered puts every page in a white bordered square, which reads better on busy or tinted backgrounds. Soft current page keeps the borders but swaps the solid fill for a pale blue tint, useful when the control should not compete with a primary button nearby. Worded arrows spells out Previous and Next for audiences who may not recognise chevrons. Each control is a nav landmark labelled Pagination containing real links, so it works without JavaScript and each page can be crawled. The current page carries aria-current=”page”, the icon-only arrows carry aria-labels, and an ellipsis marks the skipped range. The row wraps onto a second line on narrow screens instead of overflowing. The Bootstrap version uses the native .pagination component restyled through its –bs-pagination variables, and the Tailwind version uses utility classes with a single brand colour defined in @theme.

What’s included

  • Four variants: plain, bordered, soft current page and worded arrows
  • Real links inside a labelled nav landmark, no JavaScript
  • aria-current on the active page and aria-labels on arrow links
  • Wraps instead of overflowing on narrow screens
  • Bootstrap version built on the native .pagination component

Accessibility

Each control is a nav element labelled Pagination; the current page is marked aria-current="page" and the chevron-only arrows have the accessible names Previous page and Next page. Every link shows a 2px blue focus outline when reached by keyboard. Captions and the ellipsis meet 4.5:1 contrast, and colour transitions are switched off under prefers-reduced-motion.

Customise it

In plain CSS change the #2563eb accent and the 38px min-width/height on .pg a. In Bootstrap set the --bs-pagination-active-bg, --bs-pagination-color and --bs-pagination-border-color variables on .pagination-uic. In Tailwind change --color-brand in @theme and the h-[38px] min-w-[38px] classes.