Pagination Bootstrap 5

Pagination de base

Si votre site web comporte de nombreuses pages, vous pourriez vouloir ajouter un type de pagination pour chaque page.

Pour créer une pagination de base, ajoutez .pagination Ajoutez la classe à <ul> l'élément. Ensuite, ajoutez .page-item à chaque <li> l'élément, et ajoutez .page-link Ajoutez la classe à <li> Pour chaque lien :

Exemple

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Page précédente</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="#">Page suivante</a></li>
</ul>

Essayer par vous-même

État actif

.active La classe est utilisée pour "mise en avant" la page courante :

Exemple

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Page précédente</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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="#">Page suivante</a></li>
</ul>

Essayer par vous-même

État désactivé

.disabled La classe est utilisée pour les liens non cliquables :

Exemple

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Page précédente</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="#">Page suivante</a></li>
</ul>

Essayer par vous-même

Taille de la pagination

Les blocks de pagination peuvent également être ajustés à une taille plus grande ou plus petite :

Veuillez ajouter la classe pour des blocks plus grands .pagination-lg ou pour des blocks plus petits .pagination-sm Type :

Exemple

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Page précédente</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="#">Page suivante</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Page précédente</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="#">Page suivante</a></li>
</ul>

Essayer par vous-même

Alignement de la pagination

Utilisez les classes utilitaires pour modifier l'alignement de la pagination :

Exemple

<!-- Par défaut (aligné à gauche) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Aligné au centre -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Aligné à droite -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Essayer par vous-même

Filtres de navigation (Breadcrumbs)

Une autre forme de pagination est les filtres de navigation :

.breadcrumb et .breadcrumb-item La classe détermine la position actuelle de la page dans la hiérarchie de navigation :

Exemple

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Automne 2019</a></li>
  <li class="breadcrumb-item"><a href="#">Chine</a></li>
  <li class="breadcrumb-item active"> Pékin </li>
</ul>

Essayer par vous-même