
Ce blog est soutenu par ses lecteurs. Lorsque vous achetez par le biais de liens affiliés sur notre site, nous percevons une commission. En savoir plus
Le style par défaut de l’élément liste du HTML dans certains projets web n’est parfois pas attrayant , et même dès fois c’est nuisible pour l’expérience utilisateur.
Bootstrap nous permet de proposer cet élément dans nos réalisations de manière à captiver l’attention du visiteur. Comme vous pouvez le constater sur cette réalisation, elle nous offre la possibilité de styliser proprement une liste et de la rendre flexible.
Styliser une liste à l’aide Bootstrap est facile à réaliser, découvrons ensemble comment s’y prendre.
Réalisons une simple liste à l’aide de Bootstrap
Nous avons à notre disposition deux classes pour appliquer le style Bootstrap à l’élément liste :
- La première classe est la classe .list-group, elle doit être intégrée dans la balise ul. Cette classe rend le composant liste flexible et lui retire les marges qu’elle a par défaut.
- La seconde classe est la classe .list-group-item, cette classe doit être appliquée à tous les éléments de la liste. Elle définit un fond blanc pour ces éléments, leur applique une bordure et aussi des marges.
Exemple :
<ul class="list-group"> <li class="list-group-item">Bootstrap Top Design</li> <li class="list-group-item">Codename One Tuto</li> <li class="list-group-item">Codename One Store</li> <li class="list-group-item">Penoel KOUKOU</li> <li class="list-group-item">Eric Gbofu</li> </ul>

Si vous désirez activer l’un des éléments de la liste, il vous faut ajouter la classe .active à cet élément.
Exemple :
<ul class="list-group"> <li class="list-group-item active">Bootstrap Top Design</li> <li class="list-group-item">Codename One Tuto</li> <li class="list-group-item">Codename One Store</li> <li class="list-group-item">Penoel KOUKOU</li> <li class="list-group-item">Eric Gbofu</li> </ul>

Intégrons des liens dans une liste stylisée avec Bootstrap :
Bootstrap nous offre aussi la possibilité de grouper des liens dans une liste avec un style séduisant.
Pour s’y prendre, il faut en plus de la classe .list-group-item, ajouter la classe .list-group-item-action aux liens.
Exemple :
<ul class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Bootstrap Top Design</a> <a href="#" class="list-group-item list-group-item-action">Codename One Tuto</a> <a href="#" class="list-group-item list-group-item-action">Codename One Store</a> <a href="#" class="list-group-item list-group-item-action">Penoel KOUKOU</a> <a href="#" class="list-group-item list-group-item-action">Eric Gbofu</a> </ul>

Découvrez la démo de nos listes stylisées à l’aide de Bootstrap via le bouton ci-dessous et pour plus d’amples informations sur le composant liste de Bootstrap, cliquer ici.
Démo