Post
Ask Question

Bootstrap Pagination And 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.


Similar Articles