Bootstrap 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 Bootstrap Pagination Example

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>

Bootstrap 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 Bootstrap Breadcrumb Example

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>