Bootstrap 5 Pagination

Basic pagination

If your website has many pages, you may want to add some pagination to each page.

To create basic pagination, please add .pagination Class added to <ul> element. Then add .page-item to each <li> element, and add .page-link Class added to <li> Each link in

Example

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous page</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"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next Page</a></li>
</ul>

Try It Yourself

Active state

.active Class for "highlighting" the current page:

Example

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous page</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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="#">Next Page</a></li>
</ul>

Try It Yourself

Disabled state

.disabled Class for non-clickable links:

Example

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous page</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"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next Page</a></li>
</ul>

Try It Yourself

Pagination size

The pagination block can also be adjusted to a larger or smaller size:

Please add the class for larger blocks .pagination-lg or add for smaller blocks .pagination-sm Type:

Example

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Previous page</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"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next Page</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Previous page</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"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next Page</a></li>
</ul>

Try It Yourself

Pagination Alignment

Use utility classes to change the alignment of pagination:

Example

/* Default (left-aligned) */
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
/* Center-aligned */
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
/* Right-aligned */
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Try It Yourself

Breadcrumbs

Another form of pagination is breadcrumbs:

.breadcrumb and .breadcrumb-item The class specifies the current page's position in the navigation hierarchy:

Example

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Autumn 2019</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Beijing</li>
</ul>

Try It Yourself