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 = "#">«</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 = "#">»</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:
