Centrer la pagination dans bootstrap

Question

J'ai ce code dans la 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>

Mais mon ul est aligné à gauche. Existe-t-il un moyen de centrer le ul par rapport à div ?

J'ai essayé margin: auto auto y margin :0 auto mais ça n'a pas marché.

Answer 1

Bootstrap a ajouté une nouvelle classe à partir de la version 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 a une nouvelle classe

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

Pour la version 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>

---

Donnez de cette façon :

.pagination {text-align: center;}

Cela fonctionne parce que ul utilise inline-block;

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

---

Ou si vous souhaitez utiliser la classe de Bootstrap :

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

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

Answer 2

Dans les versions Bootstrap 3.0 et 2.3.2, pour centrer la pagination, l'option .texte-centre peut être appliquée à la classe div .

Nota: Où appliquer le .pagination dans le balisage a changé entre Bootstrap 2.3.2 et 3.0. Voir ci-dessous, ou lisez les documents de Bootstrap sur la pagination : Bootstrap 3.0 , Bootstrap 2.3.2 .

Exemple de Bootstrap 3

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

Exemple de Bootstrap 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>

http://jsfiddle.net/mynameiswilson/84X3M/

Answer 3

Pour centrer la pagination dans BS4, il faut ajouter justify-content-center en 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">

Voir Pagination Bootstrap 4 pour de plus amples informations.

Answer 4

Utiliser laravel avec bootstrap 4, la solution qui a fonctionné :

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

Answer 5

solution pour Bootstrap 4

Vous pouvez l'utiliser Alignement utiliser cette classe justify-content-center

Modifiez l'alignement des composants de pagination avec utilitaires flexbox .

et en savoir plus pagination

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

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