How to use Bootstrap pagination

Author - Kuldeep Singh

How to use Bootstrap pagination

Steps to use Bootstrap pagination:

1. Create a simple html file.
2. Include bootstrap css and js CDN link in html file.

Example :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>bootstrap pagination</title>
  </head>
  <body>
<div class="container">

/****************Add your pagination code hare*****************\
</div>

 <!-- Optional JavaScript -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    
  </body>
</html>

3. Now start pagination code:

Use pagination class with Ul html attribute, pagination class is already defined in bootstrap css file:

<ul class = "pagination">
   <li class="disabled"><a href = "#">&laquo;</a></li>
   <li class=”active”><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Class .active use for highlight selected page.
Class. disabled use for disable previous or next buttons.

The output of the example will look something like this:

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *