CodesJava

Easy learning with example program codes

Bootstrap 4 Pagination Tutorial

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

Basic pagination is created by adding the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li.

Bootstrap 4 Pagination Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Pagination 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/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap 4 Pagination Example</h2>
  <p> Basic pagination is created by adding the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>.</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
 
</body>
</html>

Try it:

Bootstrap 4 Pagination Example on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status