Centering the pagination in bootstrap

Question

I have this code in pagination

    

        
1         


        

                      

              相关标签:
       
      

Answer 1

The previously mentioned solutions for Bootstrap 3.0 did not work for me on 3.1.1. The pagination class has display:block, and the <li> elements have float:left, which means merely wrapping the <ul> in text-center alone does not work. I have no idea how or when things changed between 3.0 and 3.1.1. Anyway, I had make the <ul> use display:inline-block instead. Here's the code:

<div class="text-center">
    <ul class="pagination" style="display: inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

Or for a cleaner setup, omit the style attribute and put it in your stylesheet instead:

.pagination {
    display: inline-block;
}

And then use the markup previously suggested:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>

Answer 2

You can add your custom Css:

.pagination{
    display:table;
    margin:0 auto;
}

Thank you

Answer 3

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 4

To centered the pagination in BS4, should add justify-content-center in ul:

 <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">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="#">Next</a>
      </li>
    </ul>
  </nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

See Pagination Bootstrap 4 for further information.

Answer 5

Using laravel with bootstrap 4, the solution that worked:

<div class="d-flex">
    <div class="mx-auto">
        {{$products->links("pagination::bootstrap-4")}}
    </div>
</div>

Answer 6

I couldn't get any of the proposed solutions to work with Bootstrap 4 alpha 6, but the following variation finally got me a centred pagination bar.

CSS override:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

HTML:

<div class="text-center">
  <ul class="pagination">
    <li><a href="...">...</a></li>
  </ul>
</div>

No other combination of display, margin or class on the wrapping div seemed to work.