//Style 1
<div class="pagination d-block">
<ul>
<li><a href="#!"><i class="fas fa-long-arrow-alt-left me-2"></i> Prev</a></li>
<li class="active"><a href="#!">1</a></li>
<li><a href="#!">2</a></li>
<li><a href="#!">3</a></li>
<li><a href="#!">Next<i class="fas fa-long-arrow-alt-right ms-2"></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" 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="#!" tabindex="-1" aria-disabled="true">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>