Listas en bootstrap 4

las listas en bootstrap 4 son otro de los elementos básicos que se utilizan de forma recurrente en el desarrollo web.

Para su uso en este framework necesitamos crear una lista, ya sea normal u ordenada con la clase list-group y en cada elemento de la misma hay que añadir la clase list-group-item, tal y como vemos en el siguiente ejemplo:

<ul class="list-group">
	<li class="list-group-item list-group-item-danger">Uno</li>
	<li class="list-group-item">Dos</li>
	<li class="list-group-item active">Tres</li>
	<li class="list-group-item disabled">Cuatro</li>
	<li class="list-group-item">Cinco</li>
	<li class="list-group-item">Seis</li>
</ul>

Podemos ver que podemos utilizar las clases active y disabled para obtener diferentes resultados.

Podemos usar los colores que ya conocemos dentro de la lista utilizando la clase list-group-item-[color] como también vemos en el ejemplo.

Estas listas podrían hacerse por medio de divs y enlaces si lo necesitamos para lo cual solamente hay que cambiar las etiquetas html.

<div class="list-group">
	<a href="#" class="list-group-item list-group-item-danger">Uno</a>
	<a href="#" class="list-group-item">Dos</a>
	<a href="#" class="list-group-item active">Tres</a>
	<a href="#" class="list-group-item disabled">Cuatro</a>
	<a href="#" class="list-group-item">Cinco</a>
	<a href="#" class="list-group-item">Seis</a>
</div>

Y en los resultados vemos que la lista con divs y enlaces es muy similar solo que nos permite hacer clicks.

De todas formas esto es solo una forma de hacer las listas en bootstrap 4, ya que podríamos poner los enlaces dentro de los lists por ejemplo, ya todo depende de nuestros gustos y de las necesidades de nuestro proyecto.