メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

インプットグループ（Input group） v5.0.0設定変更

テキスト入力、カスタム選択メニュー、カスタムファイル入力の両側にテキスト、ボタン、ボタングループを追加して、フォームコントロールを簡単に拡張できる。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.0.0設定変更

基本のインプットグループ（Basic example）v5.3.0設定変更

単独のアドオンやボタンをインプットの両側に配置。また、インプットの両側にも配置できる。<label> はインプットグループの外に置いて下さい。

見本

前にアドオン

@

後にアドオン

@example.com

ラベル付きアドオンv5.3.0設定変更

https://example.com/users/
ヘルプの例文はインプットグループの外に出てしまう。

前後にアドオン

$ .00

間にアドオン v5.0.0-alpha3追加

@

コントロールがテキストエリアの場合

テキストエリア付き
Bootstrap5.xの設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
.input-group.mb-3>span.input-group-text#addonID+inp.form-control[placeholder aria-label aria-describedby=addonID]（addonID名は揃えて下さい）
後にアドオン<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
.input-group.mb-3>inp.form-control[placeholder aria-label aria-describedby=addonID]+span.input-group-text#addonID（addonID名は揃えて下さい）
ラベル付きアドオン<div class="mb-3">
  <label for="basic-url" class="form-label">ダミーURL</label>
  <div class="input-group">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
  </div>
  <div class="form-text" id="basic-addon4">ヘルプの例文はインプットグループの外に出てしまう。</div>
