What is pagination?

  • Pagination links indicate that a series of related content exists across multiple pages
  • A large amount of pages are linked together in some relationship such such as search results or inboxes.

Pagination classes

  • .pagination
  • .active
  • .disabled
  • .pagination-lg
  • .pagination-sm
  • .breadcrumb

Basic pagination

  • If you have your own website that has lots of pages you should sort pagination
  • Use .pagination class in <ul> tag
Sample program for Basic pagination
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class="pagination">
  16. <li><a href="#">1</a></li>
  17. <li><a href="#">2</a></li>
  18. <li><a href="#">3</a></li>
  19. <li><a href="#">4</a></li>
  20. <li><a href="#">5</a></li>
  21. </ul>
  22. </div>
  23. </div>
  25. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  26. <script type="text/css" src="js/jquery"></script>
  27. </body>
  28. </html>
Output
Output

That is the output for basic pagination

Working with icons

  • Looking to use an icon or symbol in place of text for some pagination links
  • Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

Sample program for working with icons

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class = "pagination">
  16. <li><a href = "#">«</a></li>
  17. <li><a href = "#">1</a></li>
  18. <li><a href = "#">2</a></li>
  19. <li><a href = "#">3</a></li>
  20. <li><a href = "#">4</a></li>
  21. <li><a href = "#">5</a></li>
  22. <li><a href = "#">»</a></li>
  23. </ul>
  24. </div>
  25. </div>
  26. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  27. <script type="text/css" src="js/jquery"></script>
  28. </body>
  29. </html>
Output
Output

That is the output for working with icons

Active State

  • The active state shows what is the current page
  • .active class is used
  • Easily identify which page we are in

Sample program for Active state

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class = "pagination">
  16. <li><a href = "#">«</a></li>
  17. <li><a href="#">1</a></li>
  18. <li class="active"><a href="#">2</a></li>
  19. <li><a href="#">3</a></li>
  20. <li><a href="#">4</a></li>
  21. <li><a href="#">5</a></li>
  22. <li><a href = "#">»</a></li>
  23. </ul>
  25. </div>
  26. </div>
  28. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  29. <script type="text/css" src="js/jquery"></script>
  30. </body>
  31. </html>
Output
Output

That is the output for Active state

The person worked in the second page

Disable State

  • Use of disable link cont able to un-clickable
  • .disable class is using

Sample program for Disable state

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class = "pagination">
  16. <li><a href = "#">«</a></li>
  17. <li><a href="#">1</a></li>
  18. <li><a href="#">2</a></li>
  19. <li><a href="#">3</a></li>
  20. <li class="disabled"><a href="#">4</a></li>
  21. <li><a href="#">5</a></li>
  23. <li><a href = "#">»</a></li>
  24. </ul>
  26. </div>
  27. </div>
  29. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  30. <script type="text/css" src="js/jquery"></script>
  31. </body>
  32. </html>
Output
Output

This is the output for the disable link

The fourth page will be disabled

Pagination Sizing

  • The pagination link has two links; one is large and small
  • .pagination-lg class is using large size
  • .pagination-sm class is using small size

Sample program for Pagination sizing

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class="pagination pagination-lg">
  16. <li><a href = "#">«</a></li>
  17. <li><a href="#">1</a></li>
  18. <li><a href="#">2</a></li>
  19. <li><a href="#">3</a></li>
  20. <li class="disabled"><a href="#">4</a></li>
  21. <li><a href="#">5</a></li>
  22. <li><a href = "#">»</a></li>
  23. </ul>
  24. <ul class="pagination pagination-sm">
  25. <li><a href = "#">«</a></li>
  26. <li><a href="#">1</a></li>
  27. <li><a href="#">2</a></li>
  28. <li><a href="#">3</a></li>
  29. <li class="disabled"><a href="#">4</a></li>
  30. <li><a href="#">5</a></li>
  31. <li><a href = "#">»</a></li>
  32. </ul>
  34. </div>
  35. </div>
  36. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  37. <script type="text/css" src="js/jquery"></script>
  38. </body>
  39. </html>
Output
Output

This output indicates two various sizes for pagination

Breadcrumbs

  • Another form for pagination is breadcrumbs
  • That comes under the single well format

Sample program for Breadcrumbs

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class="breadcrumb">
  16. <li><a href="#">Home</a></li>
  17. <li><a href="#">Insert</a></li>
  18. <li><a href="#">mail</li>
  19. </ul>
  21. </div>
  22. </div>
  24. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  25. <script type="text/css" src="js/jquery"></script>
  26. </body>
  27. </html>
Output
Output

These are the pagination types and example programs and outputs

Bootstrap Pager

What is pager

  • The pager is an unordered list, it is also a similar to pagination
  • By default the links are centered

Types of pager classes

  • .pager
  • .previous
  • .next
  • .disable

Default pager

  • The pager default page is align in center of the page
  • You can link your web pages in this area
  • .pager class is used in the<ul> tag inside

Sample program for default pager

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  10. <div class="container">
  11. <div class="row">
  12. <h1 class="text-center page-header text-info">
  13. Bootstrap Pagination
  14. </h1>
  15. <ul class = "pager">
  16. <li><a href = "#">Previous</a></li>
  17. <li><a href = "#">Next</a></li>
  18. </ul>
  22. </div>
  23. </div>
  25. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  26. <script type="text/css" src="js/jquery"></script>
  27. </body>
  28. </html>
Output
Output
This is the output for default pager

Aligned Links

  • In this aligned link is fixed in the lift and right corner of the page
  • .previous and .next classes are used in the<li> tag inside

Sample program for Aligned links

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="row">
  11. <h1 class="text-center page-header text-info">
  12. Bootstrap Pager
  13. </h1>
  14. <ul class = "pager">
  15. <li class = "previous"><a href = "#">← Older</a></li>
  16. <li class = "next"><a href = "#">Newer →</a></li>
  17. </ul>
  18. </div>
  19. </div>
  20. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  21. <script type="text/css" src="js/jquery"></script>
  22. </body>
  23. </html>
Output
Output

Disabled
  • In this disabled is used for un-clickable movements in the particular page or problem pages
  • .disabled class is used to disabled the given page

Sample program for Disable

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial scale=1">
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="row">
  11. <h1 class="text-center page-header text-info">
  12. Bootstrap Pager
  13. </h1>
  14. <ul class = "pager">
  15. <li class = "previous disabled"><a href = "#">← Disabled</a></li>
  16. <li class = "next"><a href = "#">Active →</a></li>
  17. </ul>
  19. </div>
  20. </div>
  21. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  22. <script type="text/css" src="js/jquery"></script>
  23. </body>
  24. </html>
Output
Output

In this output the disabled link is an un-clickable movement

Conclusion

I hope now you can understand how to use and create the Bootstrap Pagination and pager. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.