Bootstrap 5 Pagination
Bootstrap 5 pagination is the process of displaying limited number of result on the every page. It enhances website performance as well as it appearance.
Steps to create bootstrap 5 pagination:
- Wrap unordered list inside
<nav>element base class. - Assign
.paginationto<ul>element base class. - Assign
.page-itemto<li>element base class. - Assign
.page-linkto every<a>element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Simple Pagination
Code Explanation
Note:Follow the above mention steps to create simple bootstrap pagination.
General Syntax
Try it nowSource Code
Source Code : Output
Code Explanation
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.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Disabled Item
Code Explanation
Note:
To make a disabled page item, assign .disabled to the page item(<li>) base class.
Pagination : Active & Disabled
Example
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Active/Disabled Item
Code Explanation
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:
- To create smaller pagination use
.pagination-smto unordered list<ul>element base class. - To create larger pagination use
.pagination-lgto unordered list<ul>
Smaller Pagination
Example
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Smaller Size
Code Explanation
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
Example
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Large Size
Code Explanation
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
Try it nowSource Code
Source Code : Output
Pagination:Alignment
Code Explanation
Note: Please keep in mind that, the paginated item is by default left-aligned.
Pagination:Center Alignment
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Alignment
Code Explanation
Note: Paginated items can be aligned horizontally center by providing .justify-content-center to the <ul> element base class.
Pagination:Right Alignment
General Syntax
Try it nowSource Code
Source Code : Output
Pagination:Right Alignment
Code Explanation
Note:
Paginated items can be aligned right by providing .justify-content-end to the <ul> element base class.