Bootstrap Pager

March 31st, 2020

Prerana Kasar

Bootstrap Pager

Bootstrap Pager is similar to the pagination have only links previous and next. The class .pager is used to create the previous/next links.

Example: 1 Bootstrap Pager Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Pager Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Pager Example</h2>
		<ul class="pager">
			<li><a href="#">Previous</a></li>
			<li><a href="#">Next</a></li>
		</ul>
	</div>
</body>
</html>

The above code shows pager. Using the class .pager is used to create the pager links or previous/next buttons.

Alignment of Pager

To align the pager links bootsrap have two class .previous and .next to align the previous and next links.

Example: 2 Bootstrap Alignments of Pager Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Pasger Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Pager Example</h2>
		<ul class="pager">
			<li class="previous"><a href="#">Previous</a></li>
			<li class="next"><a href="#">Next</a></li>
		</ul>
	</div>
</body>
</html>

The above code used two classes .previous for the preceding the links and class .next succeding the links.