Grupos de Listas en Bootstrap 5

Curso de Bootstrap 5 desde cero [completo]

Aprende Bootstrap 5, el framework de frontend más popular, completamente desde cero paso a paso.

newsletter.cuarzo.dev/p/curso-bootstrap-5

Bootstrap 5 ofrece el componente List Group (grupo de listas), que permite crear listas estilizadas de elementos. Estas listas pueden ser utilizadas para menús, listas de tareas, listas de productos, etc. Aquí veremos cómo implementar y personalizar los List Groups en Bootstrap 5.

Ejemplo Básico de List Group

HTML Básico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Groups en Bootstrap 5</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <ul class="list-group">
      <li class="list-group-item">Elemento 1</li>
      <li class="list-group-item">Elemento 2</li>
      <li class="list-group-item">Elemento 3</li>
    </ul>
  </div>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Desglose del Código

Contenedor del List Group:
- <ul class="list-group">
- La clase list-group indica que este contenedor es un grupo de listas.
Elementos del List Group:
- <li class="list-group-item">Elemento 1</li>
- La clase list-group-item se aplica a cada elemento de la lista.

Variaciones de List Group

Elemento Activo

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Elemento Activo</li>
  <li class="list-group-item">Elemento 2</li>
  <li class="list-group-item">Elemento 3</li>
</ul>

Elemento Deshabilitado

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Elemento Deshabilitado</li>
  <li class="list-group-item">Elemento 2</li>
  <li class="list-group-item">Elemento 3</li>
</ul>

List Group con Enlaces

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Enlace Activo</a>
  <a href="#" class="list-group-item list-group-item-action">Enlace 2</a>
  <a href="#" class="list-group-item list-group-item-action">Enlace 3</a>
</div>

List Group con Botones

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">Botón 1</button>
  <button type="button" class="list-group-item list-group-item-action">Botón 2</button>
  <button type="button" class="list-group-item list-group-item-action">Botón 3</button>
</div>

List Group sin Bordes

<ul class="list-group list-group-flush">
  <li class="list-group-item">Elemento sin borde 1</li>
  <li class="list-group-item">Elemento sin borde 2</li>
  <li class="list-group-item">Elemento sin borde 3</li>
</ul>

List Group Numerado

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Elemento numerado 1</li>
  <li class="list-group-item">Elemento numerado 2</li>
  <li class="list-group-item">Elemento numerado 3</li>
</ol>

List Group Horizontal

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Elemento 1</li>
  <li class="list-group-item">Elemento 2</li>
  <li class="list-group-item">Elemento 3</li>
</ul>

List Group Horizontal Responsivo

<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Elemento 1</li>
  <li class="list-group-item">Elemento 2</li>
  <li class="list-group-item">Elemento 3</li>
</ul>

List Group con Colores

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Elemento Primario</li>
  <li class="list-group-item list-group-item-secondary">Elemento Secundario</li>
  <li class="list-group-item list-group-item-success">Elemento de Éxito</li>
  <li class="list-group-item list-group-item-danger">Elemento de Peligro</li>
  <li class="list-group-item list-group-item-warning">Elemento de Advertencia</li>
  <li class="list-group-item list-group-item-info">Elemento Informativo</li>
  <li class="list-group-item list-group-item-light">Elemento Claro</li>
  <li class="list-group-item list-group-item-dark">Elemento Oscuro</li>
</ul>

List Group con Badges

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Elemento con Badge
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Elemento con Badge
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Elemento con Badge
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

List Group Personalizado

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

List Group con Checkbox y Radios

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Check this custom checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Check this custom checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Check this custom checkbox
  </label>
</div>

<div class="list-group mt-3">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="">
    Toggle this custom radio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="">
    Toggle this custom radio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="">
    Toggle this custom radio
  </label>
</div>

Conclusión

El componente List Group en Bootstrap 5 es extremadamente versátil y se puede personalizar de muchas maneras para satisfacer las necesidades de cualquier proyecto. Desde listas simples hasta menús complejos y listas interactivas, los List Groups de Bootstrap 5 pueden hacer que tu sitio web sea más organizado y fácil de navegar.