Style 1
<div class="pagination d-block">
<ul>
<li><a href="#!" class="me-3 border-radius-10"><i class="fas fa-long-arrow-alt-left"></i></a></li>
<li class="active"><a href="#!" class="me-2 border-radius-10">1</a></li>
<li><a href="#!" class="me-2 border-radius-10">2</a></li>
<li><a href="#!" class="me-3 border-radius-10">3</a></li>
<li><a href="#!" class="border-radius-10"><i class="fas fa-long-arrow-alt-right"></i></a></li>
</ul>
</div>
Style 2
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a href="#!" class="me-0 border-end-0">Previous</a></li>
<li class="page-item"><a href="#!" class="me-0 border-end-0">1</a></li>
<li class="page-item"><a href="#!" class="me-0 border-end-0">2</a></li>
<li class="page-item"><a href="#!" class="me-0 border-end-0">3</a></li>
<li class="page-item"><a href="#!">Next</a></li>
</ul>
</nav>
Style 3
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="me-0 border-end-0" href="#!" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="page-item"><a class="me-0 border-end-0" href="#!">1</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#!">2</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#!">3</a></li>
<li class="page-item">
<a class="page-link border-radius-none" href="#!" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
Style 4
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="me-0 border-end-0" href="#!">Previous</a>
</li>
<li class="page-item active" aria-current="page"><a class="me-0 border-end-0" href="#!">1</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#!">2</a></li>
<li class="page-item"><a class="me-0 border-end-0" href="#!">3</a></li>
<li class="page-item"><a href="#!">Next</a>
</li>
</ul>
</nav>