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 :

pagination

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 :

pagination avec icone

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 :

pagination avec des liens desactivés

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 :

Alignement d'une pagination

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 :

Alignement d'une pagination

Cours précédent                                                                      Cours suivant

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.