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.

Read more on backend script for paging and database details in our PHP section here.

<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

DEMO : Pagination with database records

Post your comments , suggestion , error , requirements etc here .

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


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