in English

فهرست گروپ

لسٽ گروپ هڪ لچڪدار ۽ طاقتور جزو آهن مواد جي هڪ سيريز کي ڏيکارڻ لاءِ. تبديل ڪريو ۽ وڌايو انھن کي سپورٽ ڪرڻ لاءِ صرف ڪنھن مواد جي اندر.

هن صفحي تي

بنيادي مثال

سڀ کان وڌيڪ بنيادي فهرست گروپ ھڪڙي غير ترتيب ڏنل فهرست آھي جنھن ۾ لسٽ شيون ۽ مناسب ڪلاس شامل آھن. ان تي تعمير ڪريو اختيارن سان جيڪي پيروي ڪريو، يا ضرورت مطابق پنھنجي سي ايس ايس سان.

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون
چوٿون مضمون
۽ هڪ پنجون

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

فعال شيون

موجوده فعال چونڊ کي ظاهر ڪرڻ .activeلاءِ شامل ڪريو ..list-group-item

هڪ فعال شئي
A second item
A third item
A fourth item
And a fifth one

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

معذور شيون

.disabledان کي غير فعال ڪرڻ .list-group-itemلاءِ شامل ڪريو . نوٽ ڪريو ته ڪجھ عناصر سان گڏ .disabledبه ڪسٽم جاوا اسڪرپٽ جي ضرورت پوندي انھن جي ڪلڪ جي واقعن کي مڪمل طور تي غير فعال ڪرڻ لاء (مثال طور، لنڪس).

هڪ معذور شيءِ
A second item
A third item
A fourth item
And a fifth one

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

لنڪ ۽ بٽڻ

<a>s يا s استعمال ڪريو عمل جي قابل<button> لسٽ گروپ شيون ٺاھڻ لاء ھوور، معذور، ۽ فعال رياستن سان شامل ڪندي . اسان انهن pseudo-ڪلاسن کي الڳ ڪريون ٿا انهي ڳالهه کي يقيني بڻائڻ لاءِ ته فهرستن جا گروپ جيڪي غير متضاد عنصرن مان ٺهيل آهن (جهڙوڪ s يا s) هڪ ڪلڪ يا ٽيپ ڪرڻ جي صلاحيت مهيا نه ڪن..list-group-item-action<li><div>

پڪ ڪريو ته هتي معياري .btnڪلاس استعمال نه ڪريو .

موجوده لنڪ شئي ٻي لنڪ شئي ٽيون لنڪ آئٽم چوٿين لنڪ آئٽم هڪ معذور لنڪ شئي

<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" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

s سان <button>، توھان پڻ استعمال ڪري سگھوٿا ڪلاس disabledجي بدران خاصيت . .disabledافسوس، <a>s معذور وصف جي حمايت نٿو ڪري.

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

فلش

شامل ڪريو .list-group-flushڪجهه سرحدون ۽ گول ڪنڊن کي هٽائڻ لاءِ لسٽ گروپ آئٽمز کي ايج-ٽو-ايج پيرنٽ ڪنٽينر ۾ (مثال طور، ڪارڊ).

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون
چوٿون مضمون
۽ هڪ پنجون

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

نمبر ٿيل

شامل ڪريو .list-group-numberedموڊيفائر ڪلاس (۽ اختياري طور تي ھڪڙو <ol>عنصر استعمال ڪريو) کي چونڊڻ لاءِ نمبر لسٽ گروپ آئٽمز. نمبر CSS ذريعي ٺاهيا ويا آهن (جيئن ته <ol>ڊفالٽ برائوزر اسٽائل جي مخالفت) لسٽ گروپ آئٽمز جي اندر بهتر جڳهه ڏيڻ ۽ بهتر ڪسٽمائيزيشن جي اجازت ڏيڻ لاءِ.

نمبر ٺاهيا ويندا آهن counter-resetتي <ol>، ۽ پوءِ اسٽائل ڪيا ويندا آهن ۽ رکيل آهن هڪ ::beforepseudo-عنصر <li>سان گڏ counter-increment۽ content.

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

اهي ڪم ڪار سان گڏ ڪسٽم مواد سان گڏ.

ذيلي عنوان
Cras justo odio
14
ذيلي عنوان
Cras justo odio
14
ذيلي عنوان
Cras justo odio
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

افقي

شامل ڪريو .list-group-horizontalلسٽ گروپ آئٽمز جي ترتيب کي تبديل ڪرڻ لاءِ عمودي کان افقي تائين سڀني بريڪ پوائنٽس ۾. متبادل طور تي، ھڪڙو جوابي قسم چونڊيو ھڪڙي .list-group-horizontal-{sm|md|lg|xl|xxl}فهرست گروپ کي افقي طور تي شروع ڪرڻ لاءِ بريڪ پوائنٽ جي min-width. في الحال افقي لسٽ گروپن کي فلش لسٽ گروپن سان گڏ نه ٿو ڪري سگھجي.

ProTip: برابر-چوٿون لسٽ گروپ شيون چاھيو جڏھن افقي؟ هر لسٽ ۾ شامل ڪريو .flex-fillگروپ شيون.

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

هڪ شيءِ
ٻي شيءِ
ٽيون مضمون

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

لاڳاپيل طبقن

هڪ رياستي پس منظر ۽ رنگ سان شيون لسٽ ڪرڻ لاءِ لاڳاپيل ڪلاس استعمال ڪريو.

هڪ سادي ڊفالٽ لسٽ گروپ شيون
هڪ سادي پرائمري لسٽ گروپ شيون
هڪ سادي ثانوي لسٽ گروپ شيون
هڪ سادي ڪاميابي لسٽ گروپ شيون
هڪ سادي خطري جي فهرست گروپ شيون
هڪ سادي ڊيڄاريندڙ لسٽ گروپ شيون
هڪ سادي معلومات لسٽ گروپ شيون
هڪ سادي لائيٽ لسٽ گروپ شيون
هڪ سادي اونداهي فهرست گروپ شيون

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

لاڳاپيل ڪلاس پڻ ڪم ڪن ٿا .list-group-item-action. نوٽ ڪريو ته هور اسٽائل جو اضافو هتي اڳئين مثال ۾ موجود ناهي. پڻ .activeرياست جي حمايت ڪئي وئي آهي؛ ان کي لاڳو ڪريو هڪ فعال چونڊ کي ظاهر ڪرڻ لاءِ هڪ لاڳاپيل فهرست گروپ آئٽم تي.

هڪ سادي ڊفالٽ لسٽ گروپ شيون هڪ سادي پرائمري لسٽ گروپ شيون هڪ سادي ثانوي لسٽ گروپ شيون هڪ سادي ڪاميابي لسٽ گروپ شيون هڪ سادي خطري جي فهرست گروپ شيون هڪ سادي ڊيڄاريندڙ لسٽ گروپ شيون هڪ سادي معلومات لسٽ گروپ شيون هڪ سادي لائيٽ لسٽ گروپ شيون هڪ سادي اونداهي فهرست گروپ شيون

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

مددگار ٽيڪنالاجي جي معني کي پهچائڻ

معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .visually-hiddenڪلاس سان لڪايو ويو آهي.

بيج سان

ڪي يوٽيلٽيز جي مدد سان اڻ پڙهيل ڳڻپ، سرگرمي ۽ وڌيڪ ڏيکارڻ لاءِ ڪنهن به لسٽ گروپ آئٽم ۾ بيج شامل ڪريو .

هڪ فهرست شيون14
هڪ ٻي فهرست جي شيء2
هڪ ٽيون فهرست شيون1

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

حسب ضرورت مواد

شامل ڪريو تقريبن ڪنهن به HTML جي اندر، جيتوڻيڪ ڳنڍيل لسٽ گروپن لاءِ جيئن هيٺ ڏنل هڪ، flexbox يوٽيلٽيز جي مدد سان .

لسٽ گروپ آئٽم جي عنوان

3 ڏينهن اڳ

هڪ پيراگراف ۾ ڪجهه جڳهه رکندڙ مواد.

۽ ڪجھ ننڍو پرنٽ.

لسٽ گروپ آئٽم جي عنوان

3 ڏينهن اڳ

هڪ پيراگراف ۾ ڪجهه جڳهه رکندڙ مواد.

۽ ڪجهه خاموش ننڍو پرنٽ.

لسٽ گروپ آئٽم جي عنوان

3 ڏينهن اڳ

هڪ پيراگراف ۾ ڪجهه جڳهه رکندڙ مواد.

۽ ڪجهه خاموش ننڍو پرنٽ.

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

چيڪ بڪس ۽ ريڊيو

بوٽ اسٽريپ جا چيڪ بڪس ۽ ريڊيوز کي لسٽ گروپ آئٽمز ۾ رکو ۽ ضرورت مطابق ترتيب ڏيو. توھان انھن کي استعمال ڪري سگھو ٿا بغير <label>s، پر مھرباني ڪري ياد رکو ته ھڪڙي aria-labelخاصيت ۽ رسائي جي قيمت شامل ڪريو.

پهريون چيڪ باڪس
ٻيو چيڪ باڪس
ٽيون چيڪ باڪس
چوٿون چيڪ باڪس
پنجون چيڪ باڪس

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

۽ جيڪڏھن توھان چاھيو ٿا <label>s جيئن .list-group-itemوڏي هٽ وارن علائقن لاءِ، توھان ڪري سگھوٿا اھو پڻ.

پهريون چيڪ باڪس ٻيو چيڪ باڪس ٽيون چيڪ باڪس چوٿون چيڪ باڪس پنجون چيڪ باڪس

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

ساس

متغير

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

ملائيندڙ

s . $theme-colors_ _ _.list-group-item

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

لوپ

لوپ جيڪو list-group-item-variant()ميڪسين سان تبديل ڪندڙ طبقن کي ٺاهي ٿو.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

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

JavaScript رويي

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our list group to create tabbable panes of local content.

Home Profile Messages Settings

Some placeholder content in a paragraph relating to "Home". 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 "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>

Using data attributes

You can activate a list group navigation without writing any JavaScript by simply specifying data-bs-toggle="list" or on an element. Use these data attributes on .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>

Via JavaScript

Enable tabbable list item via JavaScript (each list item needs to be activated individually):

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

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

You can activate individual list item in several ways:

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

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

Fade effect

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content 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>

Methods

constructor

Activates a list item element and content container. Tab should have either a data-bs-target or an href targeting a container node in the DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

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

  firstTab.show()
</script>

show

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

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

  tab.show()

dispose

Destroys an element’s tab.

getInstance

Static method which allows you to get the tab instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised

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

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

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