Pagination
Pagination splits long lists, tables and search results into pages. The examples go from the basic markup and sizes to alignment, ellipsis for long ranges, table and grid footers, custom shapes and compact pagers for small screens.
1Basic pagination
Previous, numbered pages and next, wrapped in a <code>nav</code> with an accessible label.
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>2Arrow icons
Replace the words with symbols and keep an <code>aria-label</code> for screen readers.
<nav aria-label="Results pages">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>3Active and disabled
The current page is <code>.active</code>; Previous is <code>.disabled</code> on the first page.
<nav aria-label="Article pages">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link">Previous</a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>4Large
<code>.pagination-lg</code> for touch-friendly, prominent controls.
<nav aria-label="Large pagination">
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>5Small
<code>.pagination-sm</code> for tables and compact widgets.
<nav aria-label="Small pagination">
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></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 active" aria-current="page"><a class="page-link" href="#">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"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>6Centered
<code>.justify-content-center</code> on the list centers it.
<nav aria-label="Centered pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link">Previous</a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>7Right aligned
<code>.justify-content-end</code> moves it to the right edge.
<nav aria-label="Right aligned pagination">
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>8With ellipsis
Show the first and last page and a few around the current one; dots stand for the skipped pages.
<nav aria-label="Long pagination">
<ul class="pagination flex-wrap">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><span class="page-link">…</span></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item disabled"><span class="page-link">…</span></li>
<li class="page-item"><a class="page-link" href="#">37</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>9First and last buttons
Double chevrons jump to the start or end of a long list.
<nav aria-label="Jump pagination">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="First"><i class="bi bi-chevron-double-left" aria-hidden="true"></i></a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="bi bi-chevron-left" aria-hidden="true"></i></a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">10</a></li>
<li class="page-item"><a class="page-link" href="#">11</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="bi bi-chevron-right" aria-hidden="true"></i></a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Last"><i class="bi bi-chevron-double-right" aria-hidden="true"></i></a></li>
</ul>
</nav>10Pager
Only older/newer links spread across the width - for blogs and articles.
<nav aria-label="Post navigation">
<ul class="pagination justify-content-between">
<li class="page-item"><a class="page-link" href="#"><i class="bi bi-arrow-left" aria-hidden="true"></i> Older posts</a></li>
<li class="page-item disabled"><a class="page-link">Newer posts <i class="bi bi-arrow-right" aria-hidden="true"></i></a></li>
</ul>
</nav>11Round buttons
Circular page buttons with a little space between them; a scoped class sets the shape.
<nav aria-label="Round pagination">
<ul class="pagination cb-pg-round">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="bi bi-chevron-left" aria-hidden="true"></i></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 active" aria-current="page"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="bi bi-chevron-right" aria-hidden="true"></i></a></li>
</ul>
</nav>12Separated boxes
Each page as its own rounded box, using the theme radius.
<nav aria-label="Separated pagination">
<ul class="pagination cb-pg-gap flex-wrap">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">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"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>13With results count
A summary of the visible range on one side and the controls on the other; stacks on phones.
Showing 11-20 of 743 results
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-between gap-2">
<p class="small text-body-secondary mb-0">Showing <strong>11-20</strong> of <strong>743</strong> results</p>
<nav aria-label="Results">
<ul class="pagination pagination-sm mb-0">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>14Page size selector
Let users choose how many rows they see next to the page links.
<div class="d-flex flex-wrap align-items-center gap-3">
<div class="d-flex align-items-center gap-2">
<label for="pg-size-1113" class="small text-nowrap">Rows per page</label>
<select class="form-select form-select-sm" id="pg-size-1113" style="width:auto">
<option>10</option>
<option selected>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<nav aria-label="Table pages">
<ul class="pagination pagination-sm mb-0 ms-sm-auto">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>15Jump to page
A number input with a Go button for very long lists.
<div class="d-flex flex-wrap align-items-center gap-3">
<nav aria-label="Catalogue pages">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="bi bi-chevron-left" aria-hidden="true"></i></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><span class="page-link">…</span></li>
<li class="page-item"><a class="page-link" href="#">33</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="bi bi-chevron-right" aria-hidden="true"></i></a></li>
</ul>
</nav>
<form class="d-flex align-items-center gap-2">
<label for="pg-jump-1114" class="small text-nowrap">Go to</label>
<input type="number" class="form-control form-control-sm" id="pg-jump-1114" min="1" max="33" value="2" style="width:5rem">
<button type="submit" class="btn btn-sm btn-outline-primary">Go</button>
</form>
</div>16Table footer
Pagination in a card footer under a data table.
| Name | Role | Status |
|---|---|---|
| Lea Lindqvist | Content Writer | Draft |
| Theo Sato | Frontend Engineer | Draft |
| Liam Kowalski | Art Director | Pending |
| Ella Quinn | Customer Success | Approved |
<div class="card">
<div class="table-responsive">
<table class="table mb-0 align-middle">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lea Lindqvist</td>
<td>Content Writer</td>
<td><span class="badge text-bg-light border">Draft</span></td>
</tr>
<tr>
<td>Theo Sato</td>
<td>Frontend Engineer</td>
<td><span class="badge text-bg-light border">Draft</span></td>
</tr>
<tr>
<td>Liam Kowalski</td>
<td>Art Director</td>
<td><span class="badge text-bg-light border">Pending</span></td>
</tr>
<tr>
<td>Ella Quinn</td>
<td>Customer Success</td>
<td><span class="badge text-bg-light border">Approved</span></td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer d-flex justify-content-between align-items-center">
<small class="text-body-secondary">Page 1 of 12</small>
<nav aria-label="Member pages">
<ul class="pagination pagination-sm mb-0">
<li class="page-item disabled"><a class="page-link">Previous</a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>17Below a card grid
Centered pagination closing a grid of product cards.
Early bird pass
$278.00
Student pass
$148.99
VIP pass
$818.00
<div class="row g-3 mb-3">
<div class="col-sm-4">
<div class="card h-100">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Early bird pass">
<div class="card-body p-2">
<p class="small fw-semibold mb-0">Early bird pass</p>
<p class="small text-body-secondary mb-0">$278.00</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card h-100">
<img src="../assets/img/product-8.svg" class="card-img-top" alt="Student pass">
<div class="card-body p-2">
<p class="small fw-semibold mb-0">Student pass</p>
<p class="small text-body-secondary mb-0">$148.99</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card h-100">
<img src="../assets/img/product-4.svg" class="card-img-top" alt="VIP pass">
<div class="card-body p-2">
<p class="small fw-semibold mb-0">VIP pass</p>
<p class="small text-body-secondary mb-0">$818.00</p>
</div>
</div>
</div>
</div>
<nav aria-label="Product pages">
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="bi bi-arrow-left" aria-hidden="true"></i></a></li>
<li class="page-item active" aria-current="page"><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" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="bi bi-arrow-right" aria-hidden="true"></i></a></li>
</ul>
</nav>18Accent active page
Override the pagination CSS variables to colour the active page with the template accent.
<nav aria-label="Accent pagination">
<ul class="pagination" style="--ui-pagination-active-bg: var(--wt-accent); --ui-pagination-active-border-color: var(--wt-accent); --ui-pagination-color: var(--wt-text); --ui-pagination-hover-color: var(--wt-accent)">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>19Compact mobile pager
A button group with a page counter in the middle - fits any phone screen.
Page 3 of 27
<div class="btn-group" role="group" aria-label="Pages">
<button type="button" class="btn btn-outline-secondary" aria-label="Previous page"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
<span class="btn btn-outline-secondary pe-none text-body">Page 3 of 27</span>
<button type="button" class="btn btn-outline-secondary" aria-label="Next page"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
</div>20Load more
An alternative to numbered pages: a progress line showing how much is loaded and a load-more button.
You have viewed 24 of 82 items
<div class="text-center" style="max-width:360px;margin:0 auto">
<p class="small text-body-secondary mb-2">You have viewed 24 of 82 items</p>
<div class="progress mb-3" role="progressbar" aria-label="Items loaded" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100" style="height:4px">
<div class="progress-bar" style="width:29%">
</div>
</div>
<button type="button" class="btn btn-outline-primary"><i class="bi bi-arrow-down-circle-fill" aria-hidden="true"></i> Load more</button>
</div>