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>