El grupo de lista más básico es una lista desordenada con elementos de lista y las clases adecuadas. Construya sobre él con las opciones que siguen, o con su propio CSS según sea necesario.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Agregue .disabled a .list-group-item para que aparezca deshabilitado. Tenga en cuenta que algunos elementos con .disabled también requerirán JavaScript personalizado para inhabilitar completamente sus eventos de clic (por ejemplo, enlaces).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Agregue . list-group-flush para eliminar algunos bordes y esquinas redondeadas para representar los elementos del grupo de la lista de borde a borde en un contenedor principal (por ejemplo, tarjetas) .

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Utilice clases contextuales para diseñar elementos de lista con un fondo y color con estado.

• Dapibus ac facilisis in
• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group item
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

Agregue insignias a cualquier elemento del grupo de la lista para mostrar los recuentos no leídos, la actividad y más con la ayuda de algunas utilidades .

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

Agregue insignias a cualquier elemento del grupo de la lista para mostrar los recuentos no leídos, la actividad y más con la ayuda de algunas utilidades .

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

Agregue .active a .list-group-item para indicar la selección activa actual.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Utilice & lt; a & gt; so & lt; button & gt; s para crear elementos de grupo de listas accionables con estados activos, inhabilitados y activos. agregando .list-group-item-action . Separamos estas pseudoclases para asegurarnos de que los grupos de listas compuestos por elementos no interactivos (como & lt; li & gt; so & lt; div & gt; s) no brinden un clic o aprovechar la asequibilidad.

Asegúrese de no utilizar las clases .btn estándar aquí .

Agregue .list-group-horizontal para cambiar el diseño de los elementos del grupo de lista de vertical a horizontal en todos los puntos de interrupción. Alternativamente, elija una variante receptiva .list-group-horizontal- {sm | md | lg | xl} para hacer que un grupo de lista sea horizontal comenzando en el min-width de ese punto de interrupción. Actualmente, los grupos de listas horizontales no se pueden combinar con los grupos de listas alineadas.

ProTip: ¿Desea elementos de grupo de lista de igual ancho cuando son horizontales? Agregue .flex-fill a cada elemento del grupo de lista.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

Utilice clases contextuales para diseñar elementos de lista con un fondo y color con estado.

Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el siguiente, con la ayuda de utilidades flexbox .