Bootstrap 4 Pagination
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap 4 Pagination
❮ Previous
Next ❯
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
- Previous
- 1
- 2
- 3
- Next
To create a basic pagination, add the .pagination class to an <ul> element.
Then add the .page-item to each <li> element and a .page-link class to each link
inside <li>:
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 »
Active State
The .active class is used to "hightlight" the current page:
- Previous
- 1
- 2
- 3
- Next
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 »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Disabled State
The .disabled class is used for links that appear un-clickable:
- Previous
- 1
- 2
- 3
- Next
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 blocks can also be sized to a larger or a smaller size:
- Previous
- 1
- 2
- 3
- Next
- Previous
- 1
- 2
- 3
- Next
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
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 »
Pagination Alignment
Use utilitiy classes to change the alignment of the pagination:
- Previous
- 1
- 2
- 3
- Next
- Previous
- 1
- 2
- 3
- Next
- Previous
- 1
- 2
- 3
- Next
Example
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>Try it Yourself »
Tip: Read more about Bootstrap 4 Utility/Helper classes in our BS4 Utilities Chapter.
Breadcrumbs
Another form for pagination, is breadcrumbs:
The .breadcrumb and .breadcrumb-item
classes indicates the current page's location within a
navigational hierarchy:
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 »
<!--
Complete Bootstrap 4 Navigation Reference
For a complete reference of all navigation classes, go to our complete
Bootstrap Navigation 4 Reference.
-->
❮ Previous
Next ❯