</div>
.mb-3>label.form-label+(.input-group>span.input-group-text#addonID+inp.form-control[placeholder aria-label aria-describedby="addonID textID"])+.form-text#textID（addonID, textID名は揃えて下さい）
前後にアドオン<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
  <span class="input-group-text">.00</span>
</div>
.input-group.mb-3>span.input-group-text+inp.form-control[aria-label]+span.input-group-text
間にアドオン<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ユーザー名">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="サーバー">
</div>
.input-group.mb-3>inp.form-control[placeholder]+span.input-group-text+inp.form-control[placeholder]
コントロールがテキストエリア<div class="input-group">
  <span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
  <textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
.input-group>span.input-group-text#addonID+tarea.form-control[aria-label aria-describedby=addonID]（addonID名は揃えて下さい）
※展開後 <textarea> の cols="30" rows="10" は不要なのでに削除して下さい（id="" も不要なら削除）
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
後にアドオン<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>
ラベル付きアドオン<label for="basic-url">ダミーURL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
前後にアドオン<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>
コントロールがテキストエリア<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-textarea">テキストエリア付き</span>
  </div>
  <textarea class="form-control" aria-label="テキストエリア付き" aria-describedby="basic-textarea"></textarea>
</div>
【設定】
  • 前にアドオン：.input-group(.mb-3) > [span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 後にアドオン：.input-group(.mb-3) > [input.form-control《コントロール》 + span.input-group-text《アドオン》]
  • ラベル付きアドオン：(.mb-3 > )<label> + .input-group > [span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 間にアドオン：.input-group(.mb-3) > [input.form-control《コントロール》 + span.input-group-text《アドオン》 + input.form-control《コントロール》]
  • 前後にアドオン：.input-group(.mb-3) > [span.input-group-text《アドオン》 + input.form-control《コントロール》 + span.input-group-text《アドオン》]
【注意】
【アクセシビリティの設定】
  • <input> には、
    • アドオンが1つだけの場合は aria-describedby 属性（アドオン部のIDを指定）
    • アドオンが2つの場合は aria-label 属性（代替テキストを指定）
    を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • アドオン：div.input-group-{prepend|append} > span.input-group-text ⇒ span.input-group-text（div.input-group-prepend, div.input-group-append は廃止）
  • 【v5.3.0】
    • ラベル付きアドオン：ヘルプの例文を追加

インプットグループのラッピング（Wrapping）

インプットグループ内のカスタムフォームフィールドの検証に対応するために、インプットグループはデフォルトでは flex-wrap: wrap（折り返しあり）で囲まれている。.flex-nowrap（折り返しなし）でこれを無効に。

見本
@
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addon-wrapping">
</div>
【設定】
  • .input-group に .flex-nowrap を追加

インプットグループのサイズ（Sizing）

相対的なフォームサイズのクラスを .input-group 自体に追加すると、その中の内容は自動的にサイズ変更される。各要素のフォームコントロールサイズのクラスを繰り返す必要はない。

個々のインプットグループ要素のサイズ設定はサポートされていない。

見本

大きめ：.input-group-lg

大きめ

小さめ：.input-group-sm

小さめ

デフォルト（参考）

デフォルト
Bootstrap5.xの設定例 緑背景が変更箇所
大きめ<div class="input-group input-group-lg mb-3">
  <span class="input-group-text" id="inputGroup-sizing-lg">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめ<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
大きめ<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-lg">
</div>
小さめ<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="サイズの入力例" aria-describedby="inputGroup-sizing-sm">
</div>
【設定】
  • .input-group に .input-group-{sm|lg} を追加

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

インプットグループのアドオン内にテキストではなくチェックボックスやラジオボタンのオプションを配置。インプットの横に表示されるテキストがない場合は、.form-check-input に .mt-0 の追加を推奨。

見本

チェックボックスの場合

ラジオボタンの場合

Bootstrap5.xの設定例 緑背景が変更箇所
チェックボックスの場合<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox" class="form-check-input mt-0" value="" aria-label="...">
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>
ラジオボタンの場合<div class="input-group">
  <div class="input-group-text">
    <input type="radio" class="form-check-input mt-0" value="" aria-label="...">
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
チェックボックスの場合<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" value="" aria-label="...">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>
ラジオボタンの場合<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" value="" aria-label="...">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>
【設定】
  • チェックボックス：.input-group(.mb-3) > [div.input-group-text > input[type="checkbox"].form-check-input.mt-0]《アドオン》
  • ラジオボタン：.input-group(.mb-3) > [div.input-group-text > input[type="radio"].form-check-input.mt-0]《アドオン》
【アクセシビリティの設定】
  • チェックボックスやラジオボタン部分の <input> にも aria-label 属性（ビジュアルで目的を表現する要素に対するラベル付け）を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • チェックボックスやラジオボタン部分の <input> に .form-check-input を入れる
    • アドオン：div.input-group-{prepend|append} > span.input-group-text ⇒ span.input-group-text
  • 【v5.0.0-beta2】
    • .form-check-input に .mt-0 を追加

マルチインプット（Multiple inputs）

複数の <input> が視覚的にサポートされているが、検証スタイルでは単一の <input> を持つインプットグループに対してのみ使用できる。

見本
名字と名前
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="input-group">
  <span class="input-group-text">名字と名前</span>
  <input type="text" class="form-control" aria-label="名字">
  <input type="text" class="form-control" aria-label="名前">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">名字と名前</span>
  </div>
  <input type="text" class="form-control" aria-label="名字">
  <input type="text" class="form-control" aria-label="名前">
</div>
【設定】
  • コントロール部分に複数の input.form-control を入れる

マルチアドオン（Multiple addons）

複数のアドオンがサポートされており、チェックボックスやラジオボタンの入力バージョンと混在させることもできる。

見本

前にアドオン

$ 0.00

後にアドオン

$ 0.00
Bootstrap5.xの設定例 緑背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
</div>
後にアドオン<div class="input-group">
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
</div>
後にアドオン<div class="input-group">
  <input type="text" class="form-control" aria-label="ドル金額（小数点以下2桁）">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>
【設定】
  • 片側に2つのアドオンを入れる（アドオンはチェックボックスやラジオボタン付きでも可）
  • アドオン：span.input-group-text を囲む div.input-group-prepend や div.input-group-append は不要に

ボタンアドオン（Button addons）v5.0.0-alpha1設定変更

アドオン部分がボタンになっている。

見本

前にボタン

後にボタン

前後にボタン

前に複数のボタン

後に複数のボタン

Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group mb-3">
  <button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
.input-group.mb-3>btn[type=button].btn.btn-outline-secondary#addonID+inp.form-control[placeholder aria-label aria-describedby=addonID]（addonID名は揃えて下さい）
※.btn-outline-secondary の部分はお好みのボタンカラーを選んで下さい
後にボタン<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
  <button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
</div>
.input-group.mb-3>inp.form-control[placeholder aria-label aria-describedby=addonID]+btn[type=button].btn.btn-outline-secondary#addonID（addonID名は揃えて下さい）
※.btn-outline-secondary の部分はお好みのボタンカラーを選んで下さい
前後にボタン<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
  <input type="text" class="form-control" placeholder="..." aria-label="...">
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
</div>
.input-group.mb-3>btn[type=button].btn.btn-outline-secondary+inp.form-control[placeholder aria-label]+btn[type=button].btn.btn-outline-secondary
※.btn-outline-secondary の部分はお好みのボタンカラーを選んで下さい
前に複数のボタン<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
  <input type="text" class="form-control" placeholder="..." aria-label="...">
</div>
.input-group.mb-3>(btn[type=button].btn.btn-outline-secondary)*2+inp.form-control[placeholder aria-label]
※.btn-outline-secondary の部分はお好みのボタンカラーを選んで下さい
後に複数のボタン<div class="input-group">
  <input type="text" class="form-control" placeholder="..." aria-label="...">
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
</div>
.input-group.mb-3>inp.form-control[placeholder aria-label]+(btn[type=button].btn.btn-outline-secondary)*2
※.btn-outline-secondary の部分はお好みのボタンカラーを選んで下さい
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" id="button-addon1" class="btn btn-outline-secondary">ボタン</button>
  </div>
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon1">
</div>
後にボタン<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon2">
  <div class="input-group-append">
    <button type="button" id="button-addon2" class="btn btn-outline-secondary">ボタン</button>
  </div>
</div>
前後にボタン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
  <input type="text" class="form-control" placeholder="..." aria-label="...">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
</div>
前に複数のボタン<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon3">
</div>
後に複数のボタン<div class="input-group">
  <input type="text" class="form-control" placeholder="..." aria-label="..." aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
</div>
設定例
【設定】
  • .input-group(.mb-3) > [button.btn《ボタンアドオン》+ input.form-control]
【変更履歴】
  • 【v5.0.0-alpha1】
    • アドオン：div.input-group-{prepend|append} > button.btn ⇒ button.btnのみに

ドロップダウン付きボタンアドオン（Buttons with dropdowns）v5.0.0-beta1設定変更

アドオン部分がボタンドロップダウンになっている。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    アクション
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
    <li><hr class="dropdown-divider"></li>
    ...
  </ul>
  <input type="text" class="form-control" aria-label="...">
</div>
後にボタン<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    アクション
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
    <li><hr class="dropdown-divider"></li>
    ...
  </ul>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      アクション
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー1</a>
      ...
      <div role="separator" class="dropdown-divider"></div>
      ...
    </div><!-- /.dropdown-menu -->
  </div><!-- /.input-group-prepend -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      アクション
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#">メニュー1</a>
      ...
      <div role="separator" class="dropdown-divider"></div>
      ...
    </div><!-- /.dropdown-menu -->
  </div><!-- /.input-group-append -->
</div><!-- /.input-group -->
【設定】
  • .input-group(.mb-3) > {button.btn.dropdown-toggle[data-bs-toggle="dropdown"]《ドロップダウンボタン》 + ul.dropdown-menu > <li> > a.dropdown-item《ドロップメニュー》}《アドオン》
  • 後にボタンドロップダウンがつく場合は、ul.dropdown-menu に .dropdown-menu-end を追加
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]
    • RTL（右書き）の設定追加に伴い行末揃えのボタンドロップダウンメニューのクラス名変更
      • .dropdown-menu-right ⇒ .dropdown-menu-end

分離ボタンのアドオン（Segmented buttons）v5.0.0-beta1設定変更

アドオン部分が分離ボタンになっている。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
前にボタン<div class="input-group">
  <button type="button" class="btn btn-outline-secondary">アクション</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">切替ボタン</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
    <li><hr class="dropdown-divider"></li>
    ...
  </ul>
  <input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <button type="button" class="btn btn-outline-secondary">アクション</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">切替ボタン</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">メニュー1</a></li>
    ...
    <li><hr class="dropdown-divider"></li>
    ...
  </ul>
</div><!-- /.input-group -->
※Bootstrap4.xの設定例 赤背景が変更箇所
前にボタン<div class="input-group">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">アクション</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">切替ボタン</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー1</a>
      ...
      <div role="separator" class="dropdown-divider"></div>
      ...
    </div><!-- /.dropdown-menu -->
  </div><!-- /.input-group-prepend -->
  <input type="text" class="form-control" aria-label="...">
</div><!-- /.input-group -->
後にボタン<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">アクション</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">切替ボタン</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#">メニュー1</a>
      ...
      <div role="separator" class="dropdown-divider"></div>
      ...
    </div><!-- /.dropdown-menu -->
  </div><!-- /.input-group-append -->
</div><!-- /.input-group -->
【設定】
  • .input-group(.mb-3) > {button.btn《ボタン》 + button.btn.dropdown-toggle[data-bs-toggle="dropdown"]]ドロップダウンボタン》 + [ul.dropdown-menu > <li> > a.dropdown-item]《ドロップメニュー》]}《アドオン》
  • 後にボタンドロップダウンがつく場合は、ul.dropdown-menu に .dropdown-menu-end を追加
【変更履歴】
  • 【v5.0.0-alpha1】
  • 【v5.0.0-alpha2】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="dropdown"] ⇒ [data-bs-toggle="dropdown"]
    • RTL（右書き）の設定追加に伴い行末揃えのボタンドロップダウンメニューのクラス名変更
      • .dropdown-menu-right ⇒ .dropdown-menu-end

フォーム付き（Forms）v5.0.0-alpha1設定変更

インプットグループには、Bootstrapの選択メニューとファイル選択のサポートが含まれる。

選択メニュー（Form select）

見本
Bootstrap5.xの設定例 緑背景が変更箇所
設定例
前にアドオン<div class="input-group mb-3">
  <label for="inputGroupSelect01" class="input-group-text">オプション</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
</div>
後にアドオン<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <label for="inputGroupSelect02" class="input-group-text">オプション</label>
</div>
前にボタン<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
</div>
後にボタン<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <button type="button" class="btn btn-outline-secondary">ボタン</button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label for="inputGroupSelect01" class="input-group-text">オプション</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
</div>
後にアドオン<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <div class="input-group-append">
    <label for="inputGroupSelect02" class="input-group-text">オプション</label>
  </div>
</div>
前にボタン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="ボタンアドオンで選択する例">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
</div>
後にボタン<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="ボタンアドオンで選択する例">
    <option selected>選択...</option>
    <option value="1">その1</option>
    <option value="2">その2</option>
    <option value="3">その3</option>
  </select>
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">ボタン</button>
  </div>
