Bootstrap Pagination

Bootstrap pagination is the process of displaying limited number of result on the every page. It enhances website performance as well as it appearance.

Basic Pagination

Steps to create pagination:

Step1: Wrap unordered list inside <nav> element base class.
Step2: Assign .pagination to <ul> element base class.
Step3: Assign .page-item to <li> element base class.
Step4: Assign .page-link to every <a> element base class.

General Syntax

      <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="#">Next</a></li>
</ul>

Try It Now

Source Code

    <nav aria-label="Page navigation 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="#">Next</a></li>
  </ul>
</nav>

Try it yourself

Source Code : Output

Pagination:Active State

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

General Syntax

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

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Note: To make an active page item, assign .active to the page item base class.

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" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
  </ul>
</nav>

Try It Now

Source Code

    <nav aria-label="Pagination example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</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>
</nav>

Try it yourself

Source Code : Output

To make a disabled page item, assign .disabled to the page item(<li>) base class.

Pagination : Active & Disabled

General Syntax

      <nav aria-label="Pagination Example">
  <ul class="pagination">
    <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>
  </ul>
</nav>

Try It Now

Source Code

    <nav aria-label="Pagination Example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</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>
</nav>

Try it yourself

Source Code : Output

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

Pagination Sizing

Steps to assign pagination size:

Step1:To create smaller pagination use .pagination-sm to unordered list <ul> element base class.
Step2:To create larger pagination use.pagination-lgto unordered list <ul> element base class.

Smaller Pagination

General Syntax

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

Try It Now

Source Code

    <ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

Try it yourself

Source Code : Output

Note: 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

General Syntax

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

Try It Now

Source Code

    <ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

Try it yourself

Source Code : Output

Note: 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 utilities classes.

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

Pagination:Left Alignment

General Syntax

      <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Try It Now

Source Code

    <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
</nav>

Try it yourself

Source Code : Output

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

Pagination:Center Alignment

General Syntax

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

Try It Now

Source Code

    <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Try it yourself

Source Code : Output

Note: Paginated items can be aligned horizontally center by providing .justify-content-center to the <ul> element base class.

Pagination:Right Alignment

General Syntax

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

Try It Now

Source Code

    <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

Try it yourself

Source Code : Output

Note: Paginated items can be aligned right by providing .justify-content-end to the <ul> element base class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS