How to customize links for pagination in Bootstrap ?
In many websites, we notice that when we search for something then all the related content is shown but if the number of content is large then it will make the website longer.
To solve this, there is pagination in the webpage i.e, the contents are divided into many pages and on clicking the user can navigate through the related contents.
Note: Pagination is used to manage a series of related content existing across multiple pages.
Approach: The pagination class is used to display the pagination on the website. Use a wrapping <nav> element to identify it as a navigation section to screen readers. Use the unordered list to create the list of pages with links.
Below is the procedure to implement simple pagination with customizing in Bootstrap.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
- Add pagination class with <ul> tag for unordered list. Add the list items with class name page-items.
- In addition, as pages likely have more than one such navigation section, So provide a descriptive aria-label for the <nav> to reflect its purpose.
- To customize the links for each page, just remove “#” and add the desired link.
- For aligning it to center, use class justify-content-center in <ul>.
- Add pagination to each of the pages to make sure the link to the previous page is one less than the current page and the user can move around the pages easily.
Page1.html: If the user is on page 1, “next page” contains a link to page 2. The following are the codes for the contents “Page1.html”, “Page2.html”, and “Page3.html”
Page2.html: If the user is on page 2, the “Previous” page contains a link to page 1, and the “next page” contains a link to page 3.
Page3.html: If the user is on page 3, the “Previous” page contains a link to page 2.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.