The Pagination Component in Bootstrap 4
If your website or blog contains many pages and you want to display title, short description and thumbnail image in home, category or tag pages then pagination is the way of display a specific number of posts/pages e.g. 5, 10, 15 and giving users the option to navigate to the next or previous page.
Demo1 Demo2 Demo3 Demo4
Similarly, if you have a long web page with say 2000+ words, you may divide that single page into multiple pages and let users navigate via pagination component.
The Bootstrap 4 has built-in pagination component that can be created by using a few CSS classes.
How to create pagination using Bootstrap 4
The recommended way is using the wrapper <nav> element for identifying it as the navigation component and using HTML list elements with .pagination built-in class for creating the pagination. See an example with the code below:
See online demo and code
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 30 31 32 33 |
<div class="container"> <h3>A demo of creating Bootstrap pagination</h2> <nav aria-label="Demo of Bootstrap 4 Navigation"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Prev</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="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> |
So you have to use following classes for creating Bootstrap 4 pagination:
- In the main <ul>, use the .pagination class
- The <li> is given the .page-item class
- The link tag <a> inside the <li> is given .page-link
- You should use the aria-label in the <nav> element to define the purpose of pagination component.
A demo of creating active state for current page number
Just use the .active class for making the current page number stand out from the others. You will use the .active class in the <li> element as shown in the example below:
See online demo and code
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 |
<nav aria-label="Demo of active current page number"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Prev</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 active"><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="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
Using the disable class example
If a user is navigating the link number 1 in pagination component then you may want to disable the “Previous” link. Similarly, if pagination ends at 7 (as in above demos), then making Next link disabled as the user is at page number 7 makes sense.
For implementing that, use the Bootstrap 4 .disable class in the <li> tag that you require to disable. In the following demo, I have used this in the ‘Next’ <li>:
See online demo and code
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 |
<nav aria-label="Demo of disable class"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Prev</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="#">6</a></li> <li class="page-item active"><a class="page-link" href="#">7</a></li> <li class="page-item disabled"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
How to override the background color of active state?
You may want using some other color than the default blue color for the active state of pagination.
By overriding the built-in .page-item.active .page-link classes, you may override the default blue color of the active state of the current page number.
See the following example where I used the red background color for the active number and yellow for border color:
See online demo and code
The following CSS is used in the <style> section. You must place this after the reference of Bootstrap 4 CSS file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .page-item.active .page-link { z-index: 1; color: #fff; background-color: #FF0000; border-color: #AEFF5E; } </style> |
The same markup is used as in above example.
Customizing the disabled state example
Similarly, you may customize the disabled state of the link by overriding the built-in class. The classes that you need to use are:
.page-item.disabled .page-link
See the example below where I used the same markup as in above two examples. The default disable color which is light grey border and white background is changed to dark grey border color with the light grey background. Have a look:
See online demo and code
The CSS in style section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .page-item.disabled .page-link { color: #868e96; pointer-events: none; cursor: auto; background-color: #D6DBE0; border-color: #718393; } </style> |
Customizing the entire pagination component example
Finally, you may customize the entire pagination component as well by using a few more CSS classes that override the default properties.
In this example, I have changed the normal state of page numbers, active number, disabled link and hover/focus state of the page numbers. Visit the demo page for the live preview and grabbing the CSS classes used:
See online demo and code
The CSS used for this demo:
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<style> .page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #003C00; background-color: #D8EBEB; border: 1px solid #346767; } .page-item.disabled .page-link { color: #868e96; pointer-events: none; cursor: auto; background-color: #CEFFCE; border-color: #718393; } .page-item.active .page-link { z-index: 1; color: #fff; background-color: #003C00; border-color: #AEFF5E; } .page-link:focus, .page-link:hover { color: #fff; text-decoration: none; background-color: #003C00; border-color: #AEFF5E; } </style> |
Dealing with the sizes of pagination
Bootstrap 4 has built-in classes to deal with the size of pagination component. In all above examples, we used the normal sized pagination. You may also create large and small sized pagination component by using:
- pagination-lg (for large size)
- pagination-sm (for small size)
Use any of these classes in the <ul> element with .pagination class. For example:
<ul class=”pagination pagination-sm”>
See the following demo where you may see the difference among the normal, large and small sized pagination:
See online demo and code
The markup for this demo:
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<div class="container"> <h3>Large sized pagination</h2> <nav aria-label="Pagination size example"> <ul class="pagination pagination-lg"> <li class="page-item "><a class="page-link" href="#">Prev</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="#">Next</a></li> </ul> </nav> <h3>Small size pagination</h2> <nav aria-label="Pagination size example"> <ul class="pagination pagination-sm"> <li class="page-item "><a class="page-link" href="#">Prev</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> </nav> <h3>Normal size pagination</h2> <nav aria-label="Normal size example"> <ul class="pagination"> <li class="page-item "><a class="page-link" href="#">Prev</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> </nav> </div> |
You can see the complete code on the demo page that includes custom CSS.
How to change the pagination alignment?
You may use the flexbox utilities for changing the alignment of pagination component. For example, to align pagination centrally, use the .justify-content-center class.
For aligning right or end of content, use the .justify-content-end class.
In the following demo, I showed three different alignments for pagination, so you may compare easily:
See online demo and code
The code:
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<div class="container"> <h3>Center aligned pagination</h2> <nav aria-label="Pagination alignment"> <ul class="pagination justify-content-center"> <li class="page-item "><a class="page-link" href="#">Prev</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="#">Next</a></li> </ul> </nav> <h3>Right aligned pagination</h2> <nav aria-label="Pagination alignment"> <ul class="pagination justify-content-end"> <li class="page-item "><a class="page-link" href="#">Prev</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> </nav> <h3>Left aligned pagination</h2> <nav aria-label="Pagination alignment"> <ul class="pagination"> <li class="page-item "><a class="page-link" href="#">Prev</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> </nav> </div> |
Using icons in place of Next / Previous texts example
You may also use icons in place of text in the pagination. For example, showing arrows for next and previous texts.
In the following example, I used simple code and font-awesome icons in two pagination components.
See online demo and code
The markup for font-awesome icons:
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 30 31 32 33 34 35 36 37 38 39 40 41 |
<h3>Font-awesome icons</h2> <nav aria-label="Pagination with font-awesome icons"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <i class="fa fa-arrow-left" aria-hidden="true"></i> <span class="sr-only">Previous</span> </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="#" aria-label="Previous"> <i class="fa fa-arrow-right" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> </li> </ul> </nav> |
You may see the complete code on the example page with CDN link for the font-awesome library.