El componente Grupo de lista de Bootstrap

Los grupos de listas son un componente flexible y poderoso para mostrar una serie de contenidos. Modifícalos y amplíalos para admitir casi cualquier contenido que contenga.

Ejemplo básico delcomponente Grupo de lista

El grupo de listas más básico es una lista desordenada con elementos de lista y las clases adecuadas. Aprovecha las opciones que aparecen a continuación o con su propio CSS según sea necesario.

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</li>
</ul>

Elementos activos del componente Grupo de lista

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

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</li>
</ul>

Elementos deshabilitados del componente Grupo de lista

Agrega .disabled a un .list-group-item para 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, enlaces).

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</li>
</ul>

Enlaces y botones del componente Grupo de lista

Usa <a>s o <button>s para crear un grupo de lista de elementos accionables con estados hover, disabled y active agregando .list-group-item-action. Separamos estas pseudoclases para garantizar que los grupos de listas formados por elementos no interactivos (como <li>s o <div>s) no proporcionen posibilidades un clic o toque.

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

HTML

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        El elemento del 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 class="list-group-item list-group-item-action disabled" aria-disabled="true">Un elemento de enlace
        deshabilitado</a>
</div>

Con <button>s, también puedes hacer uso del atributo disabled en lugar de la clase .disabled. Lamentablemente, los <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>

Las clases Flush

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

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</li>
</ul>

Numerado en el componente Grupo de lista

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 mediante CSS (a diferencia del estilo predeterminado del navegador <ol>) para una mejor ubicación dentro de los elementos del grupo de listas y para permitir una mejor personalización.

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

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.

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 del elemento de la lista
        </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">Subtítulo</div>
            Contenido del elemento de la lista
        </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">Subtítulo</div>
            Contenido del elemento de la lista
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
</ol>

Componente Grupo de lista horizontal

Agrega .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, elige una variante responsive .list-group-horizontal-{sm|md|lg|xl|xxl} para hacer un grupo de listas horizontal comenzando en el min-width. Actualmente los grupos de listas horizontales no se pueden combinar con grupos de listas al ras.

Consejo profesional: ¿Quieres elementos de grupo de lista de igual ancho en posición horizontal? Agrega .flex-fill a cada elemento del grupo de lista.

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 de estilo del componente Grupo de lista

Nota

¡Atención! A partir de la versión 5.3.0, el mixin Sass list-group-item-variant() está obsoleto. Las variantes de elementos del grupo de listas ahora tienen sus variables CSS sobrescritas en un un bucle Sass.

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

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 principal simple</li>
    <li class="list-group-item list-group-item-secondary">Un simple elemento de grupo de lista secundaria</li>
    <li class="list-group-item list-group-item-success">Un elemento de grupo de lista de éxito simple</li>
    <li class="list-group-item list-group-item-danger">Un elemento de grupo de lista de peligros simple</li>
    <li class="list-group-item list-group-item-warning">Un elemento de grupo de lista de advertencia simple</li>
    <li class="list-group-item list-group-item-info">Un elemento de grupo de lista de información simple</li>
    <li class="list-group-item list-group-item-light">Un elemento de grupo de lista claro simple</li>
    <li class="list-group-item list-group-item-dark">Un simple elemento de grupo de lista oscura</li>
</ul>

Para enlaces y botones

Las clases contextuales también funcionan con .list-group-item-action para elementos <a> y <button>. Ten en cuenta la adición de estilos de desplazamiento 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.

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 principal simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Un simple elemento de grupo de lista secundaria</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Un elemento de grupo de lista de éxito simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Un elemento de grupo de lista de peligros simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Un elemento de grupo de lista de advertencia simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Un elemento de grupo de lista de información simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Un elemento de grupo de lista claro simple</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Un simple elemento de grupo de lista oscura</a>
</div>

Nota

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

Grupo de listas con insignias

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

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

Contenido personalizado

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

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 de elemento de 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 de elemento de 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 alguna letra pequeña en silencio.</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 de elemento de 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 alguna letra pequeña en silencio.</small>
    </a>
</div>

Checkboxes y radios

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

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</label>
    </li>
</ul>

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 <label>s para hacer que se pueda hacer clic en todo el elemento del grupo de la lista.

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</label>
    </li>
</ul>

Personalización del CSS del componente

Variables Sass del componente

Agregado en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los grupos de listas 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

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 Sass generales relacionadas

scss/_variables.scss

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 Sass del componente

Obsoleto en v5.3.0

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

scss/mixins/_list-group.scss

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

Bucle que genera las clases modificadoras con una sobrescritura de variables CSS.

scss/_list-group.scss

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 JavaScript del componente

Utiliza el complemento JavaScript de pestañas (inclúyelo individualmente o mediante el archivo bootstrap.js compilado) para ampliar nuestro grupo de listas y crear paneles con pestañas de contenido local.

HTML

<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="tab"
                href="#list-home" role="tab" aria-controls="list-home" aria-selected="true">Inicio</a>
            <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab"
                href="#list-profile" role="tab" aria-controls="list-profile" aria-selected="false"
                tabindex="-1">Perfil</a>
            <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab"
                href="#list-messages" role="tab" aria-controls="list-messages" aria-selected="false"
                tabindex="-1">Mensajes</a>
            <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab"
                href="#list-settings" role="tab" aria-controls="list-settings" aria-selected="false"
                tabindex="-1">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">
                <p>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 completar y llenar este panel de pestañas. En producción,
                    obviamente tendrías más contenido real aquí. Y no sólo mensajes de texto. Podría ser
                    cualquier cosa, de verdad. Texto, imágenes, formularios.</p>
            </div>
            <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                <p>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 completar y llenar este panel de pestañas. En producción,
                    obviamente tendrías más contenido real aquí. Y no sólo mensajes de texto. Podría ser
                    cualquier cosa, de verdad. Texto, imágenes, formularios.</p>
            </div>
            <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                <p>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 completar y llenar este panel de pestañas. En producción,
                    obviamente tendrías más contenido real aquí. Y no sólo mensajes de texto. Podría ser
                    cualquier cosa, de verdad. Texto, imágenes, formularios.</p>
            </div>
            <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
                <p>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 completar y llenar este panel de pestañas. En
                    producción, obviamente tendrías más contenido real aquí. Y no sólo mensajes de texto. Podría
                    ser cualquier cosa, de verdad. Texto, imágenes, formularios.</p>
            </div>
        </div>
    </div>
</div>

Usar atributos de datos

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

HTML

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

Vía JavaScript

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

JavaScript

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 un elemento individual de la lista de varias maneras:

JavaScript

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

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

Efecto desvanecimiento

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

HTML

<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

Peligro

Todos los métodos API son asincrónicos e inician una transición. Regresan al punto de la llamada tan pronto como se inicia la transición, pero antes de que finalice. Además, se ignorará una llamada a un método en un componente en transición. Obtén más información en nuestra documentación de JavaScript.

Activa tu contenido como elemento de pestaña.

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

JavaScript

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 así: 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 así: bootstrap.Tab.getOrCreateInstance(element).
show	Selecciona la pestaña dada y muestra su panel asociado. Cualquier otra pestaña que se haya seleccionado previamente deja de estar seleccionada y su panel asociado se oculta. Vuelve a la persona que llama antes de que se haya mostrado realmente el panel de pestañas (es decir, antes de que se produzca el evento shown.bs.tab).

Eventos

Cuando se muestra una nueva pestaña, los eventos se activan en el siguiente orden:

1. hide.bs.tab (en la pestaña activa actual)
2. show.bs.tab (en la pestaña para mostrar)
3. hidden.bs.tab (en la pestaña activa anterior, la misma que para el evento hide.bs.tab)
4. shown.bs.tab (en la pestaña recién mostrada recién activa, la misma que para el evento show.bs.tab)

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

Tipo de evento	Descripción
hide.bs.tab	Este evento se activa 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 activa después de que se muestra una nueva pestaña (y, por lo tanto, la pestaña activa anterior está oculta). Utiliza event.target y event.relatedTarget para apuntar a la pestaña activa anterior y a la nueva pestaña activa, respectivamente.
show.bs.tab	Este evento se activa al mostrar la pestaña, pero antes de que se muestre 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 activa al mostrar una pestaña después de que se haya mostrado una 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.

JavaScript

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