Pagination

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.

Basic Pagination#

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 ri-22px"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="javascript:void(0);"><i class="ri-arrow-left-s-line ri-22px"></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 ri-22px"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="javascript:void(0);"><i class="ri-skip-forward-mini-line ri-22px"></i></a>
    </li>
  </ul>
</nav>
Class Value
class="pagination pagination-{value}" primary | secondary | success | danger | warning | info | dark

Disabled Pagination#

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 ri-22px"></i></a>
    </li>
    <li class="page-item prev disabled">
      <a class="page-link" href="#"><i class="ri-arrow-left-s-line ri-22px"></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 ri-22px"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-22px"></i></a>
    </li>
  </ul>
</nav>

Outline Pagination PRO#

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 ri-22px"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="ri-arrow-left-s-line ri-22px"></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 ri-22px"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-22px"></i></a>
    </li>
  </ul>
</nav>
Class Value
class="pagination pagination-outline-{value}" primary | secondary | success | danger | warning | info | dark

Pagination Shape PRO#

Rounded pagination#

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 ri-22px"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="ri-arrow-left-s-line ri-22px"></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 ri-22px"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-22px"></i></a>
    </li>
  </ul>
</nav>
Outline Rounded pagination PRO#

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 ri-22px"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="ri-arrow-left-s-line ri-22px"></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 ri-22px"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="ri-skip-forward-mini-line ri-22px"></i></a>
    </li>
  </ul>
</nav>

Pagination Sizes#

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-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>

<!-- 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 ri-22px"></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-22px"></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-24px"></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-24px"></i></a>
    </li>
  </ul>
</nav>

Pagination Alignments#

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 ri-22px"></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-22px"></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 ri-22px"></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-22px"></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 ri-22px"></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-22px"></i></a>
    </li>
  </ul>
</nav>

Breadcrumbs#

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.

Basic Breadcrumb#

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 Breadcrumb#

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>
© 2017- 2025 Pixinvent, Hand-crafted & Made with ❤️