Bootstrap 4 Modern Pagination with jQuery

Another Bootstrap 4 modern pagination system with jQuery paging plugin . This lightweight jQuery plugin lets you to create pagination with Bootstrap framework. The plugin offers multiple options to handle paging on a single page and more.

Plugin Overview

Plugin: bootstrap-4-pagination-jquery
Author: Nguyen Van An
Licence: MIT Licence
Published: January 12, 2024
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version and Bootstrap 4.1.3

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 5 KB

How to Use Pagination Plugin:

1. In order to use this paging plugin, first of all load the jQuery and Bootstrap 4 framework into your HTML project.

<!-- jQuery -->
<script src=""></script>

<!-- Popper Js -->
<script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- Bootstrap 4 Framework -->
<link href="" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Also, include the Pagination‘s JavaScript file into your page.

<!-- Pagination Js -->
<script src="js/pagination.js"></script>

3. After including all assets, create a basic HTML structure like below for pagination to navigate through the paging.

<div class="be-wrapper">
    <div class="container">
        <h1>Pagination Plugin</h1>
        <p>Anything you need. It's here!</p>
        <div class="demo">
            <div id="page">
                <ul class="pagination"></ul>
            <label id="info">Page information will be displayed here.</label>

4. Now, initialize the plugin in jQuery document ready function to active the pagination plugin and done!

$('#page').Pagination({ // id to initial draw and use pagination
            size: 87, // size of list input
            pageShow: 5, // 5 page-item per page
            page: 1, // current page (default)
            limit: 10, // current limit show perpage (default)
    	}, function(obj){ // callback function, you can use it to re-draw table or something
            	$('#info').html('Current page: ' +;

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link