Change Pagination menu size in Bootstrap in HTML,PHP

How to create pagination with multiple different sizes as per user requirement using bootstrap classes.

Bootstrap pagination menu can be created into 3 different sizes. Large pagination, normal pagination and small pagination. So here is the complete step by step tutorial for Change Pagination menu size in Bootstrap in HTML,PHP.

How to Change Pagination menu size in Bootstrap in HTML,PHP.

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

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagination Sizes</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 Sizes </h1>
 
 <ul class="pagination pagination-sm">
 <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>

</br>

 <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>

</br>

 <ul class="pagination pagination-lg">
 <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:

Change Pagination menu size in Bootstrap in HTML,PHP

Leave a Reply

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