Bootstrap 3 Pagination, Full details of Bootstrap 3 Pagination

Bootstrap Tutorial

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 :

Bootstrap Tutorial