🤩
Windframe Import update is finally here!

Pagination

Bootstrap 5 Pagination

Bootstrap 5 Pagination is a component that indicates the presence of a succession of linked content over numerous pages and allows navigation between them.

For pagination, we use a huge block of connected links, which makes connections easy to spot and scalable—all while delivering large hit zones. List HTML elements are used in pagination so that screen readers may announce the number of available links. We utilize a wrapping <nav> element to signal to screen readers and other assistive technology that this is a navigation section.

Default Pagination

Bootstrap Pagination Default

html
html
<nav aria-label="Page navigation example">
<ul class="pagination">
<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">
<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>

Rounded Pagination

To make your pagination links more rounded, use the page-link-round property.

Bootstrap Pagination Rounded

html
html
<nav aria-label="Page navigation example">
<ul class="pagination pagination-dark">
<li class="page-item">
<a class="page-link page-link-round" href="#">Prev</a>
</li>
<li class="page-item">
<a class="page-link page-link-round" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link page-link-round" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link page-link-round" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link page-link-round" href="#">Next</a>
</li>
</ul>
</nav>

Different Pagination Styling

Bootstrap Pagination Styling

html
html
<ul class="pagination">
<li class="page-item">
<a class="page-link text-dark bg-light" href="#">Prev</a>
</li>
<li class="page-item"
<a class="page-link text-dark bg-light" href="#">1</a>\
</li>
<li class="page-item">
<a class="page-link text-dark bg-light" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-light" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-light" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link text-dark bg-warning" href="#">Prev</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-warning" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-warning" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-warning" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link text-dark bg-warning" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link text-white bg-danger" href="#">Prev</a>
</li>
<li class="page-item">
<a class="page-link text-white bg-danger" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link text-white bg-danger" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link text-white bg-danger" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link text-white bg-danger" href="#">Next</a>
</li>
</ul>
</nav>

Different Sizes

With the Contrast Bootstrap Pagination we can define how little or large you want your pagination to be. Use pagination-lg to have a much larger pagination, and pagination-sm to have a smaller sized pagination. The default size is medium.

Bootstrap Pagination Different Sizes

html
html
<nav aria-label="Page navigation example">
<ul class="pagination pagination-lg">
<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">
<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>
<nav aria-label="Page navigation example">
<ul class="pagination">
<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">
<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>
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm">
<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">
<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>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast