Réaliser une pagination avec Bootstrap4

La pagination est un composant qui permet de numéroter plusieurs pages et de naviguer entre ces différentes pages, elle est souvent très utilisée sur les blogs.

Bootstrap4 prévoyant et conscient de l’utilité de ce composant, elle le  fournit accompagnée d’autre importantes fonctionnalités comme  l’activation et la désactivation des éléments de la pagination, l’alignement de la pagination, l’insertion d’une icône.

Conception d’une navigation par pagination :

Bootstrap4 met à notre disposition pour concevoir une pagination trois classes .pagination .page-item .page-link.

Exemple :

<ul class="pagination">
    <li class="page-item">
       <a class="page-link" href="#">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>

Résultat :

Insertion d’une icône :

Vous avez le choix de mettre à la place des mots Previous et Next, des icônes de direction. Il existe deux moyens, le premier est de télécharger une bibliothèque à icones tel que Font Awesome Icons et de l’insérer sur votre page, puis utiliser l’une des nombreuses icones que vous propose la bibliothèque. Le second est d’utiliser la méthode proposée par Bootstrap qui est la suivante :

<ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
</ul>

Résultat :

Activation et désactivation des éléments d’une pagination :

Pour activer un élément d’une pagination il faut utiliser la classe .active et pour le désactiver c’est la classe .disabled qui est octroyée pour ce besoin.

Exemple :

<ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">Previous</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="#">Next</a>
    </li>
</ul>

Résultat :

Explication : Nous avons désactivé le bouton Previous et activé le bouton numéro 2 .

Aligner votre pagination :

Par défaut la pagination une fois créée se positionne à gauche de la page, mais vous pouvez changer son alignement, en le positionnant au milieu à l’aide de la classe .justify-content-center ou à droite de la page à l’aide de la classe .justify-content-end

Exemple :  Alignement de la pagination au milieu

<ul class="pagination mt-5 justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#">Previous</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="#">Next</a>
    </li>
</ul>

Résultat :

Exemple :  Alignement de la pagination à droite

<ul class="pagination mt-5 justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#">Previous</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="#">Next</a>
    </li>
</ul>

Résultat :

Cours précédent                                                                      Cours suivant

Voir la table des matières