How to create & use Bootstrap 5 pagination?

Bootstrap 5 Pagination

Bootstrap 5 Pagination

Bootstrap 5 pagination is the process of displaying a limited number of results on every page. It enhances website performance as well as it appears.

Steps to create bootstrap 5 pagination:

• Wrap the unordered list inside <nav> element base class.
• Assign .pagination to <ul> element base class.
• Assign .page-item to <li> element base class.
• Assign .page-link to every <a> element base class.

General Syntax

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
  </ul>
</nav>

Source Code

<div class="container mt-4">
  <h2 class="text-center">Simple Pagination</h2>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Prev</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="#">Next</a></li>
    </ul>
  </nav>
</div>

Pagination: Active State

To highlight the current page use .active to the list item <li> element base class.

General Syntax

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a href="#" class="page-link">Prev</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

Source Code

<div class="container mt-4">
  <h2 class="text-center">Pagination: Active Page Item</h2>
  <ul class="pagination">
    <li class="page-item disabled"><a href="#" class="page-link">Prev</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</div>
<!--container-->

Pagination: Disabled State

To disable any page item, you have to add .disabled class to any page item <li> element base class.

General Syntax

<nav aria-label="Pagination example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link">Previous</a></li>
  </ul>
</nav>

Source Code

<div class="container mt-4">
  <h2 class="text-center">Pagination:Disabled Item</h2>
  <nav aria-label="Pagination example">
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#">Prev</a>
      </li>
      <li class="page-item disabled"><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="#">Next</a>
      </li>
    </ul>
  </nav>
</div>

To read more about Bootstrap 5 pagination, click here.