07 Oct Bootstrap Pagination
In this lesson, learn how to create Pagination in Bootstrap. With that, learn:
- How to highlight a link
- How to disable a link
- Resize Pagination
- Align Pagination
We will also see some Bootstrap classes for Pagination:
- Create Pagination using the .pagination class
- Highlight a Link using the .active class
- Disable a Link using the .disabled class
- Resize Pagination with .pagination-lg for large pagination and .pagination-sm for smaller pagination.
- Align Pagination with .justify-content-start, .justify-content-center, and .justify-content-end.
Example – Bootstrap Pagination
Let us now see an example of creating Pagination in Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Pagination Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<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="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Output
Video Tutorial – Bootstrap Pagination
The following is the complete video tutorial to learn how to work with Pagination in Bootstrap:
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others:
Read More:
No Comments