Bootstrap 4 Pagination class

A set of navigational link to page extension or related content.
The best example is showing 10 records per page out of total 49 records. All records can be displayed by using 5 pages with navigational link to visit any page.
<ul class='pagination justify-content-center'>
<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='#'>3</a></li>
<li class='page-item'><a class='page-link' href='#'>4</a></li>
<li class='page-item'><a class='page-link' href='#'>Next</a></li>
For the screen readers it is better to wrap the list within a NAV tag and add area-label. Here is the code.
<nav aria-label='There are 4 pages to Navigate'>
<ul class='pagination justify-content-center'>
 <li class='page-item'><a class='page-link' href='#'>Previous</a></li>

Disabled & Active

The link with current page should have active class and if we are at the last page then the link showing Next page should have class disabled ( un clickable ).
Similarly if are at the first page then the link showing previous page should be disabled or un-clickable. DEMO : Disable Active class with code

Sizing the items

pagination pagination-smpaginationpagination pagination-lg
DEMO : Changing Size with code

Alignment of items

We can place the item links at left , center or at right by using justify-content-center or justify-content-end

DEMO :Changing Alignment to left, center or right with code

Pagination of database records.

The best example of pagination is while showing limited number of records per page out of the total records available in a database table. We have 39 records to display and we are displaying 10 records per page. By using pagination we can display all records in 4 different pages with navigational link at the bottom of each page to visit any of the five pages.

We need 8 pages if we display 5 records per page.

We collect total number of records to be displayed ( here it is 39 ) and set number of records per page. The script will take care of all features like disable / enable links, finding out number of pages and links ,showing previous and next links by using PHP Script. The source code with the demo is available here.


* indicates required
Subscribe to plus2net

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer