Bootstrap Pager Intro
Default Pager
Previous and next links for simple pagination implementations with light markup and styles.
By default, the pager centers links.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w w .j a v a 2 s . c om-->
<body style='margin:20px;'>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</body>
</html>
Pager with Aligned links
Alternatively, you can align each link to the sides:
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from w w w.j ava2 s.c o m-->
<body style='margin:20px;'>
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</body>
</html>
Optional disabled state
Pager links also use the general .disabled utility class from the pagination.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w w . j av a2 s . c o m-->
<body style='margin:20px;'>
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</body>
</html>