Pagination
Add a container element with the pagination
class.
And add child elements with the page-item
class.
The page-item
with the active
class will be highlighted.
You can add the disabled
class to the page-item
to have unclickable page links.
<ul class="pagination">
<li class="page-item disabled">
<a href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item active">
<a href="#">1</a>
</li>
<li class="page-item">
<a href="#">2</a>
</li>
<li class="page-item">
<a href="#">3</a>
</li>
<li class="page-item">
<span>...</span>
</li>
<li class="page-item">
<a href="#">12</a>
</li>
<li class="page-item">
<a href="#">Next</a>
</li>
</ul>
You could use previous and next pagination to navigate.
<ul class="pagination">
<li class="page-item page-prev">
<a href="#">
<div class="page-item-subtitle">Previous</div>
<div class="page-item-title h5">Getting started</div>
</a>
</li>
<li class="page-item page-next">
<a href="#">
<div class="page-item-subtitle">Next</div>
<div class="page-item-title h5">Layout</div>
</a>
</li>
</ul>