Create Pagination with Active Highlight selected page number using Bootstrap in HTML,PHP

How to make pagination menu that show us current open page number.

Bootstrap pagination gives us one special class named as active class. This class will allows us to change the current user open pagination page number and highlight the page number, So website user can easily recognize that on which page he is. So here is the complete step by step tutorial for Create Pagination with Active Highlight selected page number using Bootstrap in HTML,PHP.

How to Create Pagination with Active Highlight selected page number using Bootstrap in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for pagination-active-page.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagination with Active Page</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1> Pagination with Active Page </h1>
 
 <ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li class="active"><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">6</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>
 
</div>

</body>
</html>

Screenshot:

Create Pagination with Active Highlight selected page number using Bootstrap in HTML,PHP

Leave a Reply

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