Pagination
Colors
Add a container element with the pagination class.
And add child elements with the page-item class.
The page-item with the active class will be highlighted.
You can add the disabled class to the page-item to have unclickable page links.
<ul class="pagination">
<li class="page-item">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a href="#">1</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">4</a>
</li>
<li class="page-item active">
<a href="#">5</a>
</li>
<li class="page-item">
<a href="#">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">9</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
<ul class="pagination">
<li class="page-item disabled">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active">
<a href="#">1</a>
</li>
<li class="page-item">
<a href="#">2</a>
</li>
<li class="page-item">
<a href="#">3</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">12</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
Previous & next
You could use previous and next pagination to navigate.
<ul class="pagination">
<li class="page-item page-prev">
<a href="#">
<span class="page-item-subtitle">Previous</span>
<span class="page-item-title">Getting started</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span class="page-item-subtitle">Next</span>
<span class="page-item-title">Layout</span>
</a>
</li>
</ul>
Previous & next - Border
Add the pagination-border class to main element to have border around page items.
<ul class="pagination pagination-border"> <!-- Add .pagination-border class here -->
<li class="page-item page-prev">
<a href="#">
<span class="page-item-subtitle">Previous - Getting started</span>
<span class="page-item-title">Variables</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span class="page-item-subtitle">Getting started - Next</span>
<span class="page-item-title">Browser support</span>
</a>
</li>
</ul>
Previous & next - Border with icons
Add an additional pagination-icon class to main element and add icon <i class="fa-solid fa-arrow-left-long"></i> in the page item left and add item <i class="fa-solid fa-arrow-right-long"></i> in the page item right to have page item with arrows.
<ul class="pagination pagination-border pagination-icon"> <!-- Add .pagination-icon class here -->
<li class="page-item page-prev">
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Previous</span>
<span class="page-item-title">Getting started</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next</span>
<span class="page-item-title">Layout</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
Pagination - State
Pagination - State active
To activate one of the pages add .active class to the element with the .page-item class.
<ul class="pagination">
<li class="page-item">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a href="#">1</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item active"> <!-- Add active class here -->
<a href="#">4</a>
</li>
<li class="page-item">
<a href="#">5</a>
</li>
<li class="page-item">
<a href="#">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">9</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
Activate the left or right page item by adding the .active class to the .page-prev or .page-next.
<ul class="pagination pagination-border pagination-icon">
<li class="page-item page-prev active"> <!-- Add class active here -->
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
Activate both, the left and right page items by adding the .active class to the .page-prev and .page-next, or add .active / .pagination-active to the container element.
<ul class="pagination pagination-border pagination-icon active"> <!-- Add class active here -->
<li class="page-item page-prev">
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
Pagination - Disabled
To disable one of the pages add .disabled class to the element with the .page-item class.
<ul class="pagination">
<li class="page-item">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a href="#">1</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item active disabled"> <!-- Add .disabled class here -->
<a href="#">4</a>
</li>
<li class="page-item">
<a href="#">5</a>
</li>
<li class="page-item">
<a href="#">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">9</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
To disable pagination add .disabled / .pagination-disabled class to the container element with the pagination.
<ul class="pagination pagination-disabled"> <!-- Add .disabled / .pagination-disabled class here -->
<li class="page-item">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a href="#">1</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item active"> <!-- Add .disabled class here -->
<a href="#">4</a>
</li>
<li class="page-item">
<a href="#">5</a>
</li>
<li class="page-item">
<a href="#">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">9</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
To disable left or right page item add the .disabled class to the .page-prev or .page-next.
<ul class="pagination pagination-border pagination-icon">
<li class="page-item page-prev disabled"> <!-- Add disabled here -->
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
To disable both, left and right page items add to both .disabled class or add .disabled / .pagination-disabled class to the container element.
<ul class="pagination pagination-border pagination-icon disabled"> <!-- Add .disabled here -->
<li class="page-item page-prev">
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
Pagination - Colors
The following table contains the available colors for the pagination.
If the color dark is available then add to the class name suffix -dark, for example, to gray color pagination-gray-dark.
| Code | Available | Dark | Light | |
|---|---|---|---|---|
| Dark | pagination-dark |
|||
| Light | pagination-light |
|||
| Accent | pagination-accent |
|||
| Primary | pagination-primary |
|||
| Secondary | pagination-secondary |
|||
| Gray | pagination-gray |
|||
| Bg | pagination-bg |
|||
| Border | pagination-border* |
|||
| Link | pagination-link |
|||
| Disabled | pagination-disabled |
|||
| Error | pagination-error |
|||
| Info | pagination-info |
|||
| Success | pagination-success |
|||
| Body bg | pagination-body-bg |
|||
| Body font | pagination-body-font |
|||
| Code | pagination-code |
|||
| Highlight | pagination-highlight |
Pagination - Accent color
This is the only example of the accent color.
<ul class="pagination pagination-accent">
<li class="page-item">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item ">
<a href="#">1</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">4</a>
</li>
<li class="page-item active">
<a href="#">5</a>
</li>
<li class="page-item">
<a href="#">6</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">9</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
<!-- Add accent here -->
<ul class="pagination pagination-border pagination-icon pagination-accent">
<li class="page-item page-prev disabled"> <!-- Add disabled here -->
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>
<!-- Add accent here -->
<ul class="pagination pagination-border pagination-icon pagination-accent">
<li class="page-item page-prev active"> <!-- Add active here -->
<a href="#">
<i class="fa-solid fa-arrow-left-long"></i>
<span>
<span class="page-item-subtitle">Getting started - Previous</span>
<span class="page-item-title">Variables</span>
</span>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<span>
<span class="page-item-subtitle">Next - Getting started</span>
<span class="page-item-title">Browser support</span>
</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</li>
</ul>