Grupo de lista

Los grupos de lista son un componente flexible y potente para mostrar una serie de contenidos. Modifícalos y extiéndelos para admitir casi cualquier contenido en su interior.

En esta página

Ejemplo básico

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

Un elemento
Un segundo elemento
Un tercer elemento
Un cuarto elemento
Y un quinto elemento

html

<ul class="list-group">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
  <li class="list-group-item">Un cuarto elemento</li>
  <li class="list-group-item">Y un quinto elemento</li>
</ul>

Elementos activos

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

Un elemento activo
Un segundo elemento
Un tercer elemento
Un cuarto elemento
Y un quinto elemento

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Un elemento activo</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
  <li class="list-group-item">Un cuarto elemento</li>
  <li class="list-group-item">Y un quinto elemento</li>
</ul>

Enlaces y botones

Utiliza elementos <a> o <button> para crear elementos de grupo de lista accionables con estados hover, deshabilitado y activo agregando .list-group-item-action. Separamos estas pseudoclases para garantizar que los grupos de lista hechos de elementos no interactivos (como <li> o <div>) no proporcionen una apariencia visual de clic o toque.

Haz que las instancias de .list-group-item-action parezcan deshabilitadas agregando .disabled y aria-disabled="true" para informar a las tecnologías de asistencia que el elemento está deshabilitado. Es posible que necesites JavaScript adicional para deshabilitar por completo los enlaces y botones.

Asegúrate de no usar las clases estándar .btn aquí.

El elemento de enlace actual Un segundo elemento de enlace Un tercer elemento de enlace Un cuarto elemento de enlace Un elemento de enlace deshabilitado

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    El elemento de enlace actual
  </a>
  <a href="#" class="list-group-item list-group-item-action">Un segundo elemento de enlace</a>
  <a href="#" class="list-group-item list-group-item-action">Un tercer elemento de enlace</a>
  <a href="#" class="list-group-item list-group-item-action">Un cuarto elemento de enlace</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Un elemento de enlace deshabilitado</a>
</div>

Con los <button>, también puedes utilizar el atributo disabled en lugar de la clase .disabled. Lamentablemente, los elementos <a> no admiten el atributo disabled.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    El botón actual
  </button>
  <button type="button" class="list-group-item list-group-item-action">Un segundo elemento de botón</button>
  <button type="button" class="list-group-item list-group-item-action">Un tercer elemento de botón</button>
  <button type="button" class="list-group-item list-group-item-action">Un cuarto elemento de botón</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Un elemento de botón deshabilitado</button>
</div>

Flush

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

Un elemento
Un segundo elemento
Un tercer elemento
Un cuarto elemento
Y un quinto elemento

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
  <li class="list-group-item">Un cuarto elemento</li>
  <li class="list-group-item">Y un quinto elemento</li>
</ul>

Numerado

Agrega la clase modificadora .list-group-numbered (y opcionalmente usa un elemento <ol>) para optar por elementos de grupo de lista numerados. Los números se generan a través de CSS (a diferencia del estilo de navegador predeterminado de un <ol>) para una mejor ubicación dentro de los elementos del grupo de lista y para permitir una mejor personalización.

Los números se generan mediante counter-reset en el <ol>, y luego se les da estilo y se colocan con un pseudoelemento ::before en el <li> con counter-increment y content.

Un elemento de lista
Un elemento de lista
Un elemento de lista

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Un elemento de lista</li>
  <li class="list-group-item">Un elemento de lista</li>
  <li class="list-group-item">Un elemento de lista</li>
</ol>

Estos también funcionan muy bien con contenido personalizado.

Subtítulo
Contenido para el elemento de lista
14
Subtítulo
Contenido para el elemento de lista
14
Subtítulo
Contenido para el elemento de lista
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subtítulo</div>
      Contenido para el elemento de lista
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subtítulo</div>
      Contenido para el elemento de lista
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subtítulo</div>
      Contenido para el elemento de lista
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontal

Agrega .list-group-horizontal para cambiar el diseño de los elementos del grupo de lista de vertical a horizontal en todos los breakpoints. Alternativamente, elige una variante responsiva .list-group-horizontal-{sm|md|lg|xl|xxl} para hacer que un grupo de lista sea horizontal a partir del min-width de ese breakpoint. Actualmente, los grupos de lista horizontales no se pueden combinar con grupos de lista flush.

ProTip (Consejo profesional): ¿Quieres elementos de grupo de lista de igual ancho cuando son horizontales? Agrega .flex-fill a cada elemento de grupo de lista.

Un elemento
Un segundo elemento
Un tercer elemento

Un elemento
Un segundo elemento
Un tercer elemento

Un elemento
Un segundo elemento
Un tercer elemento

Un elemento
Un segundo elemento
Un tercer elemento

Un elemento
Un segundo elemento
Un tercer elemento

Un elemento
Un segundo elemento
Un tercer elemento

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">Un elemento</li>
  <li class="list-group-item">Un segundo elemento</li>
  <li class="list-group-item">Un tercer elemento</li>
</ul>

