×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Pagination


If we are having more pages in web pages and we want to link up these pages than we can use pagination.
Let’s understand this by the following program :-


Basic Pagination

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/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.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Pagination </h2>

<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="#">4</a> </li>

<li class="page-item"> <a class="page-link" href="#">Next</a> </li>

</ul>

</div>

</body>

</html>

Output of this Program


Pagination

So here we can add our pages like this and can go through any page we want to.



active class

This .active class is used to highlight the current page .
Let’s understand them by this program :-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/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.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Pagination </h2>

<ul class="pagination">

<li class="page-item"><a class="page-link" href="#">Previous</a> </li>

<li class="page-item active"><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="#">4</a> </li>

<li class="page-item"><a class="page-link" href="#">Next</a> </li>

</ul>

</div>

</body>

</html>

Output of this Program


Pagination

Here through .active class we can highlight any of the pages.



Pagination Sizing

Definitely here also we can change the size of blocks . And we use .pagination class for it.
Let’s understand this by the following program :-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 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.3.1/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.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Pagination-sizing</h2>

<p>Large:</p>
<ul class="pagination pagination-lg">
<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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<p>Default: </p >
<ul class="pagination 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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<p>Small: </p>
<ul class="pagination pagination-sm">
<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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

</div>

</body>

</html>

Output of this Program


Pagination-sizing

Large:

Default:

Small:

Here we change the pagination-size.






Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute