<!-- Pagination: basic example -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">Prev</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link page-link-static">2 / 5</span>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active d-none d-sm-block" aria-current="page">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">4</a>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">5</a>
</li>
<li class="page-item">
<a href="#" class="page-link">Next</a>
</li>
</ul>
</nav>// Pagination: basic example
nav(aria-label="Page navigation example")
ul.pagination
li.page-item
a.page-link(href="#") Prev
li.page-item.d-sm-none
span.page-link.page-link-static 2 / 5
li.page-item.d-none.d-sm-block
a.page-link(href="#") 1
li.page-item.active.d-none.d-sm-block(aria-current="page")
span.page-link
| 2
span.sr-only (current)
li.page-item.d-none.d-sm-block
a.page-link(href="#") 3
li.page-item.d-none.d-sm-block
a.page-link(href="#") 4
li.page-item.d-none.d-sm-block
a.page-link(href="#") 5
li.page-item
a.page-link(href="#") Next
<!-- Pagination: with icons -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Previous">
<i data-feather="chevron-left"></i>
</a>
</li>
<li class="page-item d-sm-none">
<span class="page-link page-link-static">2 / 5</span>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active d-none d-sm-block" aria-current="page">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">4</a>
</li>
<li class="page-item d-none d-sm-block">
<a href="#" class="page-link">5</a>
</li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Next">
<i data-feather="chevron-right"></i>
</a>
</li>
</ul>
</nav>// Pagination: with icons
nav(aria-label="Page navigation example")
ul.pagination
li.page-item
a.page-link(href="#" aria-label="Previous")
i(data-feather="chevron-left")
li.page-item.d-sm-none
span.page-link.page-link-static 2 / 5
li.page-item.d-none.d-sm-block
a.page-link(href="#") 1
li.page-item.active.d-none.d-sm-block(aria-current="page")
span.page-link
| 2
span.sr-only (current)
li.page-item.d-none.d-sm-block
a.page-link(href="#") 3
li.page-item.d-none.d-sm-block
a.page-link(href="#") 4
li.page-item.d-none.d-sm-block
a.page-link(href="#") 5
li.page-item
a.page-link(href="#" aria-label="Next")
i(data-feather="chevron-right")
<!-- Entry navigation -->
<nav class="entry-navigation" aria-label="Entry navigation example">
<a href="#">
<i data-feather="chevron-left" class="mr-1"></i>
<span class="d-none d-sm-inline">Prev post</span>
</a>
<a href="#">
<i data-feather="grid" class="mr-1"></i>
<span class="d-none d-sm-inline">All post</span>
</a>
<a href="#">
<span class="d-none d-sm-inline">Next post</span>
<i data-feather="chevron-right" class="ml-1"></i>
</a>
</nav>// Entry navigation
nav.entry-navigation(aria-label="Entry navigation example")
a(href="#").entry-navigation-link
i(data-feather="chevron-left").mr-1
span.d-none.d-sm-inline Prev post
a(href="#").entry-navigation-link
i(data-feather="grid").mr-1
span.d-none.d-sm-inline All posts
a(href="#").entry-navigation-link
span.d-none.d-sm-inline Next post
i(data-feather="chevron-right").ml-1