Bootstrap 4 Pagination
In web development, if there is too much content, pagination is generally applied.
Bootstrap 4 makes it very simple to implement pagination.
To create a basic pagination, on the<ul>element, add the.paginationclass. Then on the<li>element, add the.page-itemclass, and on the<li><a> tag of the element, add the.page-linkclass:
Example
<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>
Try it Yourself »
Current Page State
The current page can use the.activeclass to highlight:
Example
<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 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="#">Next</a></li>
</ul>
Try it Yourself »
Disabled Pagination Links
.disabledThe class can make pagination links unclickable:
Example
<ul class="pagination">
<li class="page-item disabled"><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>
Try it Yourself »
Pagination Sizing
Pagination items can be set to different sizes.
.pagination-lgThe class sets pagination items to a larger size,.pagination-smthe class sets pagination items to a smaller size:
Example
<ul class="pagination pagination-lg">
<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>
<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>
Try it Yourself »
Breadcrumb Navigation
.breadcrumband.breadcrumb-itemThe class is used to set breadcrumb navigation:
Example
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
Try it Yourself »
Pagination Alignment
Utility classes can be used to set the alignment of pagination:
Example
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
Try it Yourself »
Other Extensions