リストグループ（List group）

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネント。それらを修正して拡張して、その中のあらゆるコンテンツに対応。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。

このページの項目

このページでは、一部を除いて各実例の .list-group に、任意に style="max-width: **px;" の設定を追加している。

基本のリストグループ（Basic example）v5.2.0デザイン変更

最も基本的なリストグループは、リストアイテムと適切なクラスを持つ順不同のリスト。それに続くオプションや必要に応じて独自のCSSを使って構築。

見本

アイテム1
アイテム2
アイテム3

設定例

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item">アイテム1</li>
  <li class="list-group-item">アイテム2</li>
  <li class="list-group-item">アイテム3</li>
</ul>

【設定】

ul.list-group > li.list-group-item

【注意】

Flexboxスタイルにつき、横幅の設定に任意のスタイルかCSSの設定を入れた方がいい場合がある

【変更履歴】

【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更

アクティブなアイテム（Active items）v5.0.0-alpha1設定変更

.active を .list-group-item に追加すると、現在のアクティブな選択を示す。

見本

アイテム1
アイテム2
アイテム3

Bootstrap5.xの設定例緑背景が変更箇所

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item active" aria-current="true">アイテム1</li>
  <li class="list-group-item">アイテム2</li>
  <li class="list-group-item">アイテム3</li>
</ul>

※Bootstrap4.xの設定例赤背景が変更箇所

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item active">アイテム1</li>
  <li class="list-group-item">アイテム2</li>
  <li class="list-group-item">アイテム3</li>
</ul>

【設定】

アクティブにしたいアイテムの .list-group-item に.active を追加

【アクセシビリティの設定】

.active と同じ要素に aria-current="true"（支援技術に現在のアイテムであることを伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】（v4.6.0でバックポート）
- アクセシビリティの設定を追加

無効のアイテム（Disabled items）

.disabled を .list-group-item に追加すると、無効に見えるようになる。.disabled を持つ要素の中には、（リンクなど）クリックイベントを完全に無効にするカスタムJavaScriptが必要な場合がある。

見本

アイテム1
アイテム2
アイテム3

設定例

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item disabled" aria-disabled="true">アイテム1</li>
  <li class="list-group-item">アイテム2</li>
  <li class="list-group-item">アイテム3</li>
</ul>

【設定】

無効にしたいアイテムの .list-group-item に .disabled を追加

【アクセシビリティの設定】

.disabled と同じ要素に aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）を入れる

リンク付き＆ボタンによるリストグループ（Links and buttons）

.list-group-item-action の追加で、ホバー、無効、アクティブ状態のアクション可能なリストグループアイテムを作成するには、<a> や <button> を使用する。これらの擬似クラスを分離して、非対話型要素（<li> や <div> など）で作成されたリストグループがクリックやタップ機能を提供しないようにして下さい。

ここでは、デフォルトの .btn クラスは使用しないで下さい。

1. リンク付きリストグループ v5.1.1設定変更

見本

現在のリンクアイテムリンクアイテム2 リンクアイテム3 無効のリンクアイテム

Bootstrap5.1.1～の設定例緑背景が変更箇所

<div class="list-group" style="max-width: 400px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">現在のリンクアイテム</a>
  <a href="#" class="list-group-item list-group-item-action">リンクアイテム2</a>
  <a href="#" class="list-group-item list-group-item-action">リンクアイテム3</a>
  <a class="list-group-item list-group-item-action disabled">無効のリンクアイテム</a>
</div>

※Bootstrap5.1.0の設定例赤背景が変更箇所

<div class="list-group" style="max-width: 400px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">現在のリンクアイテム</a>
  <a href="#" class="list-group-item list-group-item-action">リンクアイテム2</a>
  <a href="#" class="list-group-item list-group-item-action">リンクアイテム3</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">無効のリンクアイテム</a>
</div>

【設定】

div.list-group > a.list-group-item.list-group-item-action
アクティブ化したいリンクには、a.list-group-item.list-group-item-action に .active と aria-current="true" を追加
無効化したいリンクには、a.list-group-item.list-group-item-action に .disabled を追加

【注意】

リンク付きリストグループはリスト形式（ul > li > a）ではなく、div > a で作成

【アクセシビリティの設定】

.active と同じ要素に aria-current="true"（支援技術に現在のアイテムであることを伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】（v4.6.0でバックポート）
- .active 関連のアクセシビリティの設定を追加
【v5.1.1】
- リンクが無効の場合（a.list-group-item.list-group-item-action.disabled）：href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）の設定が不要に（参考、v4.6.1でバックポート）

2. ボタンによるリストグループ

<button> では、.disabled クラスの代わりに disabled 属性も使用できる。悲しいことに、<a> は disabled 属性をサポートしていない。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="list-group" style="max-width: 400px;">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">現在のボタンアイテム</button>
  <button type="button" class="list-group-item list-group-item-action">ボタンアイテム2</button>
  <button type="button" class="list-group-item list-group-item-action">ボタンアイテム3</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>無効のボタンアイテム</button>
</div>

【設定】

div.list-group > button.list-group-item.list-group-item-action
アクティブ化したいボタンには、a.list-group-item.list-group-item-action に .active と aria-current="true" を追加
無効化したいボタンには、<button> に disabled 属性を追加

外枠なし（Flush）

.list-group-flush を追加すると、親コンテナ（カードなど）内でリストグループアイテムを端から端まで描画するために、いくつかの枠線と丸みのある角を削除できる。

見本

アイテム1
アイテム2
アイテム3

設定例

<ul class="list-group list-group-flush" style="max-width: 400px;">
  <li class="list-group-item">アイテム1</li>
  <li class="list-group-item">アイテム2</li>
  <li class="list-group-item">アイテム3</li>
</ul>

番号付き（Numbered）v5.0.0-beta3新設

.list-group-numbered 修飾子クラスを追加（オプションで <ol> 要素を使用）して、番号付きリストグループアイテムを再定義する。番号は（<ol> のデフォルトのブラウザスタイルではなく）CSSを経由して生成され、リストグループアイテム内での配置を改善し、カスタマイズを改善する。

番号は、<ol> の counter-reset によって生成され、<li> の ::before 疑似要素で counter-increment と content を使用してスタイル設定と配置をする。

見本

アイテム
アイテム
アイテム

設定例

<ol class="list-group list-group-numbered" style="max-width: 400px;">
  <li class="list-group-item">アイテム</li>
  <li class="list-group-item">アイテム</li>
  <li class="list-group-item">アイテム</li>
</ol>

これらはカスタムコンテンツでもうまく機能。

見本

小見出し
アイテムのコンテンツ
14
小見出し
アイテムのコンテンツ
14
小見出し
アイテムのコンテンツ
14

設定例

<ol class="list-group list-group-numbered" style="max-width: 400px;">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">小見出し</div>
      アイテムのコンテンツ
    </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">小見出し</div>
      アイテムのコンテンツ
    </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">小見出し</div>
      アイテムのコンテンツ
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

【設定】

ol.list-group.list-group-numbered > li.list-group-item

水平スタイル（Horizontal）v5.0.0-alpha1クラス追加

全てのブレークポイントにわたってリストグループアイテムのレイアウトを縦並びから横並びに変更するには .list-group-horizontal を追加する。あるいは、レスポンシブ形式の .list-group-horizontal-{sm|md|lg|xl|xxl} を選択して、そのブレークポイントの min-width で始まるリストグループを水平にする。今のところ水平リストグループは枠なしリストグループと組み合わせられない。

ヒント：横並びの場合、等幅のリストグループアイテムが必要なら、各リストグループアイテム（.list-group-item）に .flex-fill を追加して下さい。

定義済クラスの種類

全てのブレークポイントで水平スタイル .list-group-horizontal

アイテム1
アイテム2（長め）
アイテム3

ビューポートが576px以上で水平スタイル .list-group-horizontal-sm

アイテム1
アイテム2（長め）
アイテム3

ビューポートが768px以上で水平スタイル .list-group-horizontal-md

アイテム1
アイテム2（長め）
アイテム3

ビューポートが992px以上で水平スタイル .list-group-horizontal-lg

アイテム1
アイテム2（長め）
アイテム3

ビューポートが1200px以上で水平スタイル .list-group-horizontal-xl

アイテム1
アイテム2（長め）
アイテム3

ビューポートが1400px以上で水平スタイル .list-group-horizontal-xxlv5.0.0-alpha1追加

アイテム1
アイテム2（長め）
アイテム3

等幅のリストグループ

アイテム1
アイテム2（長め）
アイテム3

設定例

全てのブレークポイント<ul class="list-group list-group-horizontal">
  <li class="list-group-item">アイテム1</li>
  <li class="list-group-item">アイテム2（長め）</li>
  <li class="list-group-item">アイテム3</li>
</ul>

特定のブレークポイント<ul class="list-group list-group-horizontal-**">
  <li class="list-group-item">アイテム1</li>
  <li class="list-group-item">アイテム2（長め）</li>
  <li class="list-group-item">アイテム3</li>
</ul>

等幅のリストグループ<ul class="list-group list-group-horizontal">
  <li class="list-group-item flex-fill">アイテム1</li>
  <li class="list-group-item flex-fill">アイテム2（長め）</li>
  <li class="list-group-item flex-fill">アイテム3</li>
</ul>

表示の範囲

ビューポートの幅	極小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px	超特大 ≥1400px
`.list-group.list-group-horizontal`	横並び
`.list-group.list-group-horizontal-sm`	縦並び	横並び
`.list-group.list-group-horizontal-md`	縦並び		横並び
`.list-group.list-group-horizontal-lg`	縦並び			横並び
`.list-group.list-group-horizontal-xl`	縦並び				横並び
`.list-group.list-group-horizontal-xxl` v5.0.0-alpha1追加	縦並び					横並び

【設定】

