Bootstrap 4 Pagination
Bootstrap 4 pagination indicates a series of related content exists across multiple web pages.
Basic Pagination
To create bootstrap 4?pagination?follow the following steps.
To create pagination, you have to add?.pagination?to the pagination container base class.
To create pagination, you have to add?.page-item?to every page item or the child element of the parent container.
General Syntax
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
</ul>
Source Code
<div class="container mt-4">
<h2 class="mt-5 mb-3">Bootstrap Pagination</h2>
<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>
</div>
Disabled and active states
To disable any page item, you have to add?the .disabled?class to any page item base class While to make any page item to active, you have to add?.active?to any page item base class.
General Syntax
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
</ul>
Source Code
<div class="container mt-4">
<h2>Boostarp Active & Disabled Page Item</h2>
<nav>
<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 active" aria-current="page">
<a class="page-link" href="#">2 <span class="sr-only">2</span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
Bootstrap 5 Pagination: Size
To control the pagination size, follow the following steps.
领英推荐
General Syntax
<ul class="pagination pagination-sm"></ul>
<ul class="pagination pagination-lg"></ul>
Pagination: Alignment
To change pagination alignment, you have to add the flexbox utility class to the pagination parent container base class.
Pagination is aligned left by default. Therefore to align it in the center of the web page, assign?.justify-content-center?to the pagination container base class having?.pagination?class.
General Syntax
<ul class="pagination justify-content-end "></ul>
Source Code
<div class="container mt-4">
<h2>Pagination:Alignment</h2>
<nav aria-label="Pagination">
<ul class="pagination justify-content-center">
<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>
Right Aligned Pagination
Since pagination is aligned by default left direction of the web page.To align it in the right side of the web page,assign?.justify-content-end?to the pagination container base class having?.pagination.
General Syntax
<ul class="pagination justify-content-end"></ul>
Source Code
<div class="container mt-4">
<h2>Centered Pagination</h2>
<nav aria-label="Pagination">
<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>
To read more and view the complete source code, click here.