Bootstrap Pagination And Pager

In this article we will see how to create Bootstrap pagination & pager.

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>  
  9.           
  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>  
  24.   
  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>  
  9.           
  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>  
  9.           
  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>  
  24.   
  25. </div>  
  26.      </div>  
  27.   
  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>  
  9.           
  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>  
  22.   
  23. <li><a href = "#">»</a></li>  
  24. </ul>  
  25.   
  26. </div>  
  27.      </div>  
  28.   
  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>  
  9.           
  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>  
  33.   
  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>  
  9.           
  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>  
  20.   
  21. </div>  
  22.      </div>  
  23.   
  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>  
  9.           
  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>  
  19.   
  20.   
  21.   
  22. </div>  
  23.      </div>  
  24.   
  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>  
  18.   
  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.