<h3>Flat Circle</h3>
<nav aria-label="Page navigation">
<ul class="pagination pagination-plain">
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item disabled"><a class="page-link" href="javascript:void(0)">4</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<h3>Shaded Circle</h3>
<nav aria-label="Page navigation">
<ul class="pagination">
...
</ul>
</nav>
<h3>Flat Rounded</h3>
<nav aria-label="Page navigation">
<ul class="pagination pagination-round pagination-plain">
...
</ul>
</nav>
<h3>Shaded Rounded</h3>
<nav aria-label="Page navigation">
<ul class="pagination pagination-round">
...
</ul>
</nav>
<h3>Flat Square</h3>
<nav aria-label="Page navigation">
<ul class="pagination pagination-square pagination-plain">
...
</ul>
</nav>
<h3>Shaded Square</h3>
<nav aria-label="Page navigation">
<ul class="pagination pagination-square">
...
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-success">
...
</ul>
</nav>
<nav aria-label="...">
<ul class="pager pager-flat d-flex justify-content-between">
<li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
<li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pager d-flex justify-content-between">
<li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
<li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pager pager-flat pager-info d-flex justify-content-between">
<li><a class="page-link" href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
<li><a class="page-link" href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
</ul>
</nav>