Variantes

¡Atención! A partir de v5.3.0, el mixin de Sass list-group-item-variant() está obsoleto. Las variantes de elementos de grupo de lista ahora tienen sus variables CSS anuladas en un bucle Sass.

Utiliza clases contextuales para dar estilo a los elementos de lista con un fondo y un color que indiquen su estado.

Un elemento de grupo de lista predeterminado simple
Un elemento de grupo de lista primary simple
Un elemento de grupo de lista secondary simple
Un elemento de grupo de lista success simple
Un elemento de grupo de lista danger simple
Un elemento de grupo de lista warning simple
Un elemento de grupo de lista info simple
Un elemento de grupo de lista light simple
Un elemento de grupo de lista dark simple

html

<ul class="list-group">
  <li class="list-group-item">Un elemento de grupo de lista predeterminado simple</li>
  
  <li class="list-group-item list-group-item-primary">Un elemento de grupo de lista primary simple</li>
  <li class="list-group-item list-group-item-secondary">Un elemento de grupo de lista secondary simple</li>
  <li class="list-group-item list-group-item-success">Un elemento de grupo de lista success simple</li>
  <li class="list-group-item list-group-item-danger">Un elemento de grupo de lista danger simple</li>
  <li class="list-group-item list-group-item-warning">Un elemento de grupo de lista warning simple</li>
  <li class="list-group-item list-group-item-info">Un elemento de grupo de lista info simple</li>
  <li class="list-group-item list-group-item-light">Un elemento de grupo de lista light simple</li>
  <li class="list-group-item list-group-item-dark">Un elemento de grupo de lista dark simple</li>
</ul>

Para enlaces y botones

Las clases contextuales también funcionan con .list-group-item-action para los elementos <a> y <button>. Ten en cuenta la adición de los estilos hover aquí que no están presentes en el ejemplo anterior. También se admite el estado .active; aplícalo para indicar una selección activa en un elemento de grupo de lista contextual.

Un elemento de grupo de lista predeterminado simple Un elemento de grupo de lista primary simple Un elemento de grupo de lista secondary simple Un elemento de grupo de lista success simple Un elemento de grupo de lista danger simple Un elemento de grupo de lista warning simple Un elemento de grupo de lista info simple Un elemento de grupo de lista light simple Un elemento de grupo de lista dark simple

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Un elemento de grupo de lista predeterminado simple</a>
  
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Un elemento de grupo de lista primary simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Un elemento de grupo de lista secondary simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Un elemento de grupo de lista success simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Un elemento de grupo de lista danger simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Un elemento de grupo de lista warning simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Un elemento de grupo de lista info simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Un elemento de grupo de lista light simple</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Un elemento de grupo de lista dark simple</a>
</div>

Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Con insignias (badges)

Agrega insignias (badges) a cualquier elemento de grupo de lista para mostrar recuentos no leídos, actividad y más con la ayuda de algunas utilidades.

Un elemento de lista 14
Un segundo elemento de lista 2
Un tercer elemento de lista 1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Un elemento de lista
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Un segundo elemento de lista
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Un tercer elemento de lista
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>

Contenido personalizado

Agrega casi cualquier HTML en su interior, incluso para grupos de listas vinculadas como el siguiente, con la ayuda de las utilidades flexbox.

Encabezado del elemento del grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y algo de letra pequeña.

Encabezado del elemento del grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y algo de letra pequeña atenuada.

Encabezado del elemento del grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y algo de letra pequeña atenuada.

html

<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">Encabezado del elemento del grupo de lista</h5>
      <small>Hace 3 días</small>
    </div>
    <p class="mb-1">Algún contenido de marcador de posición en un párrafo.</p>
    <small>Y algo de letra pequeña.</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">Encabezado del elemento del grupo de lista</h5>
      <small class="text-body-secondary">Hace 3 días</small>
    </div>
    <p class="mb-1">Algún contenido de marcador de posición en un párrafo.</p>
    <small class="text-body-secondary">Y algo de letra pequeña atenuada.</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">Encabezado del elemento del grupo de lista</h5>
      <small class="text-body-secondary">Hace 3 días</small>
    </div>
    <p class="mb-1">Algún contenido de marcador de posición en un párrafo.</p>
    <small class="text-body-secondary">Y algo de letra pequeña atenuada.</small>
  </a>
</div>

Casillas de verificación y radios

Coloca las casillas de verificación (checkboxes) y los botones de opción (radios) de Bootstrap dentro de los elementos del grupo de lista y personalízalos según sea necesario. Puedes usarlos sin etiquetas <label>, pero recuerda incluir un atributo aria-label y un valor para la accesibilidad.

Primera casilla de verificación
Segunda casilla de verificación
Tercera casilla de verificación

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">Primera casilla de verificación</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Segunda casilla de verificación</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Tercera casilla de verificación</label>
  </li>
</ul>

Primer radio
Segundo radio
Tercer radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">Primer radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Segundo radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Tercer radio</label>
  </li>
</ul>

