Documentation and examples for showing pagination to indicate a series of related content exists across multiple
pages.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
Pagination classes for First, Last, Next and Previous elements are .first
, .last
, .next
and .prev
or .previous
respectively and use these classes along with .page-item
class.
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="ri-skip-back-mini-line"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="ri-arrow-left-s-line"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="ri-arrow-right-s-line"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Class | Value |
---|---|
class="pagination pagination-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Pagination links are customizable for different circumstances. Use .disabled
for links that
appear un-clickable and .active
to indicate the current page.
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item first disabled">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></i></a>
</li>
<li class="page-item prev disabled">
<a class="page-link" href="#"><i class="ri-arrow-left-s-line"></i></a>
</li>
<li class="page-item active">
<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="#">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Add .pagination-outline-*
class with .pagination
class for bordered pagination
style.
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-arrow-left-s-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Class | Value |
---|---|
class="pagination pagination-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Just add class .pagination-rounded
with class .pagination
to create rounded
pagination.
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded">
<li class="page-item first">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-arrow-left-s-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Just add class .pagination-rounded
and pagination-outline-*
with class .pagination
to create outline rounded
pagination.
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-arrow-left-s-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-arrow-right-s-line"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for
additional sizes.
<!-- Small Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line ri-14px"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-14px"></i></a>
</li>
</ul>
</nav>
<!-- Default Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
<!-- Large Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line ri-20px"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-20px"></i></a>
</li>
</ul>
</nav>
Change the alignment of pagination components with flexbox utilities.
<!-- Default Left Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
<!-- Center Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
<!-- Right Alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item prev">
<a class="page-link" href="#"><i class="ri-skip-back-mini-line"></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">
<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 next">
<a class="page-link" href="#"><i class="ri-skip-forward-mini-line"></i></a>
</li>
</ul>
</nav>
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via
CSS.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
The example below is the basic styling of the breadcrumb and basic styling with icons.
<!-- Basic Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Home</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!-- Basic Breadcrumb with icon -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Home</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Library</a>
</li>
<li class="breadcrumb-item active">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Data</a>
</li>
</ol>
</nav>
Custom styling of the breadcrumb used by this template. Use class .breadcrumb-style1
and
.breadcrumb-style2
for these breadcrumb styles.
<!-- Style1 Breadcrumb-->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-style1">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!-- Style2 Breadcrumb-->
<nav aria-label="breadcrumb mb-0">
<ol class="breadcrumb breadcrumb-style2">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>