Ver en GitHub

Grupo de lista

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.

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Ejemplo básico

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.

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

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

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>

Elementos deshabilitados

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

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

html

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

El elemento del 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 class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</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">
    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

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

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>

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

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>

Estos también funcionan muy bien con contenido personalizado.

Subtítulo
Contenido del elemento de la lista
14
Subtítulo
Contenido del elemento de la lista
14
Subtítulo
Contenido del elemento de la 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">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

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.

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

Un elemento de grupo de lista predeterminado simple
Un elemento de grupo de lista principal simple
Un simple elemento de grupo de lista secundaria
Un elemento de grupo de lista de éxito simple
Un elemento de grupo de lista de peligros simple
Un elemento de grupo de lista de advertencia simple
Un elemento de grupo de lista de información simple
Un elemento de grupo de lista claro simple
Un simple elemento de grupo de lista oscura

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

Un elemento de grupo de lista predeterminado simple Un elemento de grupo de lista principal simple Un simple elemento de grupo de lista secundaria Un elemento de grupo de lista de éxito simple Un elemento de grupo de lista de peligros simple Un elemento de grupo de lista de advertencia simple Un elemento de grupo de lista de información simple Un elemento de grupo de lista claro simple Un simple elemento de grupo de lista oscura

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

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.

Un elemento de lista 14
Un segundo elemento de la lista 2
Un tercer elemento de la 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 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

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

Encabezado de 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 de elemento de grupo de lista

Hace 3 días

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

Y alguna letra pequeña en silencio.

Encabezado de elemento de grupo de lista

Hace 3 días

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

Y alguna letra pequeña en silencio.

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

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

Primera casilla de verificación
Segunda casilla de verificación
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

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

--#{$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);

Sass mixins

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

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

Sass loops

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

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.

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

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.

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.

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.

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

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.

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

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:

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.

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

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:

hide.bs.tab (en la pestaña activa actual)
show.bs.tab (en la pestaña para 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 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.

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