Componentes de Bootstrap

Grupo de lista

Una lista vertical de elementos que pueden ser simples, clicables o llevar un estado.

Un grupo de lista presenta una serie de elementos relacionados uno bajo otro: un menú, las unidades de un curso, los resultados de una búsqueda. Los elementos pueden ser enlaces o botones.

Cuándo usarlo

Úsalo

Usar list-group-item-action cuando los elementos son enlaces o botones.
Marcar el elemento actual como activo.
Poner un badge a la derecha para un recuento o un estado.

No

Usarlo para una tabla con varias columnas; usa una tabla.
Hacer clicables unos elementos y otros no en la misma lista.
Colorear elementos por significado sin un texto que también lo diga.

Anatomía

Un contenedor (list-group) de elementos (list-group-item), cada uno simple, una acción (enlace o botón) o contextual (éxito, aviso…). Uno puede estar activo y algunos desactivados.

Variantes y estados

Elementos y acciones

Active item
Second item
Third item
Disabled item

Dashboard My courses Calendar (hover) Messages (focus) Disabled

Con iconos y badges

Unit 1 · NumbersDone
Unit 2 · FunctionsIn progress
Unit 3 · EquationsLocked

Sin bordes y contextual

Flush item one
Flush item two
Flush item three

A success item
A warning item
A danger item
A info item

Combinaciones

Combinación	Para qué usarla
Lista de acciones × navegación	Elementos que son enlaces o botones, uno activo; para un menú lateral o una lista de resultados.
Lista + badge	Un estado o un recuento a la derecha de cada elemento.
Lista sin bordes × tarjeta	Dentro de una tarjeta, sin borde ni radio propios.
Contextual × estado	Color solo cuando el color es el estado, y con un texto que también lo diga.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Los elementos tienen más relleno y una línea fina entre ellos	Las filas son fáciles de recorrer y de pulsar, y la lista no parece una pila de cajas.
El elemento activo va relleno, el hover es un tinte y el foco se dibuja dentro	Los tres estados son cosas distintas, así que nunca se confunden.
Las esquinas exteriores son redondeadas y las interiores rectas	La lista se lee como una sola superficie.

Clases

Clase	Qué hace
`list-group`, `list-group-item`	La lista y sus elementos
`list-group-item-action`	Elemento clicable con hover y foco
`active`, `disabled`	Estado de un elemento
`list-group-flush`	Sin borde exterior ni radio (dentro de una tarjeta)
`list-group-item-success`…	Color contextual

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

Usa aria-current="true" en el elemento activo.
Un elemento clicable es un a o un button, no un div.
Un elemento desactivado lleva aria-disabled="true" y tabindex="-1".