Centering the pagination in bootstrap

Bootstrap has added a new class from 3.0.

<div class="text-center">
    <ul class="pagination">
        <li><a href="https://stackoverflow.com/questions/15265253/?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="https://stackoverflow.com/questions/15265253/?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="https://stackoverflow.com/questions/15265253/?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="https://stackoverflow.com/questions/15265253/?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/

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)