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="bx bx-chevrons-left bx-sm"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="javascript:void(0);"><i class="bx bx-chevron-left bx-sm"></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="bx bx-chevron-right bx-sm"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="javascript:void(0);"><i class="bx bx-chevrons-right bx-sm"></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 bx-sm"></i></a>
    </li>
    <li class="page-item prev disabled">
      <a class="page-link" href="#"><i class="bx bx-chevron-left bx-sm"></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 bx-sm"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right bx-sm"></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="bx bx-chevrons-left bx-sm"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="bx bx-chevron-left bx-sm"></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 bx-sm"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right bx-sm"></i></a>
    </li>
  </ul>
</nav>
Class Value
class="pagination pagination-outline-{value}" primary | secondary | success | danger | warning | info | dark

Pagination Shapes PRO

Rounded pagination

Just add class .pagination-round 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="bx bx-chevrons-left bx-sm"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="bx bx-chevron-left bx-sm"></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 bx-sm"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right bx-sm"></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="bx bx-chevrons-left bx-sm"></i></a>
    </li>
    <li class="page-item prev">
      <a class="page-link" href="#"><i class="bx bx-chevron-left bx-sm"></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 bx-sm"></i></a>
    </li>
    <li class="page-item last">
      <a class="page-link" href="#"><i class="bx bx-chevrons-right bx-sm"></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="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-xs"></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="tf-icon bx bx-chevrons-right bx-xs"></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="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></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="tf-icon bx bx-chevrons-right bx-sm"></i></a>
    </li>
  </ul>
</nav>

<!-- Large Pagination -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg mb-0">
    <li class="page-item prev">
      <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-md"></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="tf-icon bx bx-chevrons-right bx-md"></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 mb-0">
    <li class="page-item prev">
      <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></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="tf-icon bx bx-chevrons-right bx-sm"></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="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></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="tf-icon bx bx-chevrons-right bx-sm"></i></a>
    </li>
  </ul>
</nav>
<!-- Right Alignment -->
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-end mb-0">
    <li class="page-item prev">
      <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></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="tf-icon bx bx-chevrons-right bx-sm"></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. 

<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">
  <ol class="breadcrumb breadcrumb-style2 mb-0">
    <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- ThemeSelection, Hand-crafted & Made with ❤️