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

This loop dynamically generates pagination styles, allowing for easy customization by defining your own classes and colors.

@each $state in map-keys($theme-colors) {
  .pagination-#{$state} {
    --#{$prefix}pagination-hover-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}pagination-hover-color: var(--#{$prefix}#{$state});
    --#{$prefix}pagination-focus-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}pagination-focus-color: var(--#{$prefix}#{$state});
    --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state});
    --#{$prefix}pagination-box-shadow-color: var(--#{$prefix}#{$state}-rgb);
  }
}

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

This loop dynamically generates styles for pagination-outline variant, allowing for easy customization by defining your own classes and colors.

@each $state in map-keys($theme-colors) {
  .pagination-outline-#{$state} {
    --#{$prefix}pagination-active-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}pagination-active-color: var(--#{$prefix}#{$state});
    --#{$prefix}pagination-active-border-color: var(--#{$prefix}#{$state});
  }
}

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

Add the .breadcrumb-custom-icon class to the breadcrumb container to ensure it uses the custom styles. Inside each breadcrumb item (.breadcrumb-item), include your desired icon after the text using an icon element.

<!-- custom-icon Breadcrumb-->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom-icon">
    <li class="breadcrumb-item">
      <a href="javascript:void(0);">Home</a>
      <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
    </li>
    <li class="breadcrumb-item">
      <a href="javascript:void(0);">Library</a>
      <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
    </li>
    <li class="breadcrumb-item active">Data</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom-icon mb-0">
    <li class="breadcrumb-item">
      <a href="javascript:void(0);">Home</a>
      <i class="breadcrumb-icon icon-base bx bx-right-arrow-circle align-middle"></i>
    </li>
    <li class="breadcrumb-item">
      <a href="javascript:void(0);">Library</a>
      <i class="breadcrumb-icon icon-base bx bx-right-arrow-circle align-middle"></i>
    </li>
    <li class="breadcrumb-item active">Data</li>
  </ol>
</nav>
© 2017- 2025 ThemeSelection, Hand-crafted & Made with ❤️