Puedes usar .stretched-link en las etiquetas <label> para hacer que todo el elemento del grupo de lista sea seleccionable.

Primera casilla de verificación
Segunda casilla de verificación
Tercera casilla de verificación

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">Primera casilla de verificación</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Segunda casilla de verificación</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Tercera casilla de verificación</label>
  </li>
</ul>

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los grupos de lista ahora usan variables CSS locales en .list-group para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_list-group.scss

--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Variables de Sass

scss/_variables.scss

$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Mixins de Sass

Obsoleto en v5.3.0

scss/mixins/_list-group.scss

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Bucles Sass

Bucle que genera las clases modificadoras con una anulación de las variables CSS.

scss/_list-group.scss

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

Comportamiento de JavaScript

Utiliza el plugin de JavaScript de pestañas (tab)—inclúyelo individualmente o a través del archivo compilado bootstrap.js—para extender nuestro grupo de lista para crear paneles interactivos (tabbable panes) de contenido local.

Inicio Perfil Mensajes Configuración

Contenido de marcador de posición en un párrafo relacionado con "Inicio". Y algo más de contenido, utilizado aquí solo para rellenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, en realidad. Texto, imágenes, formularios.

Contenido de marcador de posición en un párrafo relacionado con "Perfil". Y algo más de contenido, utilizado aquí solo para rellenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, en realidad. Texto, imágenes, formularios.

Contenido de marcador de posición en un párrafo relacionado con "Mensajes". Y algo más de contenido, utilizado aquí solo para rellenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, en realidad. Texto, imágenes, formularios.

Contenido de marcador de posición en un párrafo relacionado con "Configuración". Y algo más de contenido, utilizado aquí solo para rellenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, en realidad. Texto, imágenes, formularios.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Inicio</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Perfil</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Mensajes</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Configuración</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Uso de atributos de datos

Puedes activar la navegación de un grupo de lista sin escribir nada de JavaScript simplemente especificando data-bs-toggle="list" en un elemento. Utiliza estos atributos de datos en .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Inicio</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Perfil</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Mensajes</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Configuración</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

A través de JavaScript

Habilita el elemento de lista interactivo a través de JavaScript (cada elemento de lista debe activarse individualmente):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Puedes activar elementos de lista individuales de varias maneras:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Seleccionar pestaña por nombre

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Seleccionar primera pestaña

Efecto de desvanecimiento (fade)

Para hacer que el panel de pestañas se desvanezca al aparecer, agrega .fade a cada .tab-pane. El primer panel de pestañas también debe tener .show para hacer visible el contenido inicial.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

Activa tu contenido como un elemento de pestaña.

Puedes crear una instancia de pestaña con el constructor, por ejemplo:

const bsTab = new bootstrap.Tab('#myTab')

Método	Descripción
`dispose`	Destruye la pestaña de un elemento.
`getInstance`	Método estático que te permite obtener la instancia de pestaña asociada con un elemento DOM, puedes usarlo de esta manera: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de pestaña asociada a un elemento DOM o crea una nueva en caso de que no haya sido inicializada. Puedes usarlo de esta manera: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecciona la pestaña dada y muestra su panel asociado. Cualquier otra pestaña que haya sido seleccionada previamente se deselecciona y su panel asociado se oculta. Devuelve el control al llamador antes de que el panel de la pestaña se haya mostrado realmente (es decir, antes de que ocurra el evento `shown.bs.tab`).

Eventos

Al mostrar una nueva pestaña, los eventos se disparan en el siguiente orden:

hide.bs.tab (en la pestaña activa actual)
show.bs.tab (en la pestaña que se va a mostrar)
hidden.bs.tab (en la pestaña activa anterior, la misma que para el evento hide.bs.tab)
shown.bs.tab (en la pestaña recién activa que se acaba de mostrar, la misma que para el evento show.bs.tab)

Si ninguna pestaña estaba activa previamente, los eventos hide.bs.tab y hidden.bs.tab no se dispararán.

Tipo de evento	Descripción
`hide.bs.tab`	Este evento se dispara cuando se va a mostrar una nueva pestaña (y, por lo tanto, la pestaña activa anterior se va a ocultar). Utiliza `event.target` y `event.relatedTarget` para apuntar a la pestaña activa actual y a la nueva pestaña que pronto estará activa, respectivamente.
`hidden.bs.tab`	Este evento se dispara después de que se muestra una nueva pestaña (y, por lo tanto, la pestaña activa anterior se oculta). Utiliza `event.target` and `event.relatedTarget` para apuntar a la pestaña activa anterior y a la nueva pestaña activa, respectivamente.
`show.bs.tab`	Este evento se dispara al mostrar la pestaña, pero antes de que se haya mostrado la nueva pestaña. Utiliza `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a la pestaña activa anterior (si está disponible), respectivamente.
`shown.bs.tab`	Este evento se dispara al mostrar la pestaña después de que se haya mostrado la pestaña. Utiliza `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a la pestaña activa anterior (si está disponible), respectivamente.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // pestaña recién activada
    event.relatedTarget // pestaña activa anterior
  })
})