Centering the pagination in bootstrap

Question

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.

Answer 1

Bootstrap has added a new class from 3.0.

<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> 

Bootstrap 4 has new class

<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> 

For 2.3.2

<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;

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/

---

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> 

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/

Answer 2

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/