常にリストグループを水平スタイルにするには .list-group に list-group-horizontal を追加
特定のビューポートでリストグループを水平スタイルにするには .list-group に .list-group-horizontal-{breakpoint} を追加
- {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
水平リストの幅を等幅にするには、.list-group-item に .flex(-{breakpoint})-fill を追加
- {breakpoint} は、.list-group-horizontal-{breakpoint} の {breakpoint} に合わせる

【変更履歴】

【v5.0.0-alpha1】
- .list-group-horizontal-xxl が追加

リストグループの背景色（Contextual classes）

背景色のクラスを使用して、状態が反映された背景と色でリストアイテムのスタイルを設定。

背景色の種類

Primary：.list-group-item-primary
Secondary：.list-group-item-secondary
Success：.list-group-item-success
Info：.list-group-item-info
Warning：.list-group-item-warning
Danger：.list-group-item-danger
Light：.list-group-item-light
Dark：.list-group-item-dark
※デフォルトのアイテム

設定例

<ul class="list-group" style="max-width: 500px;">
  <li class="list-group-item list-group-item-primary">アイテム</li>
  ...
</ul>

背景色のクラスも .list-group-item-action で動作。ここではホバースタイルも追加されているので注意。.active 状態もサポートし、背景色のついたリストグループアイテムのアクティブな選択を示すためにそれを適用。

背景色の種類

設定例

<div class="list-group" style="max-width: 500px;">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary active" aria-current="true">アクティブ化</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">アイテム</a>
  ...
</div>

【設定】

基本のリストグループ：li.list-group-item に .list-group-item-{themecolor}（.list-group-item-{themecolor} は、上記の「背景色の種類」から選択）を追加

{themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択

リンク付きリストグループ：a.list-group-item.list-group-item-action に .list-group-item-{themecolor}（上記の「背景色の種類」から選択）を追加し、さらに .active を追加するとアクティブ用の背景色になる

支援技術への意味の伝達

意味を追加するのにカラー名を使用しても視覚的な指示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わらないだろう。カラー名で表示された情報をコンテンツ自体で明らかにするか（可視テキストなど）、代替手段として追加のテキストなどを .visually-hidden クラスで隠すなどして入れて下さい。

枠線の色 ※裏技

各リストの枠線の色を変える。

見本

アイテム1
アイテム2
アイテム3

設定例

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item border-warning">アイテム1</li>
  <li class="list-group-item border-info">アイテム2</li>
  <li class="list-group-item border-danger">アイテム3</li>
</ul>

【設定】

.list-group-item に .border-{themecolor} を追加（.border-{themecolor} は境界ユーティリティの枠の色の種類から選択）
※.list-group に .border-{themecolor} を追加しても無効。全て同じ枠の色に設定する場合は、全ての .list-group-item に設定が必要

【注意】

リストごとに色を変える場合、最後のリスト以外は上部の線は指定した色が反映されない（前のリストで指定した色が反映）

バッジ付きリストグループ（With badges）

いくつかのユーティリティの助けを借りて、未読の数、活動などを表示するために、リストグループアイテムにバッジを追加。

見本

リストアイテム114
リストアイテム22
リストアイテム31

設定例

<ul class="list-group" style="max-width: 400px;">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リストアイテム1
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リストアイテム2
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リストアイテム3
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

【設定】

li.list-group-item.d-flex.justify-content-between.align-items-center（Flexboxで両端に配置） > span.badge.badge-{themecolor}.rounded-pill（.badge-{themecolor} は、「バッジの種類」から選択）

【注意】

行末側にバッジをとりつける場合は、《アイテムの内容》⇒《バッジの表示》の順に記載する必要がある

ヘッダありリンク付きリストグループ（Custom content）

Flexユーティリティの助けを借りて、下記のようなリンクリストグループの場合でも、ほぼすべてのHTMLを追加して下さい。

見本

リストグループ1のヘッダ

3日前

段落内のプレースホルダコンテンツ。

サブコンテンツ

リストグループ2のヘッダ

3日前

段落内のプレースホルダコンテンツ。

サブコンテンツ

リストグループ3のヘッダ

3日前

段落内のプレースホルダコンテンツ。

サブコンテンツ

Bootstrap5.xの設定例緑背景が変更箇所

<div class="list-group" style="max-width: 400px;">
  <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">リストグループ1のヘッダ</h5>
      <small>3日前</small>
    </div>
    <p class="mb-1">段落内のプレースホルダコンテンツ。</p>
    <small>サブコンテンツ</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">リストグループ2のヘッダ</h5>
      <small>3日前</small>
    </div>
    <p class="mb-1">段落内のプレースホルダコンテンツ。</p>
    <small>サブコンテンツ</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">リストグループ3のヘッダ</h5>
      <small>3日前</small>
    </div>
    <p class="mb-1">段落内のプレースホルダコンテンツ。</p>
    <small>サブコンテンツ</small>
  </a>
</div>

【設定】

a.list-group-item.list-group-item-action > {div.d-flex.w-100.justify-content-between（アイテムの幅を100%にして両端揃えに） > [h5.mb-1（下側のマージンを0.25remに） + <small>《サブコンテンツ》]}《ヘッダ》 + [p.mb-1（下側のマージンを0.25remに） + <small>《サブコンテンツ》]《コンテンツ》

チェックボックスとラジオボタン（Checkboxes and radios）v5.0.0-alpha1新設、v5.0.0-beta1設定変更

Bootstrapのチェックボックスとラジオボタンをリストグループアイテム内に配置し、必要に応じてカスタマイズ。<label> はなくても使用できるが、アクセシビリティのために aria-label 属性と value 値は入れて下さい。

1. 基本の設定

見本

チェックボックス1
チェックボックス2
チェックボックス3
チェックボックス4
チェックボックス5

設定例緑背景がv5.0.0-beta1での変更箇所

<ul class="list-group">
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス1
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス2
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス3
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス4
  </li>
  <li class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="" aria-label="...">
    チェックボックス5
  </li>
</ul>

【設定】

ul.list-group > li.list-group-item > input[type="checkbox"].form-check-input.me-1
[type="checkbox"] を [type="radio"] に変更すれば、チェックボックスがラジオボタンになる

【アクセシビリティの設定】

ラベルテキストの代替として <input> に aria-label 属性（要素に対してラベル付けを行う）を入れる

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
  - .mr-1 ⇒ .me-1

2. ラベル付き

また、大きなヒットエリアの .list-group-item として <label> が必要な場合は、それも設定できる。

見本

チェックボックス1 チェックボックス2 チェックボックス3 チェックボックス4 チェックボックス5

設定例緑背景がv5.0.0-beta1での変更箇所

<div class="list-group">
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス1
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス2
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス3
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス4
  </label>
  <label class="list-group-item">
    <input type="checkbox" class="form-check-input me-1" value="">
    チェックボックス5
  </label>
</div>

【設定】

div.list-group > label.list-group-item > input[type="checkbox"].form-check-input.me-1

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
  - .mr-1 ⇒ .me-1

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、リストグループは、リアルタイムのカスタマイズを強化するために、.list-group でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_list-group.scss 内 list-group-css-vars の設定--#{$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変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 list-group-variables の設定$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-radius:          $border-radius;
$list-group-border-width:           $border-width;

$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（Mixins）

$theme-colors と組み合わせて使用し、.list-group-items のカラーバリエーションクラスを生成。

デフォルトの設定

scss/mixins/_list-group.scss 内 list-group-modifiers の設定@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;
      }
    }
  }
}

