Los grupos de listas en Bootstrap 4

Los grupos de listas son un componente flexible y poderoso para mostrar una serie de contenido en formato listado.

Suele ser un componente ideal para crear menús de navegación, sistemas de pestañas, lista de elementos, etc, pero, también se puede utilizar para otra multitud de funciones.

Listas desordenadas

El grupo de lista más básico es una lista desordenada con elementos como por ejemplo:

<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

Obteniendo como resultado:

Lista desordenada básica con Bootstrap

Mostrar un elemento como activo

Puedes agregar la clase .active a un elemento para indicar que se trata de la selección activa actual.

<ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

De esta forma, por defecto, el elemento tiene un fondo azul con las letras en color blanco tal y como puedes ver en la figura siguiente:

Lista desordenada con elemento activo

Deshabilitar un elemento de la lista

Puedes agregar la clase .disabled a un elemento de la lista para que se muestre como deshabilitado.

<ul class="list-group">
    <li class="list-group-item disabled">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

De esta forma, el elemento deshabilitado o desactivado aparece como difuminado o en un color más claro tal y como se muestra en la siguiente figura:

Lista desordenada con elemento desactivado

Enlaces o botones

Un grupo de lista también puede contener enlaces o botones y puede estar encapsulado por un contenedor «div» en vez de un «ul».

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

De esta forma, puedes hacer clic a cualquier elemento del listado y lo mismo puedes hacer con el elemento <button>, entre otros.

Eliminar algunos bordes y esquinas redondeadas

Puedes agregar .list-group-flush al elemento de la lista de grupo para eliminar algunos bordes y esquinas redondeadas.

<ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

Obteniendo como resultado:

Lista desordenada sin bordes ni esquinas redondeadas

Colores y fondos para los elementos del listado

Puedes utilizar las clases contextuales para visualizar elementos de la lista con un fondo y color establecidos.

<ul class="list-group">
    <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
    <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
    <li class="list-group-item list-group-item-success">This is a success list group item</li>
    <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
    <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
    <li class="list-group-item list-group-item-info">This is a info list group item</li>
    <li class="list-group-item list-group-item-light">This is a light list group item</li>
    <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Las clases .primary, .secondary, .success, etc son clases ya definidas por Bootstrap que puedes utilizar para tus elementos. Esto te puede ahorrar un rato de CSS.

Fondos y colores en lista desordenada Bootstrap 4

Listas de elementos con distintivos

Puedes agregar insignias a cualquier elemento del grupo de la lista para mostrar recuentos no leídos, actividad o cantidad de elementos disponibles.

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
    </li>
</ul>

Este marcado mostraría algo como lo siguiente:

Grupo de elementos con distintivo en Bootstrap 4

Sistema de pestañas con los grupos de listas

Agregar un sistema de pestañas con los grupos de listas es muy sencillo.

Fíjate en el siguiente código de marcado:

<div class="row">
    <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
            <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
            <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
            <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Contenido Home</div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Contenido Profile</div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Contenido Messages</div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Contenido Settings</div>
    </div>
</div>

He creado una fila que divido en 2 columnas.

En la primera columna tengo los elementos del grupo de lista y en la segunda columna tengo los contenidos de cada uno de ellos.

Este sistema de pestañas funciona en el ejemplo en funcionamiento porque estoy cargando en la cabecera el JavaScript que aporta la librería Bootstrap. Sin el JavaScript cargado no funciona.

Conclusión

Con los grupos de lista de Bootstrap tienes la oportunidad de mostrar con distintos formatos un grupo de elementos que puede ser utilizado para menús de navegación, pestañas o cualquier otro tipo de lista de elementos que se te pueda ocurrir.

En definitiva, también tienes la posibilidad de agregar cualquier contenido personalizado dentro de los elementos de la lista.

Por ejemplo, puedes mostrar una lista de noticias con un grupo de lista:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small>3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
</div>

Obteniendo como resultado un aspecto bastante agradable para un listado de noticias en una columna de tu página web.

Listas de elementos con contenido personalizado

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Los grupos de listas en Bootstrap 4”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre