Easy Tutorial
Bootstrap5 Utilities Bootstrap5 Modal Bootstrap5 Container Bootstrap5 Navs Bootstrap5 List Groups Bootstrap5 Form Range Bootstrap5 Form Select Bootstrap5 Buttons Bootstrap5 Pagination Bootstrap5 Cards Bootstrap5 Dropdowns Bootstrap5 Tables Bootstrap5 Badges Bootstrap5 Offcanvas Bootstrap5 Popover Bootstrap5 Collapse Bootstrap5 Spinners Bootstrap5 Alerts Bootstrap5 Progressbars Bootstrap5 Form Validation Bootstrap5 Flex Bootstrap5 Colors Bootstrap5 Typography Bootstrap5 Install Bootstrap5 Form Check Radio Bootstrap5 Button Groups Bootstrap5 Form Input Group Bootstrap5 Tutorial Bootstrap5 Tooltip Bootstrap5 Carousel Bootstrap5 Forms Bootstrap5 Jumbotron Bootstrap5 Navbar Bootstrap5 Form Floating Labels Bootstrap5 Grid Basic Bootstrap5 Images Bootstrap5 Scrollspy
❮ Bootstrap5 Buttons Bootstrap5 Cards ❯

Bootstrap 5 Pagination

In web development, if there is too much content, pagination is usually implemented.

Bootstrap 5 can easily achieve pagination effects.

To create a basic pagination, add the .pagination class to the <ul> element. Then add the .page-item class to the <li> elements, and the .page-link class to the <a> tags within the <li> elements:

Example

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

Current Page Number Status

The current page can be highlighted using the .active class:

Example

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

Non-clickable Pagination Links

The .disabled class can make pagination links unclickable:

Example

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

Pagination Display Size

Pagination items can be set to different sizes.

The .pagination-lg class sets large font pagination items, and the .pagination-sm class sets small font pagination items:

Example

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

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

Pagination Alignment

You can use utility classes to set 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>

Breadcrumb Navigation

The .breadcrumb and .breadcrumb-item classes are used for breadcrumb navigation:

Example

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>
❮ Bootstrap5 Buttons Bootstrap5 Cards ❯