Los grupos de listas en Bootstrap 4

Name: Los grupos de listas en Bootstrap 4
Brand: Jose Aguilar
SKU: joseaguilarblog-7475
Availability: InStock
Rating: 5 (5 reviews)

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:

Source code

<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:

Mostrar un elemento como activo

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

Source code

<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:

Deshabilitar un elemento de la lista

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

Source code

<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:

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».

Source code

<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.

Source code

<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:

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.

Source code

<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.

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.

Source code

<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:

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:

Source code

<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:

Source code

<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>