Grupo de lista Bootstrap 5

grupo de lista básico

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

Para crear un grupo de lista básico, utilice la clase .list-group del <ul> elemento y clase .list-group-item del <li> elemento:

Ejemplo

<ul class="list-group">
  <li class="list-group-item">Primer artículo</li>
  <li class="list-group-item">Segundo artículo</li>
  <li class="list-group-item">Tercer artículo</li>
</ul>

Prueba personal

estado activo

Utilice .active Clase para resaltar el elemento actual:

Ejemplo

<ul class="list-group">
  <li class="list-group-item active">elemento activo</li>
  <li class="list-group-item">Segundo artículo</li>
  <li class="list-group-item">Tercer artículo</li>
</ul>

Prueba personal

grupo de lista con elementos enlazados

Para crear un grupo de lista con elementos enlazados, utilice <div> en lugar de <ul>usar <a> en lugar de <li>Opcionalmente, si desea un fondo de color gris al pasar el ratón, agregue .list-group-item-action Clase:

Ejemplo

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">primer elemento</a>
  <a href="#" class="list-group-item list-group-item-action">segundo elemento</a>
  <a href="#" class="list-group-item list-group-item-action">Tercer artículo</a>
</div>

Prueba personal

Proyectos inhabilitados

.disabled La clase agrega un color de texto más claro a los proyectos inhabilitados. Al usarlo en enlaces, se elimina el efecto de suspensión:

Ejemplo

<div class="list-group">
  <a href="#" class="list-group-item disabled">Proyecto inhabilitado</a>
  <a href="#" class="list-group-item disabled">Proyecto inhabilitado</a>
  <a href="#" class="list-group-item">Tercer artículo</a>
</div>

Prueba personal

Eliminar bordes

Usar .list-group-flush Clase que elimina los bordes y las esquinas redondas:

Ejemplo

<ul class="list-group list-group-flush">
  <li class="list-group-item">Primer artículo</li>
  <li class="list-group-item">Segundo artículo</li>
  <li class="list-group-item">Tercer artículo</li>
  <li class="list-group-item">Cuarto artículo</li>
</ul>

Prueba personal

Grupo de lista numerada

Usar .list-group-numbered Clase que crea elementos de lista con números precedentes:

Ejemplo

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Primer artículo</li>
  <li class="list-group-item">Segundo artículo</li>
  <li class="list-group-item">Tercer artículo</li>
</ol>

Prueba personal

Grupo de lista horizontal

Si desea que los elementos de lista se muestren horizontalmente en lugar de verticalmente (alineados en lugar de apilados), agregue .list-group-horizontal Clase añadida a .list-group:

Ejemplo

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Primer artículo</li>
  <li class="list-group-item">Segundo artículo</li>
  <li class="list-group-item">Tercer artículo</li>
  <li class="list-group-item">Cuarto artículo</li>
</ul>

Prueba personal

Clases de contexto

Las clases de contexto se pueden usar para agregar colores a los elementos de lista:

Las clases para colorear elementos de lista son:

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

Ejemplo

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Artículo exitoso</li>
  <li class="list-group-item list-group-item-secondary">Elemento secundario</li>
  <li class="list-group-item list-group-item-info">Elemento de información</li>
  <li class="list-group-item list-group-item-warning">Aviso de elemento</li>
  <li class="list-group-item list-group-item-danger">Elemento peligroso</li>
  <li class="list-group-item list-group-item-primary">Elemento primario</li>
  <li class="list-group-item list-group-item-dark">Elemento oscuro</li>
  <li class="list-group-item list-group-item-light">Elemento claro</li>
</ul>

Prueba personal

Enlace de proyecto con clase contextual

Ejemplo

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Elemento de acción</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Elemento exitoso</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Elemento secundario</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Elemento de información</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Aviso de elemento</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Artículo peligroso</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Artículo primario</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Artículo oscuro</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Artículo ligero</a>
</div>

Prueba personal

Grupo de lista con insignia

Para .insignia Las clases y los tipos de utilidad/AYUDANTE pueden combinarse para agregar insignias a los grupos de lista:

Ejemplo

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Bandeja de entrada
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Correo de publicidad
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Papelera
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Prueba personal