You must have noticed smaller chunks of text are always easier to read. It's true on the Internet, too. If you see the thumb on the scroll bar become minuscule (indicating that the page is extremely long, so there's a lot of scrolling ahead), you don't even bother to start.
If you wish to part the content into easily manageable sections, Bootstrap pagination is an excellent tool for you to master. It will allow you to create and style pagination links that will take your users to different parts of your content. Not only it is easier to read, but it's also simpler to navigate.
Contents
Bootstrap Pagination: Main Tips
- Using Bootstrap 4 you can create beautifully styled pagination links.
- Pagination is used to divide content into sections that are more easy to read and navigate across.
Starting With Bootstrap Pagination
To create pagination Bootstrap links, you will need to create a list element, assigning the class .pagination to the <ul> element, which is wrapped around the <li> elements representing the page links. These elements also have the .page-link class applied to them. Take a look at our example to get a better idea:
<ul class="pagination">
<!-- page links go here -->
<li class="page-item"><a href="#" class="page-link">Page link</a></li>
<!-- code for generating pagination links depending on the ammount of content -->
</ul>Active/Disabled Pagination
If you wish to highlight the page which is curently active on the screen, you should use .active class. Now, to make a page link appear inactive, use the .disabled class. This is what it would look like in your HTML document:
<!-- active -->
<li class="active page-item"><a href="#" class="page-link">2</a></li>
<!-- disabled -->
<li class="disabled page-item"><a href="#" class="page-link">Next Page</a></li>Pagination Size
To make the pagination Bootstrap links look good in a certain desing, you may need to alter their size in some cases. To make the links smaller, you need to add the .pagination-sm to the <ul> element. To make it bigger, use .pagination-lg .
Try to run the code snippet provided in a code editor and see the difference:
<ul class="pagination-lg pagination">
<!-- page links go here -->
<li class="page-item"><a href="#" class="page-link">1</a></li>
</ul>
<ul class="pagination-sm pagination">
<!-- page links go here -->
<li class="page-item"><a href="#" class="page-link">1</a></li>
</ul>Breadcrumbs
Besides pagination Bootstrap has another function that makes content navigation easier - breadcrumbs. They work very similarly to regular pagination, except the fact that they are mostly used to display the hierarchy between page categories.
To use breadcrumbs instead of the usual Bootstrap pagination, you need to follow these steps:
- Replace the .pagination with .breadcrumbs.
- Replace .list-item with .breadcrumbs-item.
See the code example below and try to run it to see the breadcrumbs in action:
<ul class="breadcrumbs">
<!-- page links go here -->
<li class="breadcrumbs-item"><a href="#">Parent</a></li>
<li class="active breadcrumbs-item">Child</li>
</ul>Bootstrap Pagination: Summary
- Bootstrap 4 allows you to create and style pagination links that divide content into sections.
- Using pagination Bootstrap can make the content of your website easier to read and navigate.