</div>
【設定】
  • コントロールの部分を select.form-select > <option> の選択メニューにする
【注意】
  • 選択メニューの幅は、メニューの幅ではなく100%になる
【変更履歴】
  • 【v5.0.0-alpha1】
    • 選択メニュー：.custom-select ⇒ .form-select

ファイル選択（From file input）v5.0.0-alpha3設定変更

見本
アップロード
アップロード
Bootstrap5.0.0-alpha3～の設定例 緑背景が5.0.0-alpha3での変更箇所
前にアドオン<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
  <input type="file" id="inputGroupFile01" class="form-control" aria-describedby="inputGroupFileAddon01">
</div>
後にアドオン<div class="input-group mb-3">
  <input type="file" id="inputGroupFile02" class="form-control" aria-describedby="inputGroupFileAddon02">
  <span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
</div>
前にボタン<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
  <input type="file" id="inputGroupFile03" class="form-control" aria-describedby="inputGroupFileAddon03">
</div>
後にボタン<div class="input-group">
  <input type="file" id="inputGroupFile04" class="form-control" aria-describedby="inputGroupFileAddon04">
  <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
</div>
※Bootstrap5.0.0-alpha2の設定例 赤背景が5.0.0-alpha3での変更箇所
前にアドオン<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
  <div class="form-file">
    <input type="file" id="inputGroupFile01" class="form-file-input" aria-describedby="inputGroupFileAddon01">
    <label for="inputGroupFile01" class="form-file-label">
      <span class="form-file-text">ファイル選択...</span>
      <span class="form-file-button">参照</span>
    </label>
  </div>
</div>
後にアドオン<div class="input-group mb-3">
  <div class="form-file">
    <input type="file" id="inputGroupFile02" class="form-file-input" aria-describedby="inputGroupFileAddon02">
    <label for="inputGroupFile02" class="form-file-label">
      <span class="form-file-text">ファイル選択...</span>
      <span class="form-file-button">参照</span>
    </label>
  </div>
  <span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
</div>
前にボタン<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
  <div class="form-file">
    <input type="file" id="inputGroupFile03" class="form-file-input" aria-describedby="inputGroupFileAddon03">
    <label for="inputGroupFile03" class="form-file-label">
      <span class="form-file-text">ファイル選択...</span>
      <span class="form-file-button">参照</span>
    </label>
  </div>
</div>
後にボタン<div class="input-group">
  <div class="form-file">
    <input type="file" id="inputGroupFile04" class="form-file-input" aria-describedby="inputGroupFileAddon04">
    <label for="inputGroupFile04" class="form-file-label">
      <span class="form-file-text">ファイル選択...</span>
      <span class="form-file-button">参照</span>
    </label>
  </div>
  <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
前にアドオン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">アップロード</span>
  </div>
  <div class="custom-file">
    <input type="file" id="inputGroupFile01" class="custom-file-input" aria-describedby="inputGroupFileAddon01">
    <label for="inputGroupFile01" class="custom-file-label" data-browse="参照">ファイル選択...</label>
  </div>
</div>
後にアドオン<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" id="inputGroupFile02" class="custom-file-input" aria-describedby="inputGroupFileAddon02">
    <label for="inputGroupFile02" class="custom-file-label" data-browse="参照">ファイル選択...</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">アップロード</span>
  </div>
</div>
前にボタン<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon03">ボタン</button>
  </div>
  <div class="custom-file">
    <input type="file" id="inputGroupFile03" class="custom-file-input" aria-describedby="inputGroupFileAddon03">
    <label for="inputGroupFile03" class="custom-file-label" data-browse="参照">ファイル選択...</label>
  </div>
</div>
後にボタン<div class="input-group">
  <div class="custom-file">
    <input type="file" id="inputGroupFile04" class="custom-file-input" aria-describedby="inputGroupFileAddon04">
    <label for="inputGroupFile04" class="custom-file-label" data-browse="参照">ファイル選択...</label>
  </div>
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary" id="inputGroupFileAddon04">ボタン</button>
  </div>
</div>
【設定】
  • コントロールの部分が input[type="file"].form-control の場合は、ファイル選択のスタイルになる
【変更履歴】
  • 【v5.0.0-alpha1】
    • ファイル選択部分の設定が変更（.custom-file ⇒ .form-file 等）
  • 【v5.0.0-alpha3】

取消ボタン付き v5.2.0JSファイルをES6に変更

インプットグループで参照ボタンの横にファイル取消ボタンを追加（複数ファイル対応）。

See the Pen Bootstrap5 Form-file with Reset-button(ES6) by cccabinet (@cccabinet) on CodePen.

ファイル名をリスト表示 v5.2.0JSファイルをES6に変更

ファイルを選択すると、コントロールの下にファイル名とサイズをリスト表示（複数ファイル対応）。

See the Pen Bootstrap5 Form-file List preview(ES6) by cccabinet (@cccabinet) on CodePen.

画像ファイルのプレビュー v5.2.0JSファイルをES6に変更

ファイルを選択すると、画像ファイルのみ画像プレビューとファイル名が表示され、画像ファイル以外ではファイル名のみが表示される（複数ファイル対応）。

See the Pen Bootstrap5 Form-file Image preview(ES6) by cccabinet (@cccabinet) on CodePen.

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 input-group-variables の設定$input-group-addon-padding-y:           $input-padding-y;
$input-group-addon-padding-x:           $input-padding-x;
$input-group-addon-font-weight:         $input-font-weight;
$input-group-addon-color:               $input-color;
$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg);
$input-group-addon-border-color:        $input-border-color;