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

html

<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

html

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

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.

Haz que las instancias de .list-group-item-action parezcan deshabilitadas añadiendo .disabled, y aria-disabled="true" para informar a las tecnologías de asistencia que el elemento está deshabilitado. Puede que necesites JavaScript adicional para deshabilitar completamente 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">
    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 href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">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.

html

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

html

<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

html

<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

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">Subheading</div>
      Content for list item
    </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">Subheading</div>
      Content for list item
    </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">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-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

html

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

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 sobrescritas en un bucle Sass.

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

html

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

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

html

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

Consejo de accesibilidad: Usar color para añadir 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 por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) 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

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-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 text-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 text-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.

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

Checkboxes 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
Segunda casilla
Tercera casilla

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">First checkbox</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">Second checkbox</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">Third checkbox</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">First 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">Second 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">Third radio</label>
  </li>
</ul>

Puedes usar .stretched-link en los <label>s para hacer que todo el elemento del grupo de lista sea clicable.

Primera casilla
Segunda casilla
Tercera casilla

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">First checkbox</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">Second checkbox</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">Third checkbox</label>
  </li>
</ul>

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los grupos de lista ahora usan variables CSS locales en .list-group para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen mediante Sass, por lo que la personalización con Sass también sigue siendo 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 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 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 sobrescritura de 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

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>

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

Vía JavaScript

Habilita un elemento de lista navegable por pestañas vía 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() // Select tab by name

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

Efecto de fundido

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

Todos los métodos de la API son asíncronos e inician una transición. Vuelven al llamador tan pronto como la transición comienza, pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada. Obtén más información en nuestra documentación de JavaScript.

Activa tu contenido como un elemento tab.

Puedes crear una instancia de tab 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 tab asociada a un elemento DOM, puedes usarlo así: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de tab 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 hubiera sido seleccionada previamente queda deseleccionada y su panel asociado se oculta. Vuelve al llamador antes de que el panel de pestaña se haya mostrado realmente (es decir, antes de que ocurra el evento `shown.bs.tab`).

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 ya activa, entonces 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 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.
`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.

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