This tutorial explores Bootstrap 4 Pagination including pagination with active and disabled states, sizes, alignment, Bootstrap Breadcrumb, etc:
In this tutorial, we have covered an introduction to Bootstrap pagination, basic pagination, pagination with icons, pagination with the active state and the disabled state, pagination sizes, pagination alignments, breadcrumb, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Take A Look At The Bootstrap Beginners Guide Here
Let’s begin!
Table of Contents:
Introduction To Bootstrap Pagination
Pagination or paging is the process of arranging content into separate pages. It helps to improve Search Engine Optimization (SEO).
When you compare the pagination of Bootstrap version 4 with version 3, version 4 rewrote components in flexbox. Also, in version 4, explicit classes such as .page-item and .page-link are required on the descendants of .paginations. The .pager component was also removed entirely.
The following table summarizes the classes of Bootstrap 4 that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .pagination class | This class is used to create basic pagination. It acts as a wrapper class that contains all the page navigation. |
| The .page-item class | This class is also used to create basic pagination. |
| The .page-link class | This class is also used to create basic pagination. |
| The .pagination-sm class | This class is used for small paging and it decreases the font size and spacing of the pagination nav. |
| The .pagination-lg class | This class is used for large paging and it increases the font size and spacing of the pagination nav. |
| The .active class | This class is used to highlight the current page. |
| The .disabled class | This class is used to make the page link un-clickable. |
| The .justify-content-center class | This class is used to center the paging. |
| The .justify-content-end class | This class is used to right-align the paging. |
| The .breadcrumb class | This class is used to create breadcrumbs |
| The .breadcrumb-item class | This class is also used to create breadcrumbs |
Basic Bootstrap Pagination
Add a <ul> element with the .pagination class followed by <li> elements with the .page-item class. Then, add <a> elements with the .page-link class inside the <li> elements to create basic pagination.
Example:
The below programming code shows an example of basic paging. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <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="#">Next</a></li> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Pagination With Icons
You can add icons instead of using words to indicate the previous and next pages.
Example:
The below programming code shows an example of paging with icons (the previous icon and the next icon). You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h4>Pagination with Icons</h4> <nav> <ul class="pagination mb-5"> <!--Previous Icon--> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <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> <!--Next Icon--> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Pagination With Active And Disabled States
Active State
Add the .active class to highlight the current page.
Disabled State
Add the .disabled class to make the page link un-clickable. The link will turn grey and remove the hover effect.
Examples of Pagination with Active and Disabled States
The below programming code shows examples of paging with the active state and the disabled state.
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h4>Pagination with Active and Disabled Pages</h4> <nav> <ul class="pagination mb-5"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <!--Active Page--> <li class="page-item active"><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> <!--Disabled Page--> <li class="page-item disabled"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
In the above example, page 2 is active, and page 5 is disabled.
Sizing
Pagination Sizes
Apart from the default pagination size, there are two other main pagination sizes. They are,
- Small paging
- Large paging
Small Pagination
Add the .pagination-sm class for small paging. It decreases the font size and spacing of the pagination nav.
Large Pagination
Add the .pagination-lg class for large paging. It increases the font size and spacing of the pagination nav.
Examples of Pagination Sizing
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h4>Pagination Sizing</h4> <p>Small Pagination</p> <nav> <ul class="pagination pagination-sm"> <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="#">Next</a></li> </ul> </nav> <p>Default Pagination</p> <nav> <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="#">Next</a></li> </ul> </nav> <p>Large Pagination</p> <nav> <ul class="pagination pagination-lg mb-5"> <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="#">Next</a></li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Alignments
Types of Alignments
Pagination can be categorized into three groups based on the alignment. The types of alignments are,
- Left alignment
- Center alignment
- Right alignment
Left Alignment
By default, pagination is left-aligned. Therefore, you do not need any additional classes to left-align the paging.
Center Alignment
Add the .justify-content-center class to center the paging.
Right Alignment
Add the .justify-content-end class to right-align the paging.
Examples of Pagination Alignments
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h4>Pagination Alignments</h4> <p>Left-aligned (Default) Pagination</p> <nav> <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="#">Next</a></li> </ul> </nav> <p class="text-center">Centered Pagination</p> <nav> <ul class="pagination justify-content-center"> <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="#">Next</a></li> </ul> </nav> <p class="text-right">Right-aligned Pagination</p> <nav> <ul class="pagination justify-content-end"> <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="#">Next</a></li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Breadcrumb
What is a Breadcrumb?
Breadcrumb is a form of pagination. We use the .breadcrumb class and the .breadcrumb-item class to create breadcrumbs. Breadcrumbs indicate the location of the current page within a navigational hierarchy.
How to Create a Breadcrumb?
When you compare breadcrumbs of Bootstrap version 4 with version 3, the .breadcrumb-item class is required on the descendants of .breadcrumbs in version 4.
Inside a <nav> element, add an <ol> element with the .breadcrumb class followed by <li> elements with the .breadcrumb-item class. Then, add <a> elements inside the <li> elements. Add the .active class to show the active item.
Example of a Bootstrap Breadcrumb
The below programming code shows an example of a breadcrumb. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <nav> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Products</a></li> <li class="breadcrumb-item active">Sony</li> </ol> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
In the above example, Sony is the active item in the breadcrumb.
Frequently Asked Questions
In this section, we are going to look at some of the FAQs about pagination.
Q #1) What is bootstrap pagination?
Answer: It is the process of arranging content into separate pages.
Q #2) Is pagination useful for Search Engine Optimization (SEO)?
Answer: Yes, it is useful for search engine optimization.
Q #3) How to create pagination?
Answer: Add a <ul> element with the .pagination class followed by <li> elements with the .page-item class. Then, add <a> elements with the .page-link class inside the <li> elements to create pagination.
Q #4) How to center pagination?
Answer: Add the .justify-content-center class to center pagination.
Q #5) Why do we use pagination?
Answer: We use it to arrange the content in a more organized way.
Q #6) What is the pagination number?
Answer: It is a number that is used to identify the sequential order of web pages.
Conclusion
Pagination is the process of arranging content into separate pages. Bootstrap 4 provides various styling options for pagination. You can easily change the pagination features such as size, alignment, etc. Breadcrumbs are a form of pagination.
=> Check Here To See A-Z Of Bootstrap Training Tutorials