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-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-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="#">32</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-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 21-30 of 144 results
<div class="flex flex-col sm:flex-row items-center justify-between gap-2">
<p class="small text-muted mb-0">Showing <strong>21-30</strong> of <strong>144</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="#">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="#">Next</a></li>
</ul>
</nav>
</div>14Page size selector
Let users choose how many rows they see next to the page links.
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<label for="pg-size-1113" class="small whitespace-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 sm:ms-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="flex flex-wrap items-center gap-4">
<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="#">24</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="flex items-center gap-2">
<label for="pg-jump-1114" class="small whitespace-nowrap">Go to</label>
<input type="number" class="form-control form-control-sm" id="pg-jump-1114" min="1" max="24" 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 |
|---|---|---|
| Amara Okafor | Finance Lead | Cancelled |
| Amara Ortega | Support Specialist | Active |
| Theo Ibrahim | Product Designer | Pending |
| Ravi Brennan | Support Specialist | Pending |
<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>Amara Okafor</td>
<td>Finance Lead</td>
<td><span class="badge text-bg-light border">Cancelled</span></td>
</tr>
<tr>
<td>Amara Ortega</td>
<td>Support Specialist</td>
<td><span class="badge text-bg-light border">Active</span></td>
</tr>
<tr>
<td>Theo Ibrahim</td>
<td>Product Designer</td>
<td><span class="badge text-bg-light border">Pending</span></td>
</tr>
<tr>
<td>Ravi Brennan</td>
<td>Support Specialist</td>
<td><span class="badge text-bg-light border">Pending</span></td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer flex justify-between items-center">
<small class="text-muted">Page 1 of 10</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.
Brand sprint
$433.00
Social kit
$147.00
Design retainer
$348.99
<div class="row g-3 mb-4">
<div class="col-sm-4">
<div class="card h-full">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Brand sprint">
<div class="card-body p-2">
<p class="small font-semibold mb-0">Brand sprint</p>
<p class="small text-muted mb-0">$433.00</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card h-full">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Social kit">
<div class="card-body p-2">
<p class="small font-semibold mb-0">Social kit</p>
<p class="small text-muted mb-0">$147.00</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card h-full">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Design retainer">
<div class="card-body p-2">
<p class="small font-semibold mb-0">Design retainer</p>
<p class="small text-muted mb-0">$348.99</p>
</div>
</div>
</div>
</div>
<nav aria-label="Product pages">
<ul class="pagination justify-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 21
<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 disabled text-body">Page 3 of 21</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 145 items
<div class="text-center" style="max-width:360px;margin:0 auto">
<p class="small text-muted mb-2">You have viewed 24 of 145 items</p>
<div class="progress mb-4" role="progressbar" aria-label="Items loaded" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100" style="height:4px">
<div class="progress-bar" style="width:16%">
</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>