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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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