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
.paginationto the pagination container base class. - To create pagination, you have to add
.page-itemto the every page item or child element of parent container.
Example
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>
Source Code: Output
Bootstrap Pagination
Remember:In the above example .pagination is assigned to pagination parent container while .page-item to the every child element of container having class .pagination.
Pagination specifies the existence of a series of related content across multiple pages and it creates navigation between pages inside a web project.
Disabled and active states
To disable any page item, you have to add .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.
Example
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>
Source Code: Output
Boostarp Active & Disabled Page Item
Remember:In the above example .active is assigned to the page item base class to make page item active while .disabled to make page item disabled.
Bootstrap 5 Pagination: Size
To control the pagination size, follow the following steps.
- Smaller Size:To create smaller size page item, add
.pagination-smclass to the pagination container base class having.pagination. - Large Size:To create large size page item, add
.pagination-lgclass to the pagination container base class having.pagination.
Pagination:Smaller Size
Pagination : Large Size
General Syntax
<ul class="pagination pagination-sm"></ul>
<ul class="pagination pagination-lg"></ul>
Source Code
<div class="container mt-4">
<h2>Pagination:Smaller Size</h2>
<nav>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
<h4>Pagination:Large Size</h4>
<nav>
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
Source Code: Output
Pagination:Smaller Size
Pagination:Large Size
Remember:In the above example .pagination-sm is assigned to the pagination container base class to make smaller page item while .pagination-lg to make larger pagination item.
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.
Centered Pagination
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>
Source Code: Output
Pagination:Alignment
Remember:In the above example .justify-content-center is assigned to the pagination container base class so that the pagination item aligned in the center of the web page.
Web Tutorials
