Bootstrap Pagination
Bootstrap provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.  Pagination is the process of organizing content by dividing it into separate pages.
Example :
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Pagination</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><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>
 
</div>
 
</body>
</html>
Output :
Active states and Disabled States
Use the disabled state class is (.disabled) for making the links disabled and active state class is (.active) to indicate the current page.
	
<!DOCTYPE html>
<html>
<head>
   <title>Active states and Disabled States </title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<ul class = "pagination">
   <li><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 class="disabled"><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>
 
</div>
 
</body>
</html>
Output :
Sizing Pagination
Bootstrap sizing pagination classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination.
	
<!DOCTYPE html>
<html>
<head>
   <title>Sizing Pagination</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
<ul class="pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><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>
 
<br />
 
<ul class="pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><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>
 
<br />
 
<ul class="pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><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>
 
</div>
 
</body>
</html>
Output :


We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.