Bootstrap Tutorial - 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><!--from  w ww .j a va  2 s  . c  o  m-->
<body style='margin:20px;'>

  <ul class="pager">
     <li><a href="#">Previous</a></li>
     <li><a href="#">Next</a></li>
  </ul>

</body> 
</html>

Click to view the demo





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><!--  w  w  w .  ja v a 2  s .  c  o m-->
<body style='margin:20px;'>

    <ul class="pager">
      <li class="previous"><a href="#">&larr; Older</a></li>
      <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
</body> 
</html>

Click to view the demo





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><!--from   w  w w.j  ava2 s. c o  m-->
<body style='margin:20px;'>

    <ul class="pager">
      <li class="previous disabled"><a href="#">&larr; Older</a></li>
      <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
</body> 
</html>

Click to view the demo