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">«</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">»</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 J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.