ループ（Loop）

list-group-item-variant() mixinを使用して修飾子クラスを生成するループ。

デフォルトの設定

scss/_list-group.scss 内 list-group-modifiers の設定// リストグループのカラーバリエーションを一覧表示
//
// 修飾子クラスを追加して、個々のアイテムのテキストと背景色を変更
// 組織的には、これは `：hover` 状態の後に来る必要がある

@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の動作（JavaScript behavior）v5.0.0-beta1設定変更

個別かコンパイルされた bootstrap.js ファイルを通じてタブJavaScriptプラグインを使用して、リストグループを拡張して、ローカルコンテンツのタブ切替パネルを作成。

見本

ホームプロフィールメッセージセッティング

「ホーム」に関連する段落のプレースホルダコンテンツ。そして、このタブパネルを埋めて埋めるためだけにここで使用されるいくつかのコンテンツ。本番環境では、明らかにここにもっとリアルなコンテンツがある。それは、テキストだけではなく、画像、フォーム、本当に何でもかまわない。

「プロフィール」に関連する段落のプレースホルダコンテンツ。そして、このタブパネルを埋めて埋めるためだけにここで使用されるいくつかのコンテンツ。本番環境では、明らかにここにもっとリアルなコンテンツがある。それは、テキストだけではなく、画像、フォーム、本当に何でもかまわない。

「メッセージ」に関連する段落のプレースホルダコンテンツ。そして、このタブパネルを埋めて埋めるためだけにここで使用されるいくつかのコンテンツ。本番環境では、明らかにここにもっとリアルなコンテンツがある。それは、テキストだけではなく、画像、フォーム、本当に何でもかまわない。

「セッティング」に関連する段落のプレースホルダコンテンツ。そして、このタブパネルを埋めて埋めるためだけにここで使用されるいくつかのコンテンツ。本番環境では、明らかにここにもっとリアルなコンテンツがある。それは、テキストだけではなく、画像、フォーム、本当に何でもかまわない。

Bootstrap5.xの設定例緑背景が変更箇所

<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" aria-current="true" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-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">プロフィール</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">メッセージ</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">セッティング</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>

【設定】

div.list-group > a.list-group-item.list-group-item-action[data-bs-toggle="list"]《リスト部分》 + [.tab-content > .tab-pane]《パネル部分》

【アクセシビリティの設定】

div.list-group に、role="tablist"（タブリストの役割を伝える）を入れる
a.list-group-item.list-group-item-action に、
- role="tab" 属性（支援技術にタブ部分の役割を伝える）
- aria-controls="パネルのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
- .active を追加する場合は、[aria-current="true"]（支援技術に現在のリストであることを伝える）
を入れる
div.tab-pane に、
- role="tabpanel" 属性（支援技術にパネル部分の役割を伝える）
- aria-labelledby="リストのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
を入れる

【変更履歴】

【v5.0.0-alpha1】
- a.list-group-item.list-group-item-action.active に [aria-current="true"] を入れる
【v5.0.0-beta1】
- data- 属性に名前空間 bs- を追加
  - [data-toggle="list"] ⇒ [data-bs-toggle="list"]

データ属性の使用（Using data attributes）

単に data-bs-toggle="list" を指定するだけで、要素にJavaScriptを書くことなく、リストグループのナビゲーションを有効にできる。これらのデータ属性は、.list-group-item で使用。

設定例

<div role="tabpanel">
  <!-- リストグループ -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">セッティング</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>
</div>

JavaScript経由で（Via JavaScript）v5.2.0設定変更

JavaScriptを使用してタブ切替可能なリストアイテムを有効にする（各リストアイテムは個別に有効にする必要あり）：

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

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

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

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

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

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

※Bootstrap4.xの設定例

JavaScript$('#myList a').on('click',function (event) {
  event.preventDefault()
  $(this).tab('show')
})

いくつかの方法で個々のリストアイテムをアクティブにできる：

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

JavaScriptconst triggerEl = document.querySelector('#myList a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // リストアイテム名で選択

const triggerFirstTabEl = document.querySelector('#myList li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // 最初のリストアイテムを選択

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

JavaScriptvar triggerEl = document.querySelector('#myList a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show()

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

※Bootstrap4.xの設定例

JavaScript$('#myList a[href="#profile"]').tab('show')

$('#myList a:first-child').tab('show')

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

フェード効果（Fade effect）

タブパネルをフェードインさせるには、各 .tab-pane に .fade を追加。最初のタブパネルには、最初のコンテンツを表示させるために .show が必要。

メソッド（Methods）v5.0.0-alpha1追加、v5.2.0設定変更

コンストラクタ（constructor）

リストアイテム要素とコンテンツコンテナをアクティブにする。タブは、DOM内のコンテナの接点をターゲットとする data-bs-target か href が必要。

HTML<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">セッティング</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>

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

JavaScriptconst firstTabEl = document.querySelector('#myList a:last-child')
const firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

JavaScriptvar firstTabEl = document.querySelector('#myList a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)

firstTab.show()

※Bootstrap4.xの設定例

JavaScript<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

show

指定されたリストアイテムを選択し、関連するコンテンツを表示。その前に選択された他のリストアイテムは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前に（例えば、shown.bs.tab イベント発動前）に呼び出し元に戻る。

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

JavaScriptconst tab = new bootstrap.Tab('#someListItem')

tab.show()

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

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

tab.show()

dispose

要素のタブを破棄。

getInstance v5.0.0-alpha1追加

DOM要素に関連付けられたタブ・インスタンスを取得できる静的メソッド

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

JavaScriptconst tab = bootstrap.Tab.getInstance('#trigger') // Bootstrapタブ・インスタンスを返す

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl)

getOrCreateInstance v5.0.2追加

DOM要素に関連付けられたタブ・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

JavaScriptconst tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Bootstrapタブ・インスタンスを返す

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl)

【変更履歴】

【v5.0.0-alpha1】
- $().tab('show') ⇒ tab.show()
- getInstance メソッドが追加
【v5.0.2】
- getOrCreateInstance メソッドが追加
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

イベント（Events）

新しいタブを表示すると、イベントは次の順序で発動：

hide.bs.tab（現在のアクティブなタブに）
show.bs.tab（次に表示されるタブに）
hidden.bs.tab（前のアクティブなタブでは hide.bs.tab イベントと同じもの）
shown.bs.tab（新しくアクティブ化されて表示されるタブでは show.bs.tab イベントと同じもの）

既にアクティブなタブがない場合、hide.bs.tab と hidden.bs.tab イベントは発動しない。

イベントタイプ	説明
`hide.bs.tab`	新しいタブが表示されるときに発動（従って、前のアクティブなタブは非表示になる）。`event.target` と `event.relatedTarget` を使用して、現在のアクティブなタブと次にアクティブになる新しいタブをそれぞれターゲットにする
`hidden.bs.tab`	新しいタブが表示された後に発動（従って、前のアクティブなタブは非表示になる）。`event.target` と `event.relatedTarget` を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする
`show.bs.tab`	タブが表示される前に、タブの表示で発動。アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにするには `event.target` と `event.relatedTarget` を使用
`shown.bs.tab`	タブが表示された後、タブの表示で発動。アクティブなタブと前のアクティブなタブ（使用可能な場合）をそれぞれターゲットにするには `event.target` と `event.relatedTarget` を使用

使用例 v5.2.0設定変更

JavaScriptconst tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // 新しくアクティブ化されたタブ
    event.relatedTarget // 前のアクティブなタブ
  })
}

前のページ
※ジャンボトロン

次のページ
モーダル

リストグループ（List group）

基本のリストグループ（Basic example）v5.2.0デザイン変更

見本

設定例

【設定】

【注意】

【変更履歴】

アクティブなアイテム（Active items）v5.0.0-alpha1設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

無効のアイテム（Disabled items）

見本

設定例

【設定】

【アクセシビリティの設定】

リンク付き＆ボタンによるリストグループ（Links and buttons）

1. リンク付きリストグループ v5.1.1設定変更

見本

Bootstrap5.1.1～の設定例 緑背景が変更箇所

※Bootstrap5.1.0の設定例 赤背景が変更箇所

【設定】

【注意】

【アクセシビリティの設定】

【変更履歴】

2. ボタンによるリストグループ

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

外枠なし（Flush）

見本

設定例

番号付き（Numbered）v5.0.0-beta3新設

見本

設定例

見本

設定例

【設定】

水平スタイル（Horizontal）v5.0.0-alpha1クラス追加

定義済クラスの種類

設定例

表示の範囲

【設定】

【変更履歴】

リストグループの背景色（Contextual classes）

背景色の種類

設定例

背景色の種類

設定例

【設定】

支援技術への意味の伝達

枠線の色 ※裏技

見本

設定例

【設定】

【注意】

バッジ付きリストグループ（With badges）

見本

設定例

【設定】

【注意】

ヘッダありリンク付きリストグループ（Custom content）

見本

リストグループ1のヘッダ

リストグループ2のヘッダ

リストグループ3のヘッダ

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

チェックボックスとラジオボタン（Checkboxes and radios）v5.0.0-alpha1新設、v5.0.0-beta1設定変更

1. 基本の設定

見本

設定例 緑背景がv5.0.0-beta1での変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

2. ラベル付き

見本

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.1.1～の設定例緑背景が変更箇所

※Bootstrap5.1.0の設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

設定例緑背景がv5.0.0-beta1での変更箇所

設定例緑背景がv5.0.0-beta1での変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所

Bootstrap5.2.0の設定例緑背景がv5.2.0での変更箇所

※Bootstrap5.1.3の設定例赤背景がv5.2.0での変更箇所