I'm using Bootstrap 4 and attempting to horizontally center a pagination
UL inside a grid column. Now that the pagination
is display:flex
I can't get it to properly center.
I would like to use only existing Bootstrap classes w/o any additional CSS to get it centered.
I have tried using text-center
, mx-auto
, align-items-center
but nothing seems to work.
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 py-5 border">
<ul class="pagination mx-auto">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<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="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Here is the Code example
Just add justify-content: center;
in .pagination
class
.pagination {
justify-content: center;
}
Here is working code: https://jsfiddle.net/r9z25u06/
Use the class .justify-content-center
on the .pagination
ul
.
e.g. <ul class="pagination justify-content-center">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With