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="#"><i class="bx bx-chevrons-left"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="bx bx-chevron-left"></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="bx bx-chevron-right"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right"></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="bx bx-chevrons-left"></i></a>
    </li>
    <li class="page-item prev disabled">
      <a class="page-link" href="#"><i class="bx bx-chevron-left"></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="bx bx-chevron-right"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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="tf-icon bx bx-chevrons-left"></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="tf-icon bx bx-chevrons-right"></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. 

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <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>

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