|$ curl https://forge-ai.dev/api/markdown?path=docs/components/pagination
$cat docs/pagination.md
updated Recently·16 min read·published
Pagination
Introduction
Pagination breaks large datasets into manageable chunks and gives users predictable navigation across pages. This guide covers production-ready pagination patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — numbered pages, ellipsis truncation, prev/next, sizes, dot indicators, load-more, and jump inputs.
ℹ
info
Wrap every pagination control in a real <nav aria-label="Pagination"> element. Mark the active page with aria-current="page"so screen readers announce the user's position without relying on color alone.
Numbered Pages
Standard numbered pagination with the active page highlighted in green. Prev and next arrow buttons use inline SVG chevrons and disable at boundaries.
numbered
Live
untitled.html
HTML
| 1 | <nav class="pagination" aria-label="Pagination"> |
| 2 | <button class="page-btn" disabled aria-label="Previous page"> |
| 3 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <polyline points="15 18 9 12 15 6"/> |
| 5 | </svg> |
| 6 | </button> |
| 7 | <button class="page-btn"> |
| 8 | 1 |
| 9 | </button> |
| 10 | <button class="page-btn active" aria-current="page"> |
| 11 | 2 |
| 12 | </button> |
| 13 | <button class="page-btn"> |
| 14 | 3 |
| 15 | </button> |
| 16 | <button class="page-btn"> |
| 17 | 4 |
| 18 | </button> |
| 19 | <button class="page-btn"> |
| 20 | 5 |
| 21 | </button> |
| 22 | <button class="page-btn" aria-label="Next page"> |
| 23 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 24 | <polyline points="9 18 15 12 9 6"/> |
| 25 | </svg> |
| 26 | </button> |
| 27 | </nav> |
untitled.css
CSS
| 1 | .pagination { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | gap:4px; |
| 5 | padding:24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .page-btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | min-width:36px; |
| 14 | height:36px; |
| 15 | padding:0 10px; |
| 16 | border-radius:8px; |
| 17 | border:1px solid #2A2A2A; |
| 18 | background:transparent; |
| 19 | color:#A0A0A0; |
| 20 | font-size:13px; |
| 21 | font-weight:500; |
| 22 | cursor:pointer; |
| 23 | transition:all .2s |
| 24 | } |
| 25 | .page-btn:hover:not(.active):not(:disabled) { |
| 26 | border-color:#3A3A3A; |
| 27 | color:#E0E0E0; |
| 28 | background:rgba(255, |
| 29 | 255, |
| 30 | 255, |
| 31 | .03) |
| 32 | } |
| 33 | .page-btn.active { |
| 34 | background:#00FF41; |
| 35 | color:#0A0A0A; |
| 36 | border-color:#00FF41; |
| 37 | font-weight:700 |
| 38 | } |
| 39 | .page-btn:disabled { |
| 40 | opacity:.35; |
| 41 | cursor:not-allowed |
| 42 | } |
| 43 | .page-btn svg { |
| 44 | flex-shrink:0 |
| 45 | } |
untitled.html
HTML
| 1 | <nav class="flex items-center gap-1 p-6 bg-[#0A0A0A]" aria-label="Pagination"> |
| 2 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium disabled:opacity-35 disabled:cursor-not-allowed hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" disabled aria-label="Previous page"> |
| 3 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <polyline points="15 18 9 12 15 6"/> |
| 5 | </svg> |
| 6 | </button> |
| 7 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 8 | 1 |
| 9 | </button> |
| 10 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[13px] font-bold" aria-current="page"> |
| 11 | 2 |
| 12 | </button> |
| 13 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 14 | 3 |
| 15 | </button> |
| 16 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 17 | 4 |
| 18 | </button> |
| 19 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 20 | 5 |
| 21 | </button> |
| 22 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Next page"> |
| 23 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 24 | <polyline points="9 18 15 12 9 6"/> |
| 25 | </svg> |
| 26 | </button> |
| 27 | </nav> |
untitled.html
HTML
| 1 | <nav aria-label="Pagination"> |
| 2 | <ul class="pagination" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41;--bs-pagination-disabled-color:#808080;--bs-pagination-disabled-bg:transparent;--bs-pagination-disabled-border-color:#2A2A2A"> |
| 3 | <li class="page-item disabled"> |
| 4 | <button class="page-link" aria-label="Previous page"> |
| 5 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <polyline points="15 18 9 12 15 6"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | </li> |
| 10 | <li class="page-item"> |
| 11 | <button class="page-link"> |
| 12 | 1 |
| 13 | </button> |
| 14 | </li> |
| 15 | <li class="page-item active" aria-current="page"> |
| 16 | <button class="page-link"> |
| 17 | 2 |
| 18 | </button> |
| 19 | </li> |
| 20 | <li class="page-item"> |
| 21 | <button class="page-link"> |
| 22 | 3 |
| 23 | </button> |
| 24 | </li> |
| 25 | <li class="page-item"> |
| 26 | <button class="page-link"> |
| 27 | 4 |
| 28 | </button> |
| 29 | </li> |
| 30 | <li class="page-item"> |
| 31 | <button class="page-link"> |
| 32 | 5 |
| 33 | </button> |
| 34 | </li> |
| 35 | <li class="page-item"> |
| 36 | <button class="page-link" aria-label="Next page"> |
| 37 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 38 | <polyline points="9 18 15 12 9 6"/> |
| 39 | </svg> |
| 40 | </button> |
| 41 | </li> |
| 42 | </ul> |
| 43 | </nav> |
Ellipsis Truncation
When total pages exceed a threshold, replace middle page numbers with an ellipsis. Show the first page, last page, and neighbors of the current page to keep the control compact.
with-ellipsis
Live
untitled.html
HTML
| 1 | <nav class="pagination" aria-label="Pagination"> |
| 2 | <button class="page-btn" disabled aria-label="Previous"> |
| 3 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <polyline points="15 18 9 12 15 6"/> |
| 5 | </svg> |
| 6 | </button> |
| 7 | <button class="page-btn"> |
| 8 | 1 |
| 9 | </button> |
| 10 | <span class="page-ellipsis" aria-hidden="true"> |
| 11 | ··· |
| 12 | </span> |
| 13 | <button class="page-btn"> |
| 14 | 7 |
| 15 | </button> |
| 16 | <button class="page-btn"> |
| 17 | 8 |
| 18 | </button> |
| 19 | <button class="page-btn active" aria-current="page"> |
| 20 | 9 |
| 21 | </button> |
| 22 | <button class="page-btn"> |
| 23 | 10 |
| 24 | </button> |
| 25 | <button class="page-btn"> |
| 26 | 11 |
| 27 | </button> |
| 28 | <span class="page-ellipsis" aria-hidden="true"> |
| 29 | ··· |
| 30 | </span> |
| 31 | <button class="page-btn"> |
| 32 | 24 |
| 33 | </button> |
| 34 | <button class="page-btn" aria-label="Next"> |
| 35 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 36 | <polyline points="9 18 15 12 9 6"/> |
| 37 | </svg> |
| 38 | </button> |
| 39 | </nav> |
untitled.css
CSS
| 1 | .pagination { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | gap:4px; |
| 5 | padding:24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .page-btn { |
| 10 | display:inline-flex; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | min-width:36px; |
| 14 | height:36px; |
| 15 | padding:0 10px; |
| 16 | border-radius:8px; |
| 17 | border:1px solid #2A2A2A; |
| 18 | background:transparent; |
| 19 | color:#A0A0A0; |
| 20 | font-size:13px; |
| 21 | font-weight:500; |
| 22 | cursor:pointer; |
| 23 | transition:all .2s |
| 24 | } |
| 25 | .page-btn:hover:not(.active):not(:disabled) { |
| 26 | border-color:#3A3A3A; |
| 27 | color:#E0E0E0; |
| 28 | background:rgba(255, |
| 29 | 255, |
| 30 | 255, |
| 31 | .03) |
| 32 | } |
| 33 | .page-btn.active { |
| 34 | background:#00FF41; |
| 35 | color:#0A0A0A; |
| 36 | border-color:#00FF41; |
| 37 | font-weight:700 |
| 38 | } |
| 39 | .page-btn:disabled { |
| 40 | opacity:.35; |
| 41 | cursor:not-allowed |
| 42 | } |
| 43 | .page-btn svg { |
| 44 | flex-shrink:0 |
| 45 | } |
| 46 | .page-ellipsis { |
| 47 | display:inline-flex; |
| 48 | align-items:center; |
| 49 | justify-content:center; |
| 50 | min-width:36px; |
| 51 | height:36px; |
| 52 | color:#555; |
| 53 | font-size:14px; |
| 54 | letter-spacing:2px; |
| 55 | user-select:none |
| 56 | } |
untitled.html
HTML
| 1 | <nav class="flex items-center gap-1 p-6 bg-[#0A0A0A]" aria-label="Pagination"> |
| 2 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium disabled:opacity-35 disabled:cursor-not-allowed hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" disabled aria-label="Previous"> |
| 3 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 4 | <polyline points="15 18 9 12 15 6"/> |
| 5 | </svg> |
| 6 | </button> |
| 7 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 8 | 1 |
| 9 | </button> |
| 10 | <span class="inline-flex items-center justify-center min-w-[36px] h-9 text-[#555] text-sm tracking-widest select-none" aria-hidden="true"> |
| 11 | ··· |
| 12 | </span> |
| 13 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 14 | 7 |
| 15 | </button> |
| 16 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 17 | 8 |
| 18 | </button> |
| 19 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[13px] font-bold" aria-current="page"> |
| 20 | 9 |
| 21 | </button> |
| 22 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 23 | 10 |
| 24 | </button> |
| 25 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 26 | 11 |
| 27 | </button> |
| 28 | <span class="inline-flex items-center justify-center min-w-[36px] h-9 text-[#555] text-sm tracking-widest select-none" aria-hidden="true"> |
| 29 | ··· |
| 30 | </span> |
| 31 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 32 | 24 |
| 33 | </button> |
| 34 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Next"> |
| 35 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 36 | <polyline points="9 18 15 12 9 6"/> |
| 37 | </svg> |
| 38 | </button> |
| 39 | </nav> |
untitled.html
HTML
| 1 | <nav aria-label="Pagination"> |
| 2 | <ul class="pagination" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41;--bs-pagination-disabled-color:#808080;--bs-pagination-disabled-bg:transparent;--bs-pagination-disabled-border-color:#2A2A2A"> |
| 3 | <li class="page-item disabled"> |
| 4 | <button class="page-link" aria-label="Previous"> |
| 5 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 6 | <polyline points="15 18 9 12 15 6"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | </li> |
| 10 | <li class="page-item"> |
| 11 | <button class="page-link"> |
| 12 | 1 |
| 13 | </button> |
| 14 | </li> |
| 15 | <li class="page-item disabled"> |
| 16 | <span class="page-link" aria-hidden="true"> |
| 17 | ··· |
| 18 | </span> |
| 19 | </li> |
| 20 | <li class="page-item"> |
| 21 | <button class="page-link"> |
| 22 | 7 |
| 23 | </button> |
| 24 | </li> |
| 25 | <li class="page-item"> |
| 26 | <button class="page-link"> |
| 27 | 8 |
| 28 | </button> |
| 29 | </li> |
| 30 | <li class="page-item active" aria-current="page"> |
| 31 | <button class="page-link"> |
| 32 | 9 |
| 33 | </button> |
| 34 | </li> |
| 35 | <li class="page-item"> |
| 36 | <button class="page-link"> |
| 37 | 10 |
| 38 | </button> |
| 39 | </li> |
| 40 | <li class="page-item"> |
| 41 | <button class="page-link"> |
| 42 | 11 |
| 43 | </button> |
| 44 | </li> |
| 45 | <li class="page-item disabled"> |
| 46 | <span class="page-link" aria-hidden="true"> |
| 47 | ··· |
| 48 | </span> |
| 49 | </li> |
| 50 | <li class="page-item"> |
| 51 | <button class="page-link"> |
| 52 | 24 |
| 53 | </button> |
| 54 | </li> |
| 55 | <li class="page-item"> |
| 56 | <button class="page-link" aria-label="Next"> |
| 57 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 58 | <polyline points="9 18 15 12 9 6"/> |
| 59 | </svg> |
| 60 | </button> |
| 61 | </li> |
| 62 | </ul> |
| 63 | </nav> |
Prev / Next Cards
Minimal prev/next navigation for articles, blog posts, and sequential content. Each card shows the adjacent item title and a direction label.
prev-next
Live
untitled.html
HTML
| 1 | <div class="prev-next-wrap"> |
| 2 | <a href="#" class="pn-card pn-prev"> |
| 3 | <span class="pn-label"> |
| 4 | ← Previous |
| 5 | </span> |
| 6 | <span class="pn-title"> |
| 7 | Getting Started with CSS Grid |
| 8 | </span> |
| 9 | </a> |
| 10 | <a href="#" class="pn-card pn-next"> |
| 11 | <span class="pn-label"> |
| 12 | Next → |
| 13 | </span> |
| 14 | <span class="pn-title"> |
| 15 | Advanced Flexbox Techniques |
| 16 | </span> |
| 17 | </a> |
| 18 | </div> |
untitled.css
CSS
| 1 | .prev-next-wrap { |
| 2 | display:flex; |
| 3 | gap:12px; |
| 4 | padding:24px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .pn-card { |
| 9 | flex:1; |
| 10 | display:flex; |
| 11 | flex-direction:column; |
| 12 | gap:6px; |
| 13 | padding:16px; |
| 14 | border-radius:8px; |
| 15 | border:1px solid #2A2A2A; |
| 16 | background:#111; |
| 17 | text-decoration:none; |
| 18 | transition:all .2s |
| 19 | } |
| 20 | .pn-card:hover { |
| 21 | border-color:#00FF41; |
| 22 | background:#141420 |
| 23 | } |
| 24 | .pn-prev { |
| 25 | align-items:flex-start |
| 26 | } |
| 27 | .pn-next { |
| 28 | align-items:flex-end; |
| 29 | text-align:right |
| 30 | } |
| 31 | .pn-label { |
| 32 | font-size:11px; |
| 33 | color:#808080; |
| 34 | text-transform:uppercase; |
| 35 | letter-spacing:.5px; |
| 36 | font-weight:500 |
| 37 | } |
| 38 | .pn-title { |
| 39 | font-size:13px; |
| 40 | color:#E0E0E0; |
| 41 | font-weight:600; |
| 42 | line-height:1.4 |
| 43 | } |
| 44 | .pn-card:hover .pn-title { |
| 45 | color:#00FF41 |
| 46 | } |
untitled.html
HTML
| 1 | <div class="flex gap-3 p-6 bg-[#0A0A0A]"> |
| 2 | <a href="#" class="flex-1 flex flex-col gap-1.5 p-4 rounded-lg border border-[#2A2A2A] bg-[#111] hover:border-[#00FF41] hover:bg-[#141420] transition-all items-start no-underline"> |
| 3 | <span class="text-[11px] text-[#808080] uppercase tracking-wide font-medium"> |
| 4 | ← Previous |
| 5 | </span> |
| 6 | <span class="text-[13px] text-[#E0E0E0] font-semibold leading-snug group-hover:text-[#00FF41]"> |
| 7 | Getting Started with CSS Grid |
| 8 | </span> |
| 9 | </a> |
| 10 | <a href="#" class="flex-1 flex flex-col gap-1.5 p-4 rounded-lg border border-[#2A2A2A] bg-[#111] hover:border-[#00FF41] hover:bg-[#141420] transition-all items-end text-right no-underline"> |
| 11 | <span class="text-[11px] text-[#808080] uppercase tracking-wide font-medium"> |
| 12 | Next → |
| 13 | </span> |
| 14 | <span class="text-[13px] text-[#E0E0E0] font-semibold leading-snug hover:text-[#00FF41]"> |
| 15 | Advanced Flexbox Techniques |
| 16 | </span> |
| 17 | </a> |
| 18 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-3 p-4"> |
| 2 | <a href="#" class="btn flex-fill text-start d-flex flex-column gap-1 p-3 rounded border-secondary" style="--bs-btn-color:#E0E0E0;--bs-btn-bg:#111;--bs-btn-border-color:#2A2A2A;--bs-btn-hover-color:#00FF41;--bs-btn-hover-bg:#141420;--bs-btn-hover-border-color:#00FF41"> |
| 3 | <span class="text-uppercase text-[#808080]" style="font-size:11px;letter-spacing:.5px"> |
| 4 | ← Previous |
| 5 | </span> |
| 6 | <span class="fw-semibold" style="font-size:13px"> |
| 7 | Getting Started with CSS Grid |
| 8 | </span> |
| 9 | </a> |
| 10 | <a href="#" class="btn flex-fill text-end d-flex flex-column gap-1 p-3 rounded border-secondary" style="--bs-btn-color:#E0E0E0;--bs-btn-bg:#111;--bs-btn-border-color:#2A2A2A;--bs-btn-hover-color:#00FF41;--bs-btn-hover-bg:#141420;--bs-btn-hover-border-color:#00FF41"> |
| 11 | <span class="text-uppercase text-[#808080]" style="font-size:11px;letter-spacing:.5px"> |
| 12 | Next → |
| 13 | </span> |
| 14 | <span class="fw-semibold" style="font-size:13px"> |
| 15 | Advanced Flexbox Techniques |
| 16 | </span> |
| 17 | </a> |
| 18 | </div> |
Sizes
Small, default, and large pagination sizes. Choose the right size based on density — compact for data tables, default for general use, and large for touch targets.
sizes
Live
untitled.html
HTML
| 1 | <div class="size-demo"> |
| 2 | <nav class="pagination sm" aria-label="Small"> |
| 3 | <button class="page-btn"> |
| 4 | 1 |
| 5 | </button> |
| 6 | <button class="page-btn active" aria-current="page"> |
| 7 | 2 |
| 8 | </button> |
| 9 | <button class="page-btn"> |
| 10 | 3 |
| 11 | </button> |
| 12 | <button class="page-btn"> |
| 13 | 4 |
| 14 | </button> |
| 15 | <button class="page-btn"> |
| 16 | 5 |
| 17 | </button> |
| 18 | </nav> |
| 19 | <nav class="pagination md" aria-label="Default"> |
| 20 | <button class="page-btn"> |
| 21 | 1 |
| 22 | </button> |
| 23 | <button class="page-btn active" aria-current="page"> |
| 24 | 2 |
| 25 | </button> |
| 26 | <button class="page-btn"> |
| 27 | 3 |
| 28 | </button> |
| 29 | <button class="page-btn"> |
| 30 | 4 |
| 31 | </button> |
| 32 | <button class="page-btn"> |
| 33 | 5 |
| 34 | </button> |
| 35 | </nav> |
| 36 | <nav class="pagination lg" aria-label="Large"> |
| 37 | <button class="page-btn"> |
| 38 | 1 |
| 39 | </button> |
| 40 | <button class="page-btn active" aria-current="page"> |
| 41 | 2 |
| 42 | </button> |
| 43 | <button class="page-btn"> |
| 44 | 3 |
| 45 | </button> |
| 46 | <button class="page-btn"> |
| 47 | 4 |
| 48 | </button> |
| 49 | <button class="page-btn"> |
| 50 | 5 |
| 51 | </button> |
| 52 | </nav> |
| 53 | </div> |
untitled.css
CSS
| 1 | .size-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:16px; |
| 5 | padding:24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .pagination { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | gap:4px |
| 13 | } |
| 14 | .pagination.sm .page-btn { |
| 15 | min-width:28px; |
| 16 | height:28px; |
| 17 | padding:0 8px; |
| 18 | font-size:11px; |
| 19 | border-radius:6px |
| 20 | } |
| 21 | .pagination.md .page-btn { |
| 22 | min-width:36px; |
| 23 | height:36px; |
| 24 | padding:0 10px; |
| 25 | font-size:13px; |
| 26 | border-radius:8px |
| 27 | } |
| 28 | .pagination.lg .page-btn { |
| 29 | min-width:44px; |
| 30 | height:44px; |
| 31 | padding:0 14px; |
| 32 | font-size:15px; |
| 33 | border-radius:10px |
| 34 | } |
| 35 | .page-btn { |
| 36 | display:inline-flex; |
| 37 | align-items:center; |
| 38 | justify-content:center; |
| 39 | border:1px solid #2A2A2A; |
| 40 | background:transparent; |
| 41 | color:#A0A0A0; |
| 42 | font-weight:500; |
| 43 | cursor:pointer; |
| 44 | transition:all .2s |
| 45 | } |
| 46 | .page-btn:hover:not(.active) { |
| 47 | border-color:#3A3A3A; |
| 48 | color:#E0E0E0; |
| 49 | background:rgba(255, |
| 50 | 255, |
| 51 | 255, |
| 52 | .03) |
| 53 | } |
| 54 | .page-btn.active { |
| 55 | background:#00FF41; |
| 56 | color:#0A0A0A; |
| 57 | border-color:#00FF41; |
| 58 | font-weight:700 |
| 59 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 p-6 bg-[#0A0A0A]"> |
| 2 | <nav class="flex items-center gap-1" aria-label="Small"> |
| 3 | <button class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[11px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 4 | 1 |
| 5 | </button> |
| 6 | <button class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[11px] font-bold" aria-current="page"> |
| 7 | 2 |
| 8 | </button> |
| 9 | <button class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[11px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 10 | 3 |
| 11 | </button> |
| 12 | <button class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[11px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 13 | 4 |
| 14 | </button> |
| 15 | <button class="inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[11px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 16 | 5 |
| 17 | </button> |
| 18 | </nav> |
| 19 | <nav class="flex items-center gap-1" aria-label="Default"> |
| 20 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 21 | 1 |
| 22 | </button> |
| 23 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[13px] font-bold" aria-current="page"> |
| 24 | 2 |
| 25 | </button> |
| 26 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 27 | 3 |
| 28 | </button> |
| 29 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 30 | 4 |
| 31 | </button> |
| 32 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 33 | 5 |
| 34 | </button> |
| 35 | </nav> |
| 36 | <nav class="flex items-center gap-1" aria-label="Large"> |
| 37 | <button class="inline-flex items-center justify-center min-w-[44px] h-11 px-3.5 rounded-[10px] border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[15px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 38 | 1 |
| 39 | </button> |
| 40 | <button class="inline-flex items-center justify-center min-w-[44px] h-11 px-3.5 rounded-[10px] border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[15px] font-bold" aria-current="page"> |
| 41 | 2 |
| 42 | </button> |
| 43 | <button class="inline-flex items-center justify-center min-w-[44px] h-11 px-3.5 rounded-[10px] border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[15px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 44 | 3 |
| 45 | </button> |
| 46 | <button class="inline-flex items-center justify-center min-w-[44px] h-11 px-3.5 rounded-[10px] border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[15px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 47 | 4 |
| 48 | </button> |
| 49 | <button class="inline-flex items-center justify-center min-w-[44px] h-11 px-3.5 rounded-[10px] border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[15px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 50 | 5 |
| 51 | </button> |
| 52 | </nav> |
| 53 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 p-4"> |
| 2 | <nav aria-label="Small"> |
| 3 | <ul class="pagination pagination-sm" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41"> |
| 4 | <li class="page-item"> |
| 5 | <button class="page-link"> |
| 6 | 1 |
| 7 | </button> |
| 8 | </li> |
| 9 | <li class="page-item active" aria-current="page"> |
| 10 | <button class="page-link"> |
| 11 | 2 |
| 12 | </button> |
| 13 | </li> |
| 14 | <li class="page-item"> |
| 15 | <button class="page-link"> |
| 16 | 3 |
| 17 | </button> |
| 18 | </li> |
| 19 | <li class="page-item"> |
| 20 | <button class="page-link"> |
| 21 | 4 |
| 22 | </button> |
| 23 | </li> |
| 24 | <li class="page-item"> |
| 25 | <button class="page-link"> |
| 26 | 5 |
| 27 | </button> |
| 28 | </li> |
| 29 | </ul> |
| 30 | </nav> |
| 31 | <nav aria-label="Default"> |
| 32 | <ul class="pagination" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41"> |
| 33 | <li class="page-item"> |
| 34 | <button class="page-link"> |
| 35 | 1 |
| 36 | </button> |
| 37 | </li> |
| 38 | <li class="page-item active" aria-current="page"> |
| 39 | <button class="page-link"> |
| 40 | 2 |
| 41 | </button> |
| 42 | </li> |
| 43 | <li class="page-item"> |
| 44 | <button class="page-link"> |
| 45 | 3 |
| 46 | </button> |
| 47 | </li> |
| 48 | <li class="page-item"> |
| 49 | <button class="page-link"> |
| 50 | 4 |
| 51 | </button> |
| 52 | </li> |
| 53 | <li class="page-item"> |
| 54 | <button class="page-link"> |
| 55 | 5 |
| 56 | </button> |
| 57 | </li> |
| 58 | </ul> |
| 59 | </nav> |
| 60 | <nav aria-label="Large"> |
| 61 | <ul class="pagination pagination-lg" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41"> |
| 62 | <li class="page-item"> |
| 63 | <button class="page-link"> |
| 64 | 1 |
| 65 | </button> |
| 66 | </li> |
| 67 | <li class="page-item active" aria-current="page"> |
| 68 | <button class="page-link"> |
| 69 | 2 |
| 70 | </button> |
| 71 | </li> |
| 72 | <li class="page-item"> |
| 73 | <button class="page-link"> |
| 74 | 3 |
| 75 | </button> |
| 76 | </li> |
| 77 | <li class="page-item"> |
| 78 | <button class="page-link"> |
| 79 | 4 |
| 80 | </button> |
| 81 | </li> |
| 82 | <li class="page-item"> |
| 83 | <button class="page-link"> |
| 84 | 5 |
| 85 | </button> |
| 86 | </li> |
| 87 | </ul> |
| 88 | </nav> |
| 89 | </div> |
With Page Info
Displaying "Showing X–Y of Z results" alongside pagination helps users understand their position in the dataset. Essential for data tables, search results, and admin dashboards.
page-info
Live
untitled.html
HTML
| 1 | <div class="pagination-info-wrap"> |
| 2 | <p class="page-info"> |
| 3 | Showing |
| 4 | <strong> |
| 5 | 11–20 |
| 6 | </strong> |
| 7 | of |
| 8 | <strong> |
| 9 | 247 |
| 10 | </strong> |
| 11 | results |
| 12 | </p> |
| 13 | <nav class="pagination" aria-label="Pagination"> |
| 14 | <button class="page-btn" aria-label="Previous"> |
| 15 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 16 | <polyline points="15 18 9 12 15 6"/> |
| 17 | </svg> |
| 18 | </button> |
| 19 | <button class="page-btn"> |
| 20 | 1 |
| 21 | </button> |
| 22 | <button class="page-btn active" aria-current="page"> |
| 23 | 2 |
| 24 | </button> |
| 25 | <button class="page-btn"> |
| 26 | 3 |
| 27 | </button> |
| 28 | <span class="page-ellipsis" aria-hidden="true"> |
| 29 | ··· |
| 30 | </span> |
| 31 | <button class="page-btn"> |
| 32 | 25 |
| 33 | </button> |
| 34 | <button class="page-btn" aria-label="Next"> |
| 35 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 36 | <polyline points="9 18 15 12 9 6"/> |
| 37 | </svg> |
| 38 | </button> |
| 39 | </nav> |
| 40 | </div> |
untitled.css
CSS
| 1 | .pagination-info-wrap { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | justify-content:space-between; |
| 5 | padding:20px 24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif; |
| 8 | flex-wrap:wrap; |
| 9 | gap:12px |
| 10 | } |
| 11 | .page-info { |
| 12 | font-size:12px; |
| 13 | color:#808080; |
| 14 | margin:0 |
| 15 | } |
| 16 | .page-info strong { |
| 17 | color:#E0E0E0; |
| 18 | font-weight:600 |
| 19 | } |
| 20 | .pagination { |
| 21 | display:flex; |
| 22 | align-items:center; |
| 23 | gap:4px; |
| 24 | margin:0 |
| 25 | } |
| 26 | .page-btn { |
| 27 | display:inline-flex; |
| 28 | align-items:center; |
| 29 | justify-content:center; |
| 30 | min-width:36px; |
| 31 | height:36px; |
| 32 | padding:0 10px; |
| 33 | border-radius:8px; |
| 34 | border:1px solid #2A2A2A; |
| 35 | background:transparent; |
| 36 | color:#A0A0A0; |
| 37 | font-size:13px; |
| 38 | font-weight:500; |
| 39 | cursor:pointer; |
| 40 | transition:all .2s |
| 41 | } |
| 42 | .page-btn:hover:not(.active) { |
| 43 | border-color:#3A3A3A; |
| 44 | color:#E0E0E0; |
| 45 | background:rgba(255, |
| 46 | 255, |
| 47 | 255, |
| 48 | .03) |
| 49 | } |
| 50 | .page-btn.active { |
| 51 | background:#00FF41; |
| 52 | color:#0A0A0A; |
| 53 | border-color:#00FF41; |
| 54 | font-weight:700 |
| 55 | } |
| 56 | .page-btn svg { |
| 57 | flex-shrink:0 |
| 58 | } |
| 59 | .page-ellipsis { |
| 60 | display:inline-flex; |
| 61 | align-items:center; |
| 62 | justify-content:center; |
| 63 | min-width:36px; |
| 64 | height:36px; |
| 65 | color:#555; |
| 66 | font-size:14px; |
| 67 | letter-spacing:2px; |
| 68 | user-select:none |
| 69 | } |
untitled.html
HTML
| 1 | <div class="flex items-center justify-between flex-wrap gap-3 p-6 bg-[#0A0A0A]"> |
| 2 | <p class="text-xs text-[#808080] m-0"> |
| 3 | Showing |
| 4 | <strong class="text-[#E0E0E0] font-semibold"> |
| 5 | 11–20 |
| 6 | </strong> |
| 7 | of |
| 8 | <strong class="text-[#E0E0E0] font-semibold"> |
| 9 | 247 |
| 10 | </strong> |
| 11 | results |
| 12 | </p> |
| 13 | <nav class="flex items-center gap-1 m-0" aria-label="Pagination"> |
| 14 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Previous"> |
| 15 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 16 | <polyline points="15 18 9 12 15 6"/> |
| 17 | </svg> |
| 18 | </button> |
| 19 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 20 | 1 |
| 21 | </button> |
| 22 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[13px] font-bold" aria-current="page"> |
| 23 | 2 |
| 24 | </button> |
| 25 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 26 | 3 |
| 27 | </button> |
| 28 | <span class="inline-flex items-center justify-center min-w-[36px] h-9 text-[#555] text-sm tracking-widest select-none" aria-hidden="true"> |
| 29 | ··· |
| 30 | </span> |
| 31 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 32 | 25 |
| 33 | </button> |
| 34 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Next"> |
| 35 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 36 | <polyline points="9 18 15 12 9 6"/> |
| 37 | </svg> |
| 38 | </button> |
| 39 | </nav> |
| 40 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 p-4"> |
| 2 | <p class="m-0" style="font-size:12px;color:#808080"> |
| 3 | Showing |
| 4 | <strong style="color:#E0E0E0"> |
| 5 | 11–20 |
| 6 | </strong> |
| 7 | of |
| 8 | <strong style="color:#E0E0E0"> |
| 9 | 247 |
| 10 | </strong> |
| 11 | results |
| 12 | </p> |
| 13 | <nav aria-label="Pagination"> |
| 14 | <ul class="pagination mb-0" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41"> |
| 15 | <li class="page-item"> |
| 16 | <button class="page-link" aria-label="Previous"> |
| 17 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 18 | <polyline points="15 18 9 12 15 6"/> |
| 19 | </svg> |
| 20 | </button> |
| 21 | </li> |
| 22 | <li class="page-item"> |
| 23 | <button class="page-link"> |
| 24 | 1 |
| 25 | </button> |
| 26 | </li> |
| 27 | <li class="page-item active" aria-current="page"> |
| 28 | <button class="page-link"> |
| 29 | 2 |
| 30 | </button> |
| 31 | </li> |
| 32 | <li class="page-item"> |
| 33 | <button class="page-link"> |
| 34 | 3 |
| 35 | </button> |
| 36 | </li> |
| 37 | <li class="page-item disabled"> |
| 38 | <span class="page-link" aria-hidden="true"> |
| 39 | ··· |
| 40 | </span> |
| 41 | </li> |
| 42 | <li class="page-item"> |
| 43 | <button class="page-link"> |
| 44 | 25 |
| 45 | </button> |
| 46 | </li> |
| 47 | <li class="page-item"> |
| 48 | <button class="page-link" aria-label="Next"> |
| 49 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 50 | <polyline points="9 18 15 12 9 6"/> |
| 51 | </svg> |
| 52 | </button> |
| 53 | </li> |
| 54 | </ul> |
| 55 | </nav> |
| 56 | </div> |
Dots / Carousel Style
Dot indicators are compact pagination for carousels, image sliders, and onboarding flows. The active dot stretches into a pill shape. A numbered variant shows the current index as a badge.
dots-style
Live
untitled.html
HTML
| 1 | <div class="dots-demo"> |
| 2 | <div class="dots-wrap"> |
| 3 | <button class="dot" aria-label="Slide 1"> |
| 4 | </button> |
| 5 | <button class="dot active" aria-label="Slide 2" aria-current="true"> |
| 6 | </button> |
| 7 | <button class="dot" aria-label="Slide 3"> |
| 8 | </button> |
| 9 | <button class="dot" aria-label="Slide 4"> |
| 10 | </button> |
| 11 | <button class="dot" aria-label="Slide 5"> |
| 12 | </button> |
| 13 | </div> |
| 14 | <div class="dots-wrap labels"> |
| 15 | <button class="dot-label"> |
| 16 | 1 |
| 17 | </button> |
| 18 | <button class="dot-label active"> |
| 19 | 2 |
| 20 | </button> |
| 21 | <button class="dot-label"> |
| 22 | 3 |
| 23 | </button> |
| 24 | <button class="dot-label"> |
| 25 | 4 |
| 26 | </button> |
| 27 | <button class="dot-label"> |
| 28 | 5 |
| 29 | </button> |
| 30 | </div> |
| 31 | </div> |
untitled.css
CSS
| 1 | .dots-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:20px; |
| 5 | align-items:center; |
| 6 | padding:24px; |
| 7 | font-family:system-ui, |
| 8 | sans-serif |
| 9 | } |
| 10 | .dots-wrap { |
| 11 | display:flex; |
| 12 | gap:10px; |
| 13 | align-items:center |
| 14 | } |
| 15 | .dot { |
| 16 | width:10px; |
| 17 | height:10px; |
| 18 | border-radius:50%; |
| 19 | border:none; |
| 20 | background:#333; |
| 21 | cursor:pointer; |
| 22 | padding:0; |
| 23 | transition:all .3s |
| 24 | } |
| 25 | .dot:hover { |
| 26 | background:#555 |
| 27 | } |
| 28 | .dot.active { |
| 29 | background:#00FF41; |
| 30 | width:28px; |
| 31 | border-radius:5px |
| 32 | } |
| 33 | .dot-label { |
| 34 | width:10px; |
| 35 | height:10px; |
| 36 | border-radius:50%; |
| 37 | border:1.5px solid #444; |
| 38 | background:transparent; |
| 39 | color:transparent; |
| 40 | font-size:0; |
| 41 | padding:0; |
| 42 | cursor:pointer; |
| 43 | transition:all .3s; |
| 44 | line-height:0 |
| 45 | } |
| 46 | .dot-label:hover { |
| 47 | border-color:#666 |
| 48 | } |
| 49 | .dot-label.active { |
| 50 | background:transparent; |
| 51 | border-color:#00FF41; |
| 52 | color:#00FF41; |
| 53 | width:auto; |
| 54 | height:auto; |
| 55 | padding:2px 8px; |
| 56 | border-radius:10px; |
| 57 | font-size:10px; |
| 58 | font-weight:600; |
| 59 | line-height:1.4 |
| 60 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.dots-wrap').forEach(wrap=>{ |
| 2 | wrap.querySelectorAll('.dot,.dot-label').forEach(dot=>{ |
| 3 | dot.addEventListener('click',()=>{ |
| 4 | wrap.querySelectorAll('.dot,.dot-label').forEach(d=>d.classList.remove('active')); |
| 5 | dot.classList.add('active'); |
| 6 | }); |
| 7 | }); |
| 8 | }) |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 items-center p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex gap-2.5 items-center"> |
| 3 | <button class="w-2.5 h-2.5 rounded-full bg-[#333] hover:bg-[#555] transition-all" aria-label="Slide 1"> |
| 4 | </button> |
| 5 | <button class="w-7 h-2.5 rounded-[5px] bg-[#00FF41]" aria-label="Slide 2" aria-current="true"> |
| 6 | </button> |
| 7 | <button class="w-2.5 h-2.5 rounded-full bg-[#333] hover:bg-[#555] transition-all" aria-label="Slide 3"> |
| 8 | </button> |
| 9 | <button class="w-2.5 h-2.5 rounded-full bg-[#333] hover:bg-[#555] transition-all" aria-label="Slide 4"> |
| 10 | </button> |
| 11 | <button class="w-2.5 h-2.5 rounded-full bg-[#333] hover:bg-[#555] transition-all" aria-label="Slide 5"> |
| 12 | </button> |
| 13 | </div> |
| 14 | <div class="flex gap-2.5 items-center"> |
| 15 | <button class="w-2.5 h-2.5 rounded-full border-[1.5px] border-[#444] bg-transparent text-transparent text-[0px] leading-none hover:border-[#666] transition-all"> |
| 16 | 1 |
| 17 | </button> |
| 18 | <button class="px-2 py-0.5 rounded-[10px] border border-[#00FF41] bg-transparent text-[#00FF41] text-[10px] font-semibold leading-tight"> |
| 19 | 2 |
| 20 | </button> |
| 21 | <button class="w-2.5 h-2.5 rounded-full border-[1.5px] border-[#444] bg-transparent text-transparent text-[0px] leading-none hover:border-[#666] transition-all"> |
| 22 | 3 |
| 23 | </button> |
| 24 | <button class="w-2.5 h-2.5 rounded-full border-[1.5px] border-[#444] bg-transparent text-transparent text-[0px] leading-none hover:border-[#666] transition-all"> |
| 25 | 4 |
| 26 | </button> |
| 27 | <button class="w-2.5 h-2.5 rounded-full border-[1.5px] border-[#444] bg-transparent text-transparent text-[0px] leading-none hover:border-[#666] transition-all"> |
| 28 | 5 |
| 29 | </button> |
| 30 | </div> |
| 31 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-4 align-items-center p-4"> |
| 2 | <div class="d-flex gap-2 align-items-center"> |
| 3 | <button class="btn p-0 rounded-circle" aria-label="Slide 1" style="width:10px;height:10px;--bs-btn-bg:#333;--bs-btn-border-color:#333;--bs-btn-hover-bg:#555;--bs-btn-hover-border-color:#555;--bs-btn-active-bg:#555;--bs-btn-active-border-color:#555"> |
| 4 | </button> |
| 5 | <button class="btn p-0" aria-label="Slide 2" aria-current="true" style="width:28px;height:10px;border-radius:5px;--bs-btn-bg:#00FF41;--bs-btn-border-color:#00FF41"> |
| 6 | </button> |
| 7 | <button class="btn p-0 rounded-circle" aria-label="Slide 3" style="width:10px;height:10px;--bs-btn-bg:#333;--bs-btn-border-color:#333;--bs-btn-hover-bg:#555;--bs-btn-hover-border-color:#555"> |
| 8 | </button> |
| 9 | <button class="btn p-0 rounded-circle" aria-label="Slide 4" style="width:10px;height:10px;--bs-btn-bg:#333;--bs-btn-border-color:#333;--bs-btn-hover-bg:#555;--bs-btn-hover-border-color:#555"> |
| 10 | </button> |
| 11 | <button class="btn p-0 rounded-circle" aria-label="Slide 5" style="width:10px;height:10px;--bs-btn-bg:#333;--bs-btn-border-color:#333;--bs-btn-hover-bg:#555;--bs-btn-hover-border-color:#555"> |
| 12 | </button> |
| 13 | </div> |
| 14 | <div class="d-flex gap-2 align-items-center"> |
| 15 | <button class="btn p-0 rounded-circle" style="width:10px;height:10px;font-size:0;color:transparent;--bs-btn-color:transparent;--bs-btn-bg:transparent;--bs-btn-border-color:#444;--bs-btn-hover-border-color:#666"> |
| 16 | 1 |
| 17 | </button> |
| 18 | <button class="btn px-2 py-0 fw-semibold" style="font-size:10px;border-radius:10px;--bs-btn-color:#00FF41;--bs-btn-bg:transparent;--bs-btn-border-color:#00FF41"> |
| 19 | 2 |
| 20 | </button> |
| 21 | <button class="btn p-0 rounded-circle" style="width:10px;height:10px;font-size:0;color:transparent;--bs-btn-color:transparent;--bs-btn-bg:transparent;--bs-btn-border-color:#444;--bs-btn-hover-border-color:#666"> |
| 22 | 3 |
| 23 | </button> |
| 24 | <button class="btn p-0 rounded-circle" style="width:10px;height:10px;font-size:0;color:transparent;--bs-btn-color:transparent;--bs-btn-bg:transparent;--bs-btn-border-color:#444;--bs-btn-hover-border-color:#666"> |
| 25 | 4 |
| 26 | </button> |
| 27 | <button class="btn p-0 rounded-circle" style="width:10px;height:10px;font-size:0;color:transparent;--bs-btn-color:transparent;--bs-btn-bg:transparent;--bs-btn-border-color:#444;--bs-btn-hover-border-color:#666"> |
| 28 | 5 |
| 29 | </button> |
| 30 | </div> |
| 31 | </div> |
Minimal Bare Style
Borderless, text-only pagination for lightweight contexts. No backgrounds or borders — just colored text with a subtle hover underline. Works well inside cards, modals, and inline content.
minimal-bare
Live
untitled.html
HTML
| 1 | <nav class="pagination minimal" aria-label="Pagination"> |
| 2 | <a href="#" class="page-link prev" aria-label="Previous"> |
| 3 | ← Prev |
| 4 | </a> |
| 5 | <span class="page-separator"> |
| 6 | | |
| 7 | </span> |
| 8 | <span class="page-current"> |
| 9 | Page 3 of 12 |
| 10 | </span> |
| 11 | <span class="page-separator"> |
| 12 | | |
| 13 | </span> |
| 14 | <a href="#" class="page-link next" aria-label="Next"> |
| 15 | Next → |
| 16 | </a> |
| 17 | </nav> |
untitled.css
CSS
| 1 | .pagination.minimal { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | gap:16px; |
| 5 | padding:24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif; |
| 8 | justify-content:center |
| 9 | } |
| 10 | .page-link { |
| 11 | color:#808080; |
| 12 | text-decoration:none; |
| 13 | font-size:13px; |
| 14 | font-weight:500; |
| 15 | transition:color .2s; |
| 16 | position:relative |
| 17 | } |
| 18 | .page-link:hover { |
| 19 | color:#00FF41 |
| 20 | } |
| 21 | .page-link::after { |
| 22 | content:''; |
| 23 | position:absolute; |
| 24 | bottom:-2px; |
| 25 | left:0; |
| 26 | width:0; |
| 27 | height:1px; |
| 28 | background:#00FF41; |
| 29 | transition:width .2s |
| 30 | } |
| 31 | .page-link:hover::after { |
| 32 | width:100% |
| 33 | } |
| 34 | .page-separator { |
| 35 | color:#333; |
| 36 | font-size:12px |
| 37 | } |
| 38 | .page-current { |
| 39 | font-size:12px; |
| 40 | color:#808080 |
| 41 | } |
untitled.html
HTML
| 1 | <nav class="flex items-center justify-center gap-4 p-6 bg-[#0A0A0A]" aria-label="Pagination"> |
| 2 | <a href="#" class="relative text-[13px] font-medium text-[#808080] no-underline transition-colors hover:text-[#00FF41] after:content-[''] after:absolute after:bottom-[-2px] after:left-0 after:w-0 after:h-px after:bg-[#00FF41] after:transition-all hover:after:w-full" aria-label="Previous"> |
| 3 | ← Prev |
| 4 | </a> |
| 5 | <span class="text-xs text-[#333]"> |
| 6 | | |
| 7 | </span> |
| 8 | <span class="text-xs text-[#808080]"> |
| 9 | Page 3 of 12 |
| 10 | </span> |
| 11 | <span class="text-xs text-[#333]"> |
| 12 | | |
| 13 | </span> |
| 14 | <a href="#" class="relative text-[13px] font-medium text-[#808080] no-underline transition-colors hover:text-[#00FF41] after:content-[''] after:absolute after:bottom-[-2px] after:left-0 after:w-0 after:h-px after:bg-[#00FF41] after:transition-all hover:after:w-full" aria-label="Next"> |
| 15 | Next → |
| 16 | </a> |
| 17 | </nav> |
untitled.html
HTML
| 1 | <nav class="d-flex align-items-center justify-content-center gap-4 p-4" aria-label="Pagination"> |
| 2 | <a href="#" class="btn btn-link text-decoration-none position-relative" style="--bs-btn-color:#808080;--bs-btn-hover-color:#00FF41;--bs-btn-active-color:#00FF41;font-size:13px;font-weight:500" aria-label="Previous"> |
| 3 | ← Prev |
| 4 | </a> |
| 5 | <span style="font-size:12px;color:#333"> |
| 6 | | |
| 7 | </span> |
| 8 | <span style="font-size:12px;color:#808080"> |
| 9 | Page 3 of 12 |
| 10 | </span> |
| 11 | <span style="font-size:12px;color:#333"> |
| 12 | | |
| 13 | </span> |
| 14 | <a href="#" class="btn btn-link text-decoration-none position-relative" style="--bs-btn-color:#808080;--bs-btn-hover-color:#00FF41;--bs-btn-active-color:#00FF41;font-size:13px;font-weight:500" aria-label="Next"> |
| 15 | Next → |
| 16 | </a> |
| 17 | </nav> |
Load More Button
For feeds, search results, and infinite-scroll-like experiences, a "Load More" button appends the next batch of items without replacing the current view. This preserves scroll position and avoids the cognitive cost of numbered pagination.
load-more
Live
untitled.html
HTML
| 1 | <div class="load-more-demo"> |
| 2 | <div class="lm-items"> |
| 3 | <div class="lm-item"> |
| 4 | <span class="lm-num"> |
| 5 | 1 |
| 6 | </span> |
| 7 | <span class="lm-text"> |
| 8 | Deploy authentication microservice to staging |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="lm-item"> |
| 12 | <span class="lm-num"> |
| 13 | 2 |
| 14 | </span> |
| 15 | <span class="lm-text"> |
| 16 | Update rate limiting middleware for v2 API |
| 17 | </span> |
| 18 | </div> |
| 19 | <div class="lm-item"> |
| 20 | <span class="lm-num"> |
| 21 | 3 |
| 22 | </span> |
| 23 | <span class="lm-text"> |
| 24 | Fix pagination overflow on mobile viewports |
| 25 | </span> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="lm-footer"> |
| 29 | <span class="lm-info"> |
| 30 | Showing 3 of 47 tasks |
| 31 | </span> |
| 32 | <button class="lm-btn" id="load-more-btn"> |
| 33 | <span class="lm-btn-text"> |
| 34 | Load More |
| 35 | </span> |
| 36 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 37 | <polyline points="6 9 12 15 18 9"/> |
| 38 | </svg> |
| 39 | </button> |
| 40 | </div> |
| 41 | </div> |
untitled.css
CSS
| 1 | .load-more-demo { |
| 2 | max-width:420px; |
| 3 | margin:0 auto; |
| 4 | padding:16px 24px; |
| 5 | font-family:system-ui, |
| 6 | sans-serif |
| 7 | } |
| 8 | .lm-items { |
| 9 | display:flex; |
| 10 | flex-direction:column; |
| 11 | gap:0 |
| 12 | } |
| 13 | .lm-item { |
| 14 | display:flex; |
| 15 | align-items:center; |
| 16 | gap:12px; |
| 17 | padding:10px 12px; |
| 18 | border-bottom:1px solid #1A1A1A; |
| 19 | font-size:12px; |
| 20 | color:#A0A0A0; |
| 21 | transition:background .15s |
| 22 | } |
| 23 | .lm-item:hover { |
| 24 | background:rgba(255, |
| 25 | 255, |
| 26 | 255, |
| 27 | .02) |
| 28 | } |
| 29 | .lm-num { |
| 30 | width:20px; |
| 31 | height:20px; |
| 32 | border-radius:50%; |
| 33 | background:rgba(255, |
| 34 | 255, |
| 35 | 255, |
| 36 | .04); |
| 37 | color:#666; |
| 38 | font-size:10px; |
| 39 | font-weight:600; |
| 40 | display:flex; |
| 41 | align-items:center; |
| 42 | justify-content:center; |
| 43 | flex-shrink:0 |
| 44 | } |
| 45 | .lm-text { |
| 46 | flex:1; |
| 47 | line-height:1.4 |
| 48 | } |
| 49 | .lm-footer { |
| 50 | display:flex; |
| 51 | align-items:center; |
| 52 | justify-content:space-between; |
| 53 | padding:12px 12px 0; |
| 54 | margin-top:4px |
| 55 | } |
| 56 | .lm-info { |
| 57 | font-size:11px; |
| 58 | color:#555 |
| 59 | } |
| 60 | .lm-btn { |
| 61 | display:inline-flex; |
| 62 | align-items:center; |
| 63 | gap:6px; |
| 64 | padding:8px 16px; |
| 65 | border-radius:8px; |
| 66 | border:1px solid #2A2A2A; |
| 67 | background:transparent; |
| 68 | color:#A0A0A0; |
| 69 | font-size:12px; |
| 70 | font-weight:500; |
| 71 | cursor:pointer; |
| 72 | transition:all .2s |
| 73 | } |
| 74 | .lm-btn:hover { |
| 75 | border-color:#00FF41; |
| 76 | color:#00FF41; |
| 77 | background:rgba(0, |
| 78 | 255, |
| 79 | 65, |
| 80 | .05) |
| 81 | } |
| 82 | .lm-btn.loading .lm-btn-text { |
| 83 | display:none |
| 84 | } |
| 85 | .lm-btn.loading::after { |
| 86 | content:''; |
| 87 | width:14px; |
| 88 | height:14px; |
| 89 | border:2px solid rgba(0, |
| 90 | 255, |
| 91 | 65, |
| 92 | .2); |
| 93 | border-top-color:#00FF41; |
| 94 | border-radius:50%; |
| 95 | animation:spin .6s linear infinite |
| 96 | } |
| 97 | @keyframes spin { |
| 98 | to { |
| 99 | transform:rotate(360deg) |
| 100 | } |
| 101 | } |
untitled.js
JavaScript
| 1 | document.getElementById('load-more-btn').addEventListener('click',function(){ |
| 2 | this.classList.add('loading'); |
| 3 | setTimeout(()=>{ |
| 4 | this.classList.remove('loading'); |
| 5 | document.querySelector('.lm-info').textContent='Showing 6 of 47 tasks'; |
| 6 | const container=document.querySelector('.lm-items'); |
| 7 | ['Review pull request #312 for security audit','Update CI pipeline to Node 22 LTS','Migrate user sessions to Redis cluster'].forEach((text,i)=>{ |
| 8 | const item=document.createElement('div'); |
| 9 | item.className='lm-item'; |
| 10 | item.style.opacity='0'; |
| 11 | item.style.transform='translateY(8px)'; |
| 12 | item.innerHTML='<span class="lm-num">'+(i+4)+'</span><span class="lm-text">'+text+'</span>'; |
| 13 | container.appendChild(item); |
| 14 | requestAnimationFrame(()=>{ |
| 15 | item.style.transition='all .3s ease'; |
| 16 | item.style.opacity='1'; |
| 17 | item.style.transform='translateY(0)'; |
| 18 | }); |
| 19 | }); |
| 20 | },800); |
| 21 | }) |
untitled.html
HTML
| 1 | <div class="max-w-md mx-auto p-4 bg-[#0A0A0A]" style="font-family:system-ui,sans-serif"> |
| 2 | <div class="flex flex-col" id="lm-items"> |
| 3 | <div class="flex items-center gap-3 px-3 py-2.5 border-b border-[#1A1A1A] text-xs text-[#A0A0A0] hover:bg-white/[0.02] transition-colors"> |
| 4 | <span class="w-5 h-5 rounded-full bg-white/[0.04] text-[#666] text-[10px] font-semibold flex items-center justify-center flex-shrink-0"> |
| 5 | 1 |
| 6 | </span> |
| 7 | <span class="flex-1 leading-snug"> |
| 8 | Deploy authentication microservice to staging |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="flex items-center gap-3 px-3 py-2.5 border-b border-[#1A1A1A] text-xs text-[#A0A0A0] hover:bg-white/[0.02] transition-colors"> |
| 12 | <span class="w-5 h-5 rounded-full bg-white/[0.04] text-[#666] text-[10px] font-semibold flex items-center justify-center flex-shrink-0"> |
| 13 | 2 |
| 14 | </span> |
| 15 | <span class="flex-1 leading-snug"> |
| 16 | Update rate limiting middleware for v2 API |
| 17 | </span> |
| 18 | </div> |
| 19 | <div class="flex items-center gap-3 px-3 py-2.5 border-b border-[#1A1A1A] text-xs text-[#A0A0A0] hover:bg-white/[0.02] transition-colors"> |
| 20 | <span class="w-5 h-5 rounded-full bg-white/[0.04] text-[#666] text-[10px] font-semibold flex items-center justify-center flex-shrink-0"> |
| 21 | 3 |
| 22 | </span> |
| 23 | <span class="flex-1 leading-snug"> |
| 24 | Fix pagination overflow on mobile viewports |
| 25 | </span> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="flex items-center justify-between pt-3 mt-1"> |
| 29 | <span class="text-[11px] text-[#555]" id="lm-info"> |
| 30 | Showing 3 of 47 tasks |
| 31 | </span> |
| 32 | <button id="lm-btn" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-xs font-medium hover:border-[#00FF41] hover:text-[#00FF41] hover:bg-[rgba(0,255,65,0.05)] transition-all"> |
| 33 | <span id="lm-btn-text"> |
| 34 | Load More |
| 35 | </span> |
| 36 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 37 | <polyline points="6 9 12 15 18 9"/> |
| 38 | </svg> |
| 39 | </button> |
| 40 | </div> |
| 41 | </div> |
| 42 | <script> |
| 43 | document.getElementById('lm-btn').addEventListener('click', function(){ |
| 44 | const btn = this; |
| 45 | const text = document.getElementById('lm-btn-text'); |
| 46 | text.style.display = 'none'; |
| 47 | const spinner = document.createElement('span'); |
| 48 | spinner.className = 'w-3.5 h-3.5 border-2 border-[rgba(0,255,65,0.2)] border-t-[#00FF41] rounded-full animate-spin'; |
| 49 | btn.appendChild(spinner); |
| 50 | setTimeout(()=>{ |
| 51 | text.style.display = 'inline'; |
| 52 | spinner.remove(); |
| 53 | document.getElementById('lm-info').textContent='Showing 6 of 47 tasks'; |
| 54 | const container = document.getElementById('lm-items'); |
| 55 | ['Review pull request #312 for security audit','Update CI pipeline to Node 22 LTS','Migrate user sessions to Redis cluster'].forEach((text,i)=>{ |
| 56 | const item = document.createElement('div'); |
| 57 | item.className = 'flex items-center gap-3 px-3 py-2.5 border-b border-[#1A1A1A] text-xs text-[#A0A0A0] opacity-0 translate-y-2'; |
| 58 | item.innerHTML = ' |
| 59 | <span class="w-5 h-5 rounded-full bg-white/[0.04] text-[#666] text-[10px] font-semibold flex items-center justify-center flex-shrink-0"> |
| 60 | '+(i+4)+' |
| 61 | </span> |
| 62 | <span class="flex-1 leading-snug"> |
| 63 | '+text+' |
| 64 | </span> |
| 65 | '; |
| 66 | container.appendChild(item); |
| 67 | requestAnimationFrame(()=>{ item.classList.add('transition-all','duration-300','opacity-100','translate-y-0'); }); |
| 68 | }); |
| 69 | }, 800); |
| 70 | }); |
| 71 | </script> |
untitled.html
HTML
| 1 | <div class="mx-auto p-3" style="max-width:420px"> |
| 2 | <div class="d-flex flex-column" id="lm-items-bs"> |
| 3 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A1A;font-size:12px;color:#A0A0A0"> |
| 4 | <span class="d-flex align-items-center justify-content-center flex-shrink-0 rounded-circle fw-semibold" style="width:20px;height:20px;background:rgba(255,255,255,0.04);color:#666;font-size:10px"> |
| 5 | 1 |
| 6 | </span> |
| 7 | <span class="flex-fill"> |
| 8 | Deploy authentication microservice to staging |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A1A;font-size:12px;color:#A0A0A0"> |
| 12 | <span class="d-flex align-items-center justify-content-center flex-shrink-0 rounded-circle fw-semibold" style="width:20px;height:20px;background:rgba(255,255,255,0.04);color:#666;font-size:10px"> |
| 13 | 2 |
| 14 | </span> |
| 15 | <span class="flex-fill"> |
| 16 | Update rate limiting middleware for v2 API |
| 17 | </span> |
| 18 | </div> |
| 19 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A1A;font-size:12px;color:#A0A0A0"> |
| 20 | <span class="d-flex align-items-center justify-content-center flex-shrink-0 rounded-circle fw-semibold" style="width:20px;height:20px;background:rgba(255,255,255,0.04);color:#666;font-size:10px"> |
| 21 | 3 |
| 22 | </span> |
| 23 | <span class="flex-fill"> |
| 24 | Fix pagination overflow on mobile viewports |
| 25 | </span> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="d-flex align-items-center justify-content-between pt-3 mt-1"> |
| 29 | <span style="font-size:11px;color:#555" id="lm-info-bs"> |
| 30 | Showing 3 of 47 tasks |
| 31 | </span> |
| 32 | <button class="btn btn-sm d-inline-flex align-items-center gap-1" id="lm-btn-bs" style="--bs-btn-color:#A0A0A0;--bs-btn-bg:transparent;--bs-btn-border-color:#2A2A2A;--bs-btn-hover-color:#00FF41;--bs-btn-hover-bg:rgba(0,255,65,0.05);--bs-btn-hover-border-color:#00FF41;font-size:12px"> |
| 33 | <span id="lm-btn-text-bs"> |
| 34 | Load More |
| 35 | </span> |
| 36 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 37 | <polyline points="6 9 12 15 18 9"/> |
| 38 | </svg> |
| 39 | </button> |
| 40 | </div> |
| 41 | </div> |
| 42 | <script> |
| 43 | document.getElementById('lm-btn-bs').addEventListener('click', function(){ |
| 44 | const btn = this; |
| 45 | const text = document.getElementById('lm-btn-text-bs'); |
| 46 | text.style.display = 'none'; |
| 47 | const spinner = document.createElement('span'); |
| 48 | spinner.className = 'spinner-border spinner-border-sm'; |
| 49 | spinner.style.cssText = 'width:14px;height:14px;border-width:2px;border-color:rgba(0,255,65,0.2);border-top-color:#00FF41'; |
| 50 | btn.appendChild(spinner); |
| 51 | setTimeout(()=>{ |
| 52 | text.style.display = 'inline'; |
| 53 | spinner.remove(); |
| 54 | document.getElementById('lm-info-bs').textContent='Showing 6 of 47 tasks'; |
| 55 | const container = document.getElementById('lm-items-bs'); |
| 56 | ['Review pull request #312 for security audit','Update CI pipeline to Node 22 LTS','Migrate user sessions to Redis cluster'].forEach((text,i)=>{ |
| 57 | const item = document.createElement('div'); |
| 58 | item.className = 'd-flex align-items-center gap-3 px-3 py-2 border-bottom'; |
| 59 | item.style.cssText = 'border-color:#1A1A1A;font-size:12px;color:#A0A0A0;opacity:0;transform:translateY(8px);transition:all .3s ease'; |
| 60 | item.innerHTML = ' |
| 61 | <span class="d-flex align-items-center justify-content-center flex-shrink-0 rounded-circle fw-semibold" style="width:20px;height:20px;background:rgba(255,255,255,0.04);color:#666;font-size:10px"> |
| 62 | '+(i+4)+' |
| 63 | </span> |
| 64 | <span class="flex-fill"> |
| 65 | '+text+' |
| 66 | </span> |
| 67 | '; |
| 68 | container.appendChild(item); |
| 69 | requestAnimationFrame(()=>{ item.style.opacity='1'; item.style.transform='translateY(0)'; }); |
| 70 | }); |
| 71 | }, 800); |
| 72 | }); |
| 73 | </script> |
Jump to Page Input
For large datasets (100+ pages), a page number input lets users jump directly to a specific page. The input validates bounds and shows the total page count. Essential for admin dashboards and data-heavy UIs.
jump-to-page
Live
untitled.html
HTML
| 1 | <div class="jump-demo"> |
| 2 | <nav class="pagination" aria-label="Pagination"> |
| 3 | <button class="page-btn" aria-label="Previous"> |
| 4 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <polyline points="15 18 9 12 15 6"/> |
| 6 | </svg> |
| 7 | </button> |
| 8 | <button class="page-btn"> |
| 9 | 1 |
| 10 | </button> |
| 11 | <span class="page-ellipsis" aria-hidden="true"> |
| 12 | ··· |
| 13 | </span> |
| 14 | <button class="page-btn"> |
| 15 | 18 |
| 16 | </button> |
| 17 | <button class="page-btn active" aria-current="page"> |
| 18 | 19 |
| 19 | </button> |
| 20 | <button class="page-btn"> |
| 21 | 20 |
| 22 | </button> |
| 23 | <span class="page-ellipsis" aria-hidden="true"> |
| 24 | ··· |
| 25 | </span> |
| 26 | <button class="page-btn"> |
| 27 | 52 |
| 28 | </button> |
| 29 | <button class="page-btn" aria-label="Next"> |
| 30 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 31 | <polyline points="9 18 15 12 9 6"/> |
| 32 | </svg> |
| 33 | </button> |
| 34 | </nav> |
| 35 | <div class="jump-input-wrap"> |
| 36 | <span class="jump-label"> |
| 37 | Go to |
| 38 | </span> |
| 39 | <input type="number" class="jump-input" min="1" max="52" value="19" /> |
| 40 | <span class="jump-total"> |
| 41 | of 52 |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | .jump-demo { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | gap:20px; |
| 5 | padding:20px 24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif; |
| 8 | flex-wrap:wrap; |
| 9 | justify-content:center |
| 10 | } |
| 11 | .pagination { |
| 12 | display:flex; |
| 13 | align-items:center; |
| 14 | gap:4px; |
| 15 | margin:0 |
| 16 | } |
| 17 | .page-btn { |
| 18 | display:inline-flex; |
| 19 | align-items:center; |
| 20 | justify-content:center; |
| 21 | min-width:36px; |
| 22 | height:36px; |
| 23 | padding:0 10px; |
| 24 | border-radius:8px; |
| 25 | border:1px solid #2A2A2A; |
| 26 | background:transparent; |
| 27 | color:#A0A0A0; |
| 28 | font-size:13px; |
| 29 | font-weight:500; |
| 30 | cursor:pointer; |
| 31 | transition:all .2s |
| 32 | } |
| 33 | .page-btn:hover:not(.active) { |
| 34 | border-color:#3A3A3A; |
| 35 | color:#E0E0E0; |
| 36 | background:rgba(255, |
| 37 | 255, |
| 38 | 255, |
| 39 | .03) |
| 40 | } |
| 41 | .page-btn.active { |
| 42 | background:#00FF41; |
| 43 | color:#0A0A0A; |
| 44 | border-color:#00FF41; |
| 45 | font-weight:700 |
| 46 | } |
| 47 | .page-btn svg { |
| 48 | flex-shrink:0 |
| 49 | } |
| 50 | .page-ellipsis { |
| 51 | display:inline-flex; |
| 52 | align-items:center; |
| 53 | justify-content:center; |
| 54 | min-width:36px; |
| 55 | height:36px; |
| 56 | color:#555; |
| 57 | font-size:14px; |
| 58 | letter-spacing:2px; |
| 59 | user-select:none |
| 60 | } |
| 61 | .jump-input-wrap { |
| 62 | display:flex; |
| 63 | align-items:center; |
| 64 | gap:8px; |
| 65 | font-size:12px; |
| 66 | color:#808080 |
| 67 | } |
| 68 | .jump-label { |
| 69 | color:#666 |
| 70 | } |
| 71 | .jump-input { |
| 72 | width:48px; |
| 73 | height:32px; |
| 74 | border-radius:6px; |
| 75 | border:1px solid #2A2A2A; |
| 76 | background:#0A0A0A; |
| 77 | color:#E0E0E0; |
| 78 | font-size:13px; |
| 79 | text-align:center; |
| 80 | outline:none; |
| 81 | padding:0 |
| 82 | } |
| 83 | .jump-input:focus { |
| 84 | border-color:#00FF41; |
| 85 | box-shadow:0 0 0 2px rgba(0, |
| 86 | 255, |
| 87 | 65, |
| 88 | .1) |
| 89 | } |
| 90 | .jump-input::-webkit-inner-spin-button, |
| 91 | .jump-input::-webkit-outer-spin-button { |
| 92 | -webkit-appearance:none; |
| 93 | margin:0 |
| 94 | } |
| 95 | .jump-total { |
| 96 | color:#555 |
| 97 | } |
untitled.html
HTML
| 1 | <div class="flex items-center flex-wrap justify-center gap-5 p-6 bg-[#0A0A0A]"> |
| 2 | <nav class="flex items-center gap-1 m-0" aria-label="Pagination"> |
| 3 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Previous"> |
| 4 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 5 | <polyline points="15 18 9 12 15 6"/> |
| 6 | </svg> |
| 7 | </button> |
| 8 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 9 | 1 |
| 10 | </button> |
| 11 | <span class="inline-flex items-center justify-center min-w-[36px] h-9 text-[#555] text-sm tracking-widest select-none" aria-hidden="true"> |
| 12 | ··· |
| 13 | </span> |
| 14 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 15 | 18 |
| 16 | </button> |
| 17 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] text-[13px] font-bold" aria-current="page"> |
| 18 | 19 |
| 19 | </button> |
| 20 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 21 | 20 |
| 22 | </button> |
| 23 | <span class="inline-flex items-center justify-center min-w-[36px] h-9 text-[#555] text-sm tracking-widest select-none" aria-hidden="true"> |
| 24 | ··· |
| 25 | </span> |
| 26 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]"> |
| 27 | 52 |
| 28 | </button> |
| 29 | <button class="inline-flex items-center justify-center min-w-[36px] h-9 px-2.5 rounded-lg border border-[#2A2A2A] bg-transparent text-[#A0A0A0] text-[13px] font-medium hover:border-[#3A3A3A] hover:text-[#E0E0E0] hover:bg-white/[0.03]" aria-label="Next"> |
| 30 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 31 | <polyline points="9 18 15 12 9 6"/> |
| 32 | </svg> |
| 33 | </button> |
| 34 | </nav> |
| 35 | <div class="flex items-center gap-2 text-xs text-[#808080]"> |
| 36 | <span class="text-[#666]"> |
| 37 | Go to |
| 38 | </span> |
| 39 | <input type="number" min="1" max="52" defaultValue="19" class="w-12 h-8 rounded-md border border-[#2A2A2A] bg-[#0A0A0A] text-[#E0E0E0] text-[13px] text-center outline-none focus:border-[#00FF41] focus:shadow-[0_0_0_2px_rgba(0,255,65,0.1)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" /> |
| 40 | <span class="text-[#555]"> |
| 41 | of 52 |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex align-items-center flex-wrap justify-content-center gap-4 p-4"> |
| 2 | <nav aria-label="Pagination"> |
| 3 | <ul class="pagination mb-0" style="--bs-pagination-color:#A0A0A0;--bs-pagination-bg:transparent;--bs-pagination-border-color:#2A2A2A;--bs-pagination-hover-color:#E0E0E0;--bs-pagination-hover-bg:rgba(255,255,255,0.03);--bs-pagination-hover-border-color:#3A3A3A;--bs-pagination-active-color:#0A0A0A;--bs-pagination-active-bg:#00FF41;--bs-pagination-active-border-color:#00FF41"> |
| 4 | <li class="page-item"> |
| 5 | <button class="page-link" aria-label="Previous"> |
| 6 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 7 | <polyline points="15 18 9 12 15 6"/> |
| 8 | </svg> |
| 9 | </button> |
| 10 | </li> |
| 11 | <li class="page-item"> |
| 12 | <button class="page-link"> |
| 13 | 1 |
| 14 | </button> |
| 15 | </li> |
| 16 | <li class="page-item disabled"> |
| 17 | <span class="page-link" aria-hidden="true"> |
| 18 | ··· |
| 19 | </span> |
| 20 | </li> |
| 21 | <li class="page-item"> |
| 22 | <button class="page-link"> |
| 23 | 18 |
| 24 | </button> |
| 25 | </li> |
| 26 | <li class="page-item active" aria-current="page"> |
| 27 | <button class="page-link"> |
| 28 | 19 |
| 29 | </button> |
| 30 | </li> |
| 31 | <li class="page-item"> |
| 32 | <button class="page-link"> |
| 33 | 20 |
| 34 | </button> |
| 35 | </li> |
| 36 | <li class="page-item disabled"> |
| 37 | <span class="page-link" aria-hidden="true"> |
| 38 | ··· |
| 39 | </span> |
| 40 | </li> |
| 41 | <li class="page-item"> |
| 42 | <button class="page-link"> |
| 43 | 52 |
| 44 | </button> |
| 45 | </li> |
| 46 | <li class="page-item"> |
| 47 | <button class="page-link" aria-label="Next"> |
| 48 | <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| 49 | <polyline points="9 18 15 12 9 6"/> |
| 50 | </svg> |
| 51 | </button> |
| 52 | </li> |
| 53 | </ul> |
| 54 | </nav> |
| 55 | <div class="d-flex align-items-center gap-2" style="font-size:12px;color:#808080"> |
| 56 | <span style="color:#666"> |
| 57 | Go to |
| 58 | </span> |
| 59 | <input type="number" min="1" max="52" value="19" class="form-control form-control-sm text-center" style="width:48px;background:#0A0A0A;color:#E0E0E0;border-color:#2A2A2A"> |
| 60 | <span style="color:#555"> |
| 61 | of 52 |
| 62 | </span> |
| 63 | </div> |
| 64 | </div> |
HTML Structure
Use a <nav> element with aria-label="Pagination". Mark the active page with aria-current="page" and disable prev/next at boundaries with the disabled attribute.
pagination-structure.html
HTML
| 1 | <nav class="pagination" aria-label="Pagination"> |
| 2 | <button class="page-btn" disabled aria-label="Previous"> |
| 3 | <svg><!-- chevron left --></svg> |
| 4 | </button> |
| 5 | <button class="page-btn">1</button> |
| 6 | <button class="page-btn">2</button> |
| 7 | <button class="page-btn active" aria-current="page">3</button> |
| 8 | <button class="page-btn">4</button> |
| 9 | <button class="page-btn">5</button> |
| 10 | <button class="page-btn" aria-label="Next"> |
| 11 | <svg><!-- chevron right --></svg> |
| 12 | </button> |
| 13 | </nav> |
Accessibility
Pagination is a navigation landmark. Treat it as part of the page structure, not just visual chrome.
- Use a real <nav> element and real <button> elements so screen readers expose the landmark and actionable roles.
- Provide a visible focus ring on every page button — never remove outline without a replacement that meets 3:1 contrast.
- Add descriptive aria-label text to prev/next arrow buttons, e.g. aria-label="Previous page".
- Mark the active page with aria-current="page" so assistive tech announces "current page".
- Disable boundary prev/next buttons with disabled when on the first or last page, rather than hiding them.
- Ensure full keyboard support: Tab moves between page buttons and Enter / Space activates them.
Best Practices
- Use aria-current="page" on the active page for screen reader announcements.
- Disable prev/next buttons at boundaries rather than hiding them — consistency helps muscle memory.
- Show total result count and current range alongside pagination controls.
- For 100+ pages, truncate with ellipsis — showing first, last, and 2–3 neighbors of the current page.
- On mobile, consider collapsing to prev/next only with a page indicator (e.g., "Page 3 of 12").
- Sync URL query params (?page=3) so pagination states are shareable and bookmarkable.
- For datasets under 20 items, consider a "Load More" button instead of traditional numbered pagination.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.