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>
</ul>
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>
  .....
 </ul>
</nav>

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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



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







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    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 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer