in English

List group a awm

List groups hi content series tarlanna atana hmanraw tangkai leh chak tak a ni. A chhunga thu awm zawng zawng deuhthaw support turin siam danglam la, tihzauh rawh.

He page ah hian

Entirna bulpui ber

List group bulpui ber chu list item leh class dik tak awmna list order loh a ni. A hnuaia option awmte hmangin a chungah build la, a nih loh leh a tul angin nangmah ngeiin CSS hmangin siam rawh.

An item pakhat
Item pahnihna a ni
Item pathumna a ni
Item palina a ni
Tin, pangana pakhat a ni bawk

html tih a ni

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

Thil active tak tak te

Tuna active selection awm mek tarlanna turin .activea- ah dah rawh ..list-group-item

Item active tak a ni
Item pahnihna a ni
Item pathumna a ni
Item palina a ni
Tin, pangana pakhat a ni bawk

html tih a ni

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

Disabled anga lang turin .disableda ah dah rawh . Hriat tur chu element thenkhat with te pawhin an click events (eg, links) te chu fully disable turin custom JavaScript an mamawh dawn a ni..list-group-item.disabled

Disabled item pakhat a ni
Item pahnihna a ni
Item pathumna a ni
Item palina a ni
Tin, pangana pakhat a ni bawk

html tih a ni

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

Link leh button te pawh a awm bawk

<a>s emaw s emaw <button>hmangin actionable list group items te chu hover, disabled, leh active states te nen siam la, .list-group-item-action. <li>Heng pseudo-classes te hi kan then hrang a, chu chu non-interactive elements ( s emaw s emaw ang chi) atanga siam list group te <div>hian click emaw tap emaw affordance an pek loh nan.

Hetah hian standard .btnclass te hi hmang lo turin fimkhur rawh .

Tuna link item awm mek chu Link item pahnihna a ni Link item pathumna a ni Link item palina a ni Link item tihtawp a ni

html tih a ni

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

s hmang hian class aiah attribute <button>pawh i hmang thei bawk . Lungchhiatthlak takin s hian disabled attribute hi an support lo.disabled.disabled<a>

html tih a ni

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

.list-group-flushParent container (eg, cards)-a list group items edge-to-edge-a render turin border thenkhat paih chhuah tur leh rounded corners te dah belh rawh .

An item pakhat
Item pahnihna a ni
Item pathumna a ni
Item palina a ni
Tin, pangana pakhat a ni bawk

html tih a ni

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

Number pek a ni

Numbered list group items-a opt tur chuan modifier class chu add la .list-group-numbered(leh duhthusamin <ol>element hmang rawh). Number te hi CSS hmanga siam a ni ( <ol>s default browser styling nen a danglamna) list group items chhunga dah that zawk nan leh customization tha zawk neih theih nan.

Number te chu counter-reseton the hmangin siam a ni <ol>a, chutah chuan style a ni a, with leh ah pseudo-element hmangin dah a ::beforeni .<li>counter-incrementcontent

A list item pakhat
A list item pakhat
A list item pakhat

html tih a ni

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

Hengte hian custom content nen pawh an thawk tha hle.

Subheading tih a ni
List item atan thupui
14 a ni
Subheading tih a ni
List item atan thupui
14 a ni
Subheading tih a ni
List item atan thupui
14 a ni

html tih a ni

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

Khamphei

.list-group-horizontalBreakpoint zawng zawngah list group items layout vertical atanga horizontal a thlak turin Add rawh . .list-group-horizontal-{sm|md|lg|xl|xxl}A dang pawhin, chu breakpoint’s atanga tan list group horizontal siam turin responsive variant thlang rawh min-width. Tunah hian horizontal list group te chu flush list group nen an inzawm thei lo.

ProTip: Horizontal a nih laiin equal-width list group item duh em? .flex-fillList group item tin ah te dah belh thin ang che.

An item pakhat
Item pahnihna a ni
Item pathumna a ni

An item pakhat
Item pahnihna a ni
Item pathumna a ni

An item pakhat
Item pahnihna a ni
Item pathumna a ni

An item pakhat
Item pahnihna a ni
Item pathumna a ni

An item pakhat
Item pahnihna a ni
Item pathumna a ni

An item pakhat
Item pahnihna a ni
Item pathumna a ni

html tih a ni

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

Contextual class hrang hrang te

Contextual class hmangin thil awmte chu stateful background leh color neia style list theih a ni.

Default list group item awlsam tak a ni
Primary list group item awlsam tak a ni
Secondary list group item awlsam tak a ni
Hlawhtlinna list group item awlsam tak
Hlauhawm list group item awlsam tak
Warning list group item awlsam tak a ni
Info list group item awlsam tak a ni
Light list group item awlsam tak a ni
Dark list group item awlsam tak a ni

html tih a ni

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

Contextual class te pawh hian .list-group-item-action. Entirna hmasa lama awm lo hetah hian hover styles te dah belh hi chhinchhiah ang che. .activeState pawhin a thlawp bawk a ; contextual list group item-a active selection tarlanna atan hmang rawh.

Default list group item awlsam tak a ni Primary list group item awlsam tak a ni Secondary list group item awlsam tak a ni Hlawhtlinna list group item awlsam tak Hlauhawm list group item awlsam tak Warning list group item awlsam tak a ni Info list group item awlsam tak a ni Light list group item awlsam tak a ni Dark list group item awlsam tak a ni

html tih a ni

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

Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Badge te nen

Utility thenkhat puihnain unread counts, activity, leh thil dang tam tak entir turin list group item eng pawhah badge dah la .

A list item pakhat14 a ni
List item pahnihna a ni2. 2.
List item pathumna a ni1. a ni

html tih a ni

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

Custom content a awm bawk

A chhunga HTML eng pawh deuhthaw dah la, a hnuaia linked list group ang chi tan pawh, flexbox utilities hmangin .

Group item thupui chu ziak rawh

Ni 3 kalta khan

Paragraph pakhata placeholder awm thenkhat.

Tin, print te te te pawh a awm bawk.

Group item thupui chu ziak rawh

Ni 3 kalta khan

Paragraph pakhata placeholder awm thenkhat.

Tin, ṭhenkhat chuan small print an mute bawk.

Group item thupui chu ziak rawh

Ni 3 kalta khan

Paragraph pakhata placeholder awm thenkhat.

Tin, ṭhenkhat chuan small print an mute bawk.

html tih a ni

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

Checkbox leh radio te pawh a awm bawk

Bootstrap-a checkbox leh radio te chu list group item chhungah dah la, a tul angin customize rawh. <label>S tel lovin i hmang thei a , mahse aria-labelaccessibility atan attribute leh value te dah tel tur a ni tih hre reng ang che.

A hmasa berin checkbox a ni
Checkbox pahnihna
Checkbox pathumna a ni

html tih a ni

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

Radio hmasa ber
Radio pahnihna
Radio pathumna

html tih a ni

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

List group item pumpui chu click theih turin .stretched-linkon s hmangin i hmang thei bawk.<label>

A hmasa berin checkbox a ni
Checkbox pahnihna
Checkbox pathumna a ni

html tih a ni

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

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian list group-te chuan local CSS variables on hmangin .list-groupreal-time customization tihchangtlunna atan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

  --#{$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 a danglam thei

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

Mixins te a awm

s tan contextual variant class$theme-colors siam nan hman a ni..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;
      }
    }
  }
}

Suih

list-group-item-variant()Loop chuan mixin hmangin modifier class te a siam chhuak thin .

// 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 tih dan tur

Tab JavaScript plugin hmang la—a mal emaw, compiled file kaltlangin emaw telh la bootstrap.js—kan list group chu tizau la, local content tabbable pane siam rawh.

In Ruangam Thuchah te Settings a awm bawk

"Home" nena inzawm paragraph pakhata placeholder content thenkhat. Tin, content thenkhat dang, hetah hian pad out leh he tab panel fill nan chauh hman a ni. Production-ah chuan hetah hian content tak tak tam zawk i nei ngei ang tih a chiang. Tin, text mai mai pawh a ni lo. Eng pawh a ni thei, tak tak. Thuziak, thlalak, form hrang hrang.

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>

Data attribute hmanga thil tih dan

JavaScript engmah ziak lovin list group navigation chu data-bs-toggle="list"element pakhat specify mai mai emaw, on emaw hmangin i activate thei a ni. Heng data attribute te hi .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>

JavaScript hmangin

JavaScript hmangin tabbable list item enable rawh (list item tin chu a hranin activate a ngai a ni):

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

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

Mimal list item chu kawng hrang hrangin i activate thei ang:

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 effect a awm bawk

Tabs panel fade in tir tur chuan pakhat zel ah add .faderawh .tab-pane. Tab pane hmasa ber pawhin .showa bul tanna thu awm chu hmuh theih turin a siam a ngai bawk.

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

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

I content chu tab element angin a activate thin.

Constructor hmangin tab instance i siam thei a, entirnan:

const bsTab = new bootstrap.Tab('#myTab')

Tihdan	Hrilhfiahna
`dispose`	Element pakhat tab a tichhia.
`getInstance`	Static method hmanga DOM element nena inzawm tab instance hmuh theihna tur, hetiang hian i hmang thei ang: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Static method chu DOM element nena inzawm tab instance rawn pe chhuak emaw, initialized a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Tab pek chu thlang la, a kaihhnawih pane chu a rawn tarlang ang. A hmaa tab dang thlan tawh zawng zawng chu thlan loh a ni a, a kaihhnawih pane chu a thup vek a ni. Tab pane a lan tak tak`shown.bs.tab` hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin.

Thil thlengte

Tab thar kan lantir hian events te chu a hnuaia mi ang hian a rawn fire thin:

hide.bs.tab(tuna active tab-ah hian)
show.bs.tab(to-be-shown tab-ah chuan)
hidden.bs.tab(active tab hmasaah khan hide.bs.tabevent atana hman ang chiah kha)
shown.bs.tab(active thar-a just-shown tab-ah chuan, show.bs.tabevent atana hman ang chiah kha)

Tab active tawh lo a nih chuan hide.bs.taband hidden.bs.tabevents chu a fire dawn lo.

Event chi hrang hrang	Hrilhfiahna
`hide.bs.tab`	He event hi tab thar entir tur a nih hunah a fire thin (chutiang chuan a hmaa active tab kha thup tur a ni). Tuna active tab leh soon-to-be-active tab thar chu target turin `event.target`and hmang ang che .`event.relatedTarget`
`hidden.bs.tab`	He event hi tab thar a lan hnuah a fire a (chutiang chuan a hmaa active tab kha a thup a ni). Active tab hmasa leh active tab thar target turin `event.target`and hmang ang che .`event.relatedTarget`
`show.bs.tab`	He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh active tab hmasa (a awm chuan) te target turin `event.target`and hmang ang che .`event.relatedTarget`
`shown.bs.tab`	He event hi tab pakhat a lan hnuah tab show ah a fire thin. Active tab leh active tab hmasa (a awm chuan) te target turin `event.target`and hmang ang che .`event.relatedTarget`

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