contact@bootstrap-top-design.com

Créer une liste avec Bootstrap

styliser l'élément HTML liste à l'aide de Bootstrap

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 avec 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>
style bootstrap pour une liste

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>
activer une élément d'une liste à l'aide de Bootstrap

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>
activer une élément d'une liste à l'aide de Bootstrap

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

Autres tutoriels disponibles sur le blog

Laisser un commentaire