Pagination
Use pagination elements to organize posts or other models of data into groups
Pagination example
The following example is the basic pagination style:
<nav aria-label="Blog page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
Pagination with text nav
The following example is the pagination style with text for navigating left or right:
<nav aria-label="Products page navigation">
<ul class="pagination">
<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">
<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>
Rounded Pagination
<nav aria-label="Page navigation example">
<ul class="pagination circle-pagination">
<li class="page-item">
<a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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="#"><i class="fas fa-angle-double-right"></i></a>
</li>
</ul>
</nav>
Disabled and active states
<nav aria-label="Templates page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" aria-label="first link" tabindex="-1" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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" aria-label="first link" href="#">Next</a>
</li>
</ul>
</nav>
Sizing
Use the modifier classes .pagination-lg
and .pagination-sm
to change the size of the elements:
<nav aria-label="Default page navigation">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
<nav aria-label="Themesberg page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>
<nav aria-label="Posts navigation example">
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<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" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
</li>
</ul>
</nav>