<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div>

body { background-color: #eee } .wrapper { height: 100vh; display: flex; justify-content: center; align-items: center } .page-link { position: relative; display: block; color: #673AB7 !important; text-decoration: none; background-color: #fff; border: 1px solid #673AB7 !important } .page-link:hover { z-index: 2; color: #fff !important; background-color: #673ab7; border-color: #024dbc } .page-link:focus { z-index: 3; outline: 0; box-shadow: none }