Menu
I have this code in pagination
<div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> But my ul is left aligned. Is there any way to center the ul wrt div?
I tried margin: auto auto and margin :0 auto they but didn't work.
522
“pagination align center in bootstrap 4” Code AnswerUse the class . justify-content-center on the . pagination ul.
Add this class to get the pager links. Use class . previous to left align and . next to right-align the links.
Choose Format > Page Layout > Pagination. Select one of the options in the Pagination area. If you select Double Sided, also define whether the first page is a left or right page. If you are applying pagination in a book, you can select Read from File to use the page side specified in the file.
Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
<div class="text-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> <div class="text-xs-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> <div class="pagination text-center"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> Give this way:
.pagination {text-align: center;} It works because ul is using inline-block;
Or if you would like to use Bootstrap's class:
<div class="pagination pagination-centered"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> For both Bootstrap 3.0 and 2.3.2, to center pagination, the .text-center class can be applied to the containing div.
Note: Where to apply the .pagination class in the markup has changed between Bootstrap 2.3.2 and 3.0. See below, or read the Bootstrap docs on pagination: Bootstrap 3.0, Bootstrap 2.3.2.
Bootstrap 3 Example
<div class="text-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> http://jsfiddle.net/mynameiswilson/eYNMu/
Bootstrap 2.3.2 Example
<div class="pagination text-center"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> http://jsfiddle.net/mynameiswilson/84X3M/
22
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
