Bootstrap 4 – Lista de grupos

El grupo de lista más básico es una lista desordenada con elementos de lista.

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

Para crear un grupo de lista básico, usa un elemento <ul> con la clase .list-group y elementos <li> con la clase .list-group-item.

Ejm

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Estado activo

Estado activo de lista de grupo Bootstrap 4

Use la clase .active para resaltar el elemento actual.

Ejm

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Lista de grupo con elementos vinculados

Para crear un grupo de lista con elementos vinculados, usa <div> en lugar de <ul> y <a> en lugar de <li>. Opcionalmente, agrega la clase .list-group-item-action si deseas un color de fondo gris al pasar el mouse:

Ejm

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Artículo deshabilitado

La clase .disabled agrega un color de texto más claro al elemento deshabilitado. Y cuando se usa en enlaces, eliminará el efecto de desplazamiento.

Artículo deshabilitado Bootstrap 4

Ejm

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Enjuagar / eliminar bordes

Use la clase .list-group-flush para eliminar algunos bordes y esquinas redondeadas.

Eliminar bordes Bootstrap 4

Ejm

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Lista de grupos horizontal

Si deseas que los elementos de la lista se muestren horizontalmente en lugar de verticalmente (uno al lado del otro en lugar de uno encima del otro), agrega la clase .list-group-horizontal a .list-group.

Lista de grupos horizontal

Ejm

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

Clases contextuales

Las clases contextuales son usadas para poner color a los artículos (ítems).

Clases contextuales Bootstrap 4

Las clases para colorear elementos de la lista son.

  • .list-group-item.success
  • .list-group-item-secundary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group.item-primary
  • .list-group-item-dark
  • .list-group-item-light

Ejm

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Vincular elementos con clases contextuales

Vincular elementos con clases contextuales Bootstrap 4

Ejm

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

Lista de grupo con insignias

Combina clases .badge con clases de utilidad / ayuda para agregar distintivos dentro del grupo de lista:

Ejm

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>