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 :

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 :

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