Bootstrap Pagination

Use “pagination” class to add pagination in bootstrap.

​

Syntax:

<nav>

<ul class="pagination">

<li class="page-item"><a href="#" class="page-link">Previous</a></li>

<li class="page-item"><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>

How use Disabled class to disable page?

Syntax:

<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Previous</a></li>

​

“disabled” did not disable the click functionality so we use <span> with disable to disable page with click functionality.

Syntax:

<li class="page-item disabled"><span class="page-link">Previous</span></li>

Changing size of pagination

 Add .pagination-lg, or .pagination-sm to the .pagination base class.

Syntax:

<nav>

<ul class="pagination pagination-lg">

<li class="page-item disabled"><span class="page-link">Previous</span>

</li>

</ul>

</nav>

Alignment of pagination

By default it align on the left if you want to align on the center then you use following class:

Syntax:

<nav>

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

<li class="page-item"><a href="#" class="page-link">Previous</a>

</li>

</ul>

</nav>

Class .justify-content-end to align the pagination to the right:

Syntax:

<nav>

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

<li class="page-item"><a href="#" class="page-link">Previous</a></li>

</ul>

</nav>