Créer une liste avec Bootstrap

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>

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.

Autres tutoriels disponibles sur le blog

• Créer facilement un carousel bootstrap
• Réaliser un accordéon avec bootstrap
• Réaliser une barre de navigation bootstrap