Bootstrap Pagination

Bootstrap pagination is the process of displaying a limited number of results on every page. It enhances the website's performance as well as its appearance.

Example

Steps to create bootstrap 5 pagination:

Wrap an unordered list inside the <nav> element's 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>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Simple Pagination</p>
  <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>

Try it now

Pagination: Active State

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

Example

General Syntax

      <nav>
  <ul class="pagination">
    <li class="page-item disabled"><a href="#" class="page-link">Page Item</a></li>
    <li class="page-item active"><a href="#" class="page-link">Page Item</a></li>
  </ul>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination: Active Page Item</p>
  <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-->

Try it now

Pagination: Disabled State

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

Example

General Syntax

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

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination:Disabled Item</p>
  <nav>
    <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>

Try it now

Pagination : Active & Disabled

To make an active & disabled page item, assign .active & .disabled class to the page item(<li>) element's base class respectively.

Example

General Syntax

      <nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Page Item</a></li>
    <li class="page-item active"><a class="page-link" href="#">Page Item</a></li>
  </ul>
</nav>

Try it now

Source Code

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

Try it now

Pagination Sizing

Steps to assign pagination size:

To create a smaller pagination size, use the .pagination-sm class to the unordered list <ul> element's base class.
To create a large pagination size, use the .pagination-lg class to unordered list <ul> element's base class.

Smaller Pagination

Example

General Syntax

      <ul class="pagination pagination-sm"></ul>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination:Smaller Size</p>
  <nav aria-label="Pagination example">
    <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="#">Next</a></li>
    </ul>
  </nav>
</div><!--container-->

Try it now

Code Explanation

Please keep in mind that, pagination size can be controlled by .pagination-sm & .pagination-lg. To create small pagination item assign.pagination-sm to the pagination container base class .

Pagination: Large Size

Example

General Syntax

      <ul class="pagination pagination-lg"> </ul>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination:Large Size</p>
  <nav aria-label="Pagination example">
    <ul class="pagination pagination-lg">
      <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>

Try it now

Code Explanation

Please keep in mind that, to create a large paginated item assign .pagination-lg to the pagination container base class.

Pagination Alignment

Pagination alignment can be done easily by flexbox utility classes.

To change the pagination alignment, add flexbox utility classes inside the unordered list container(<ul>) element's base class.

Pagination: Left Alignment

Example

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination: Alignment</p>
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#!" tabindex="-1" aria-disabled="true">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>
<!--container-->

Try it now

Code Explanation

Please keep in mind that, the paginated item is by default left-aligned.

Pagination: Center Alignment

Paginated items can be aligned horizontally center by assigning the .justify-content-center class to the pagination container's i.e. (<ul>) element's base class.

Example

General Syntax

      <nav>
  <ul class="pagination justify-content-center"></ul>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination:Alignment</p>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled">
        <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><!--container-->

Try it now

Pagination: Right Alignment

Paginated items can be aligned right by assigning the .justify-content-end class to the <ul> element's base class.

Example

General Syntax

      <nav>
 <ul class="pagination justify-content-end"></ul>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center">Pagination:Right Alignment</p>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-end">
      <li class="page-item disabled">
        <a class="page-link" href="#!" tabindex="-1" aria-disabled="true">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>
<!--container-->

Try it now

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4