Bootstrap Pager

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.

Bootstrap Pager

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.

Bootstrap Pager Example
Fig.2- Bootstrap Pager Alignment Example.
You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape

VeChain