CodesJava

Easy learning with example program codes

Bootstrap Pagination Sizing Tutorial

Pagination is the process of separating print or digital content into discrete pages.

Bootstrap provides the following classes for pagination sizing.
.pagination-lg: for larger blocks.
.pagination-sm for smaller blocks.

Bootstrap Pagination – Sizing Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Pagination - Sizing Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap Pagination - Sizing Example</h2>
  <p> Bootstrap provides the .pagination-lg and .pagination-sm classes for pagination sizing.</p>
 
  <p>Large:</p>
  <ul class="pagination pagination-lg">
    <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>
  </ul>
 
  <p>Default:</p>
  <ul class="pagination pagination">
    <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>
  </ul>
 
  <p>Small:</p>
  <ul class="pagination pagination-sm">
    <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>
  </ul>
</div>
 
</body>
</html>

Try it:

Bootstrap Pagination – Sizing Example on jsbin.com

Please follow and like us:
error

Bootstrap 3 Tutorial








Copyright © 2019 CodesJava DMCA.com Protection Status