Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Lista di grup

List grup na wan fleksibul ɛn pawaful kɔmpɔnɛnt fɔ sho wan siriɔs kɔntinyu. Modify ɛn ɛkstɛnd dɛn fɔ sɔpɔt jɔs lɛk ɛni kɔntinyu insay.

Na dis pej

Besik ɛgzampul

Di list grup we impɔtant pas ɔl na wan list we nɔ ɔda wit di tin dɛn we de na di list ɛn di rayt klas dɛn. Bil pan am wit di opshɔn dɛn we de kam, ɔ wit yu yon CSS as nid de.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
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>

Di tin dɛn we de wok

Ad .activeto a .list-group-itemfɔ sho di aktif sɛlɛkshɔn we de naw.

  • Wan tin we de wok tranga wan
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
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>

Di tin dɛn we dɛn dɔn disable

Ad .disabledto a .list-group-itemfɔ mek i tan lɛk se i nɔ ebul fɔ wok. Notis se sɔm ɛlimɛnt dɛn wit .disabledgo nid bak kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn klik ivin dɛn (ɛgz., link dɛn).

  • Wan tin we nɔ ebul fɔ wok
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
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>

Yuz <a>s ɔ <button>s fɔ mek akshɔnable list grup aytem dɛn wit hova, disabled, ɛn aktiv stet dɛn bay we yu ad .list-group-item-action. Wi de separet dɛn pseudo-klas ya fɔ mek shɔ se list grup dɛn we dɛn mek wit nɔ-intaraktiv ɛlimɛnt dɛn (lɛk <li>s ɔ <div>s) nɔ de gi klik ɔ tap afɔdans.

Mek shɔ se yu nɔ yuz di standad .btnklas dɛn we de ya .

Di link aytem we de naw Wan sɛkɔn link aytem Wan tɔd link aytem Wan nɔmba 4 link aytem Wan link aytem we nɔ de wok
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">A disabled link item</a>
</div>

Wit <button>s, yu kin mek yus bak to di disabledatribyut insted of di .disabledklas. I sɔri fɔ no se <a>s nɔ de sɔpɔt di disabled atribyut.

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 fɔ yuz am

Ad .list-group-flushfɔ pul sɔm bɔda dɛn ɛn rawnd kɔna dɛn fɔ rɛnd list grup aytem dɛn ed-to-ɛj insay wan mama kɔntena (ɛgz., kad dɛn).

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan nɔmba 4 tin
  • Ɛn wan nɔmba fayv wan
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>

Dɛn gɛt nɔmba dɛn

Ad di .list-group-numberedmodifya klas (ɛn opshɔnal yuz wan <ol>ɛlimɛnt) fɔ opt insay nɔmba list grup aytem dɛn. Dɛn de mek nɔmba dɛn bay CSS (as opɔzit to wan <ol>s difɔlt brawza stayl) fɔ mek dɛn put dɛn fayn fayn wan insay di list grup aytem dɛn ɛn fɔ alaw fɔ mek dɛn kɔstɔmayz dɛn fayn fayn wan.

Nɔmba dɛn de jenarayz bay counter-resetpan di <ol>, ɛn afta dat dɛn stayl ɛn put dɛn wit wan ::beforepseudo-ɛlimɛnt na di <li>wit counter-incrementɛn content.

  1. Wan tin we de na di list
  2. Wan tin we de na di list
  3. Wan tin we de na di list
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>

Dɛn wan ya de wok fayn wit kɔstɔm kɔntinyu bak.

  1. Sɔbhɛdin
    Kɔntinyu fɔ list aytem
    14 we de tɔk bɔt
  2. Sɔbhɛdin
    Kɔntinyu fɔ list aytem
    14 we de tɔk bɔt
  3. Sɔbhɛdin
    Kɔntinyu fɔ list aytem
    14 we de tɔk bɔt
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>

Bifo ɛn biɛn

Ad .list-group-horizontalfɔ chenj di layout fɔ di list grup aytem dɛn frɔm vertikal to ɔrizɔntal akɔdin to ɔl di brekpɔynt dɛn. Ɔda we de fɔ du dat, pik wan rispɔnsiv vayriɔnt .list-group-horizontal-{sm|md|lg|xl|xxl}fɔ mek wan list grup ɔrizɔntal stat na da brekpɔynt de in min-width. Naw, ɔrizɔntal list grup dɛn nɔ kin jɔyn wit flush list grup dɛn.

ProTip: Yu want ikwal-wid list grup aytem dɛn we yu ɔrizɔntal? Ad .flex-fillto ɛni list grup aytem.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
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>

Klas dɛn we de tɔk bɔt di kɔntɛks

Yuz kɔntɛkstual klas fɔ stayl list aytem dɛn wit stetful bakgrɔn ɛn kɔlɔ.

  • Wan simpul difɔlt list grup aytem
  • Wan simpul praymari list grup aytem
  • Wan simpul sɛkɔndari list grup aytem
  • Wan simpul sakses list grup aytem
  • Wan simpul denja list grup aytem
  • Wan simpul wɔnin list grup aytem
  • Wan simpul info list grup aytem
  • Wan simpul layt list grup aytem
  • Wan simpul dak list grup aytem
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>

Kɔntɛkstual klas dɛn kin wok bak wit .list-group-item-action. Notis di addɛshɔn fɔ di hova stayl dɛn ya we nɔ de na di ɛgzampul we bin dɔn pas. Di .activestet de sɔpɔt bak; aplay am fɔ sho wan aktif sɛlɛkshɔn pan wan kɔntɛkstual list grup aytem.

Wan simpul difɔlt list grup aytem Wan simpul praymari list grup aytem Wan simpul sɛkɔndari list grup aytem Wan simpul sakses list grup aytem Wan simpul denja list grup aytem Wan simpul wɔnin list grup aytem Wan simpul info list grup aytem Wan simpul layt list grup aytem Wan simpul dak list grup aytem
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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

Wit badge dɛn

Ad badge dɛn to ɛni list grup aytem fɔ sho di kɔnt dɛn we dɛn nɔ rid, di tin dɛn we dɛn de du, ɛn ɔda tin dɛn wit di ɛp we sɔm yutiliti dɛn de gi .

  • Wan tin we de na di list14 we de tɔk bɔt
  • Wan sɛkɔn tin we de na di list2. Di wan dɛn we de
  • Wan tɔd tin we de na di list1. Di wan dɛn we de
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>

Kɔstɔm kɔntinyu

Ad klos to ɛni HTML insay, ivin fɔ link list grup dɛn lɛk di wan we de dɔŋ ya, wit di ɛp fɔ flexbox utilities .

Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm smɔl smɔl tin dɛn we dɛn rayt.
Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm dɛn bin de muv smɔl smɔl print dɛn.
Lista di grup aytem edlayn
3 dez bifo

Sɔm ples dɛn we de insay wan paregraf.

Ɛn sɔm dɛn bin de muv smɔl smɔl print dɛn.
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-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>

Chɛkbɔks dɛn ɛn redio dɛn

Put Bootstrap in chɛkbɔks ɛn redio dɛn insay di list grup aytem dɛn ɛn kɔstɔmayz am as nid de. Yu kin yuz dɛn we nɔ gɛt <label>s, bɔt duya mɛmba fɔ put wan aria-labelatribyut ɛn valyu fɔ aksesibiliti.

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

Yu kin yuz .stretched-linkpan <label>s fɔ mek di wan ol list grup aytem ebul fɔ klik.

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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS variebul aprɔch, list grup dɛn naw de yuz lokal CSS vɛriɔbul dɛn on .list-groupfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

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

Sass di vayriɔbul dɛn

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

Mixin dɛn

Yuz in kɔmbaynshɔn wit $theme-colorsfɔ jenarayz di kɔntɛkstual vayriɔnt klas dɛn fɔ .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;
      }
    }
  }
}

Tay

Loop we de jenarayz di modifya klas dɛn wit di list-group-item-variant()mixin.

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

JavaSkript bihayvya

Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi list grup fɔ mek tabbul pan dɛn fɔ lokal kɔntinyu.

Sɔm pleshɔlda kɔntinyu na wan paregraf we gɛt fɔ du wit "Om". Ɛn sɔm mɔ kɔntinyu, yuz ya jɔs fɔ pad aut ɛn ful dis tab panɛl. In prodakshɔn, i klia se yu go gɛt mɔ rial kɔntinyu ya. Ɛn nɔto jɔs tɛks. I kin bi ɛnitin, fɔ tru. Tɛks, pikchɔ dɛn, fɔm dɛn.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

Yuz data atribyut dɛn

Yu kin aktiv wan list grup nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-bs-toggle="list"ɔ pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .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>

Yu kin yuz JavaSkript fɔ yuz am

Enable tabbable list item via JavaScript (ɛni list aytem nid fɔ aktiv wan wan):

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

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

Yu kin aktiv wan wan list aytem insay sɔm we dɛn:

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

Fade effekt we yu de du

Fɔ mek tab dɛn panɛl fayn insay, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin dɛn we de insay de sho.

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

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

Aktiv yu kɔntinyu as tab ɛlimɛnt.

Yu kin mek wan tab instans wit di kɔnstrɔkta, fɔ ɛgzampul:

const bsTab = new bootstrap.Tab('#myTab')
We Tɔk bɔt
dispose Destroy wan element in tab.
getInstance Statik we de alaw yu fɔ gɛt di tab instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis: bootstrap.Tab.getInstance(element).
getOrCreateInstance Statik mɛtɔd we de ritɔn wan tab instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am. Yu kin yuz am lɛk dis: bootstrap.Tab.getOrCreateInstance(element).
show Pik di tab we dɛn gi ɛn sho di say we gɛt fɔ du wit am. Ɛni ɔda tab we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (dat na bifo di shown.bs.tabtin apin).

Di tin dɛn we kin apin

We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:

  1. hide.bs.tab(na di tab we de wok naw)
  2. show.bs.tab(na di tab we dɛn go sho)
  3. hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
  4. shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)

If no tab nɔ bin dɔn ɔlrɛdi aktif, den di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.

Di kayn tin we apin Tɔk bɔt
hide.bs.tab Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
hidden.bs.tab Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan.
show.bs.tab Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
shown.bs.tab Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan. 
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
  })
})