Ver en GitHub

List group

Los grupos de lista son un componente flexible y potente para mostrar una serie de contenido. Modifícalos y extiéndelos para soportar prácticamente cualquier contenido dentro.

On this page

Ejemplo básico

El grupo de lista más básico es una lista desordenada con elementos de lista y las clases apropiadas. 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

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Elementos activos

Añade .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

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Elementos deshabilitados

Añade .disabled a un .list-group-item para hacer que parezca deshabilitado. Ten en cuenta que algunos elementos con .disabled también requerirán JavaScript personalizado para deshabilitar completamente sus eventos de clic (por ejemplo, los enlaces).

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

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Enlaces y botones

Usa <a>s o <button>s para crear elementos de grupo de lista accionables con estados hover, deshabilitado y activo añadiendo .list-group-item-action. Separamos estas pseudo-clases para asegurar que los grupos de lista compuestos por elementos no interactivos (como <li>s o <div>s) no ofrezcan una funcionalidad de clic o toque.

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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Con <button>s, también puedes usar el atributo disabled en lugar de la clase .disabled. Lamentablemente, los <a>s no soportan el atributo disabled.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

Añade .list-group-flush para eliminar algunos bordes y esquinas redondeadas y renderizar los elementos del grupo de lista de borde a borde dentro de un contenedor padre (por ejemplo, tarjetas).

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

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Numerados

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

Los números se generan mediante counter-reset en el <ol>, y luego se estilizan y colocan con un pseudo-elemento ::before en el <li> con counter-increment y content.

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

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Estas también funcionan muy bien con contenido personalizado.

Subtítulo
Content for list item
14
Subtítulo
Content for list item
14
Subtítulo
Content for list item
14

<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">Subheading</div>
      Content for list item
    </div>
    <span class="badge 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">Subheading</div>
      Content for list item
    </div>
    <span class="badge 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">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontal

Añade .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 responsive .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.

Consejo Pro: ¿Quieres elementos de grupo de lista de igual ancho cuando están en horizontal? Añade .flex-fill a cada elemento del 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

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Clases contextuales

Usa clases contextuales para estilizar los elementos de lista con un fondo y color con 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

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Las clases contextuales también funcionan con .list-group-item-action. Ten en cuenta la adición de los estilos hover aquí no presentes en el ejemplo anterior. También se soporta 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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Transmisión de significado a tecnologías asistivas

Usar color para añadir significado solo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Con insignias

Añade insignias a cualquier elemento de grupo de lista para mostrar contadores de 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

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Contenido personalizado

Añade casi cualquier HTML dentro, incluso para grupos de lista enlazados como el de abajo, con la ayuda de las utilidades de flexbox.

Encabezado del elemento de 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 de 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 silenciada.

Encabezado del elemento de 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 silenciada.

<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">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Casillas de verificación y radios

Coloca las casillas de verificación y radios de Bootstrap dentro de los elementos del grupo de lista y personalízalos según sea necesario. Puedes usarlos sin <label>s, pero por favor recuerda incluir un atributo aria-label y su valor para accesibilidad.

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

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Y si quieres que los <label>s sean el .list-group-item para grandes áreas de clic, también puedes hacerlo.

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

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Variables

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$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:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

Usado en combinación con $theme-colors para generar las clases variantes contextuales para los .list-group-items.

@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;
      }
    }
  }
}

Loop

Bucle que genera las clases modificadoras con el mixin list-group-item-variant().

// 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, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Comportamiento de JavaScript

Usa el plugin de JavaScript de pestañas—inclúyelo individualmente o a través del archivo compilado bootstrap.js—para extender nuestro grupo de lista y crear paneles navegables por pestañas de contenido local.

Inicio Perfil Mensajes Configuración

Algún contenido de marcador de posición en un párrafo relacionado con "Inicio". Y algo más de contenido, usado aquí solo para rellenar y completar 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, realmente. Texto, imágenes, formularios.

Algún contenido de marcador de posición en un párrafo relacionado con "Perfil". Y algo más de contenido, usado aquí solo para rellenar y completar 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, realmente. Texto, imágenes, formularios.

Algún contenido de marcador de posición en un párrafo relacionado con "Mensajes". Y algo más de contenido, usado aquí solo para rellenar y completar 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, realmente. Texto, imágenes, formularios.

Algún contenido de marcador de posición en un párrafo relacionado con "Configuración". Y algo más de contenido, usado aquí solo para rellenar y completar 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, realmente. 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">Home</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">Profile</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">Messages</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">Settings</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 data

Puedes activar una navegación de grupo de lista sin escribir ningún JavaScript simplemente especificando data-bs-toggle="list" en un elemento. Usa estos atributos data 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">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</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 un elemento de lista navegable por pestañas vía JavaScript (cada elemento de lista debe activarse individualmente):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Puedes activar elementos de lista individuales de varias maneras:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efecto de desvanecimiento

Para hacer que el panel de pestañas se desvanezca al aparecer, añade .fade a cada .tab-pane. El primer panel de pestaña 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

constructor

Activa un elemento de lista y un contenedor de contenido. La pestaña debe tener un data-bs-target o un href que apunte a un nodo contenedor en el DOM.

<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">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<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>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Selecciona el elemento de lista dado y muestra su panel asociado. Cualquier otro elemento de lista que hubiera sido seleccionado previamente deja de estarlo y su panel asociado se oculta. Retorna al llamador antes de que el panel de pestaña se haya mostrado realmente (por ejemplo, antes de que ocurra el evento shown.bs.tab).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispose

Destruye la pestaña de un elemento.

getInstance

Método estático que te permite obtener la instancia de pestaña asociada a un elemento del DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Método estático que te permite obtener la instancia de tab asociada a un elemento del DOM, o crear una nueva en caso de que no haya sido inicializada

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Eventos

Al mostrar una pestaña nueva, 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 activada que se acaba de mostrar, la misma que para el evento show.bs.tab)

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

Tipo de evento	Descripción
`show.bs.tab`	Este evento se dispara al mostrar la pestaña, pero antes de que la nueva pestaña se haya mostrado. Usa `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 una pestaña se haya mostrado. Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a la pestaña activa anterior (si está disponible) respectivamente.
`hide.bs.tab`	Este evento se dispara cuando se va a mostrar una pestaña nueva (y por tanto la pestaña activa anterior se va a ocultar). Usa `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 pestaña nueva (y por tanto la pestaña activa anterior queda oculta). Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa anterior y a la nueva pestaña activa, respectivamente.

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}