Bootstrap4 の使い方(3) Components (1)

Bootstrap のドキュメントを元にしたコンポーネントについての解説やサンプルです。

この他に以下のページもあるのでよろしければご覧ください。

  1. Layout(Bootstrap の読み込み、グリッドシステム、メディアオブジェクト)
  2. Content(タイポグラフィ、コード、イメージ、フィギュア、テーブル)
  3. Components part1(このページ。アラート、バッジ、パンくずリスト、ボタン、ドロップダウン、フォーム、インプットグループ、リストグループ、 ページネーション)
  4. Components part2(カード、表示・非表示切り替え、アコーディオン、ツールチップ、ポップオーバー、モーダル、ナビゲーション、ナビゲーションバー)
  5. Components part3(カルーセル、スクロールスパイ)
  6. Utilities

以下で説明している Bootstrap のバージョンは、4.1.3 です。

作成日:2018年12月14日

アラート

アラートは任意の長さのメッセージの表示等に利用できるスタイルです。アラートを作成するには、div 要素で全体を囲み、その div 要素に alert クラスとアラートの色を指定するクラス(alert-xxxx)を指定します。オプションで「閉じるボタン」を設定することもできます(Alerts)。

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

スクリーンリーダーなどの支援技術への配慮

色を使って意味を伝える方法では、スクリーンリーダーなどを利用しているユーザーにはその意味が伝わりません。色で示されている情報が可視テキストなどで、コンテンツ自体から明らかであるか、または .sr-only クラスなどを利用して追加の代替手段を検討することが推奨されています。

以下は、.sr-only クラスの設定です。スクリーンリーダには読み上げられますが、画面には表示しないように設定されています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

アラート内のリンクの色

アラート内にリンク(a 要素)を設置する場合、a 要素に alert-link クラスを指定するとアラートの色に合ったリンクの色になります。また、リンク部分が太字で表示されます。

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

追加コンテンツ

アラートには、見出しや段落、水平線などの HTML 要素を追加することができます。それぞれの要素はマージンユーティリティなどを利用して配置を調整することもできます。

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use <a href="https://getbootstrap.com/docs/4.1/utilities/spacing/" class=" alert-link">margin utilities</a> to keep things nice and tidy.</p>
</div>

「閉じるボタン」の追加

「閉じるボタン」を追加して、ボタンをクリックするとアラートを閉じて非表示にする機能も用意されています。この機能を使用するには、以下のようにして閉じるボタンを button 要素で作成します。

  • alert クラスを指定した div 要素に alert-dismissible クラスを追加します。
  • 閉じるボタンは button 要素を使い、close クラス及び data-dismiss="alert" 属性(JavaScript が機能するための Bootstrap 独自の属性)を指定します。
  • ×印は、span 要素で &times; 特殊(エスケープ)文字を使用します。アイコン自体は装飾のためのものなので、スクリーンリーダに読み上げられないように aria-hidden="true" を指定します。
  • アラートの非表示にアニメーション効果を使用する場合は、div 要素に fade と show クラスを追加します。
  • ※ bootstrap の JavaScript が読み込まれている必要があります。
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>  

参考関連ページ:role 属性 / aria-*** 属性

また、alert-dismissible 及び close クラスには以下のスタイルが設定されています。

.alert-dismissible {
  padding-right: 4rem;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

アラートのイベント

アラートの機能には以下のようなイベントが設定されています。

イベント 概要
close.bs.alert このイベントは、 close インスタンスメソッドが呼び出されるとすぐに発火します。
closed.bs.alert このイベントは、アラートが閉じられると発火します(CSS トランジションが完了するまで待ちます)。

以下は、アラートが閉じられると、「アラートが閉じられました。」と言うメッセージを表示する例です。

メッセージとアラートの HTML は以下のようになっていて、メッセージの p 要素には display:none を設定しています。

<p id="alert_closed_message">アラートが閉じられました。</p>

<div id="my_alert" class="alert alert-info alert-dismissible fade show" role="alert" style="max-width: 680px;">
  内容を確認したら、閉じるボタン (x) をクリックして閉じてください。
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

以下は、イベントを利用した JavaScript です。

$('#my_alert').on('closed.bs.alert', function () {
  $("#alert_closed_message").fadeIn();
})

アラートが閉じられました。

参考関連ページ:「.on() を使ったイベントの設定

バッジ

バッジは小さめのラベルやカウント数を表示するためのコンポーネントです。バッジはサイズをマッチするように直近の親要素のサイズに対して相対的に設定されています。(Badges

バッジを作成するには、span 要素に badge クラスを指定し、背景色に応じて badge-* クラスを追加します。

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

bootstrap.css には以下が設定されています(一部抜粋)。

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}
.badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0062cc;
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}
.badge-secondary[href]:hover, .badge-secondary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #545b62;
}

・・・

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}
.badge-light[href]:hover, .badge-light[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #dae0e5;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}
.badge-dark[href]:hover, .badge-dark[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1d2124;
}

バッジは、カウンター(カウント数)表示用としてボタンやリンクの一部として使用することもできます。

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

バッジを使用する際の留意事項

バッジは使い方によっては、スクリーンリーダーなどを利用しているユーザーに混乱を招くことになる場合があります。それぞれの使用状況にもよりますが、色を使ったスタイルは、スクリーンリーダーなどを利用しているユーザーにはその色の意味が伝わらないため、カウント数などは単に最後にランダムに数字が書かれているだけととられてしまう可能性があります。

例えば、「お知らせ」の後に数字の4があれば、お知らせの数が4とわかりますが、文脈的に明確でない場合は、.sr-only クラスを利用して意味を伝えるテキストを追加するようにします。

以下は、.sr-only クラスの設定です。スクリーンリーダには読み上げられますが、画面には表示しないように設定されています。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

以下は、.sr-only クラスを使って、数値が未読メッセージであることを伝える例です。

<button type="button" class="btn btn-primary">
  プロファイル<span class="badge badge-light">9</span>
  <span class="sr-only">未読メッセージ</span>
</button>

バッジの背景色

以下のようなクラス(badge-*)を追加指定することで、バッジの背景色を変更することができます。

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Primary Secondary Success Danger Warning Info Light Dark

※ 色を使って意味を伝える方法では、スクリーンリーダーなどを利用しているユーザーにはその意味が伝わりません。そのため、色で示されている情報が可視テキストなどでコンテンツ自体から明らかでない場合は .sr-only クラスなどを利用して追加の代替手段を検討することが推奨されています。

ピル型バッジ

badge-pill クラスを追加すると、角丸の値とパディングを大きくしたピル型のバッジを表示することができます。

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Primary Secondary Success Danger Warning Info Light Dark

以下は badge-pill クラスのスタイルの設定です。

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

バッジのリンクでの使用

リンクでバッジを使用すると、ホバー時やアクティブ時に背景色が変化します。

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Primary Secondary Success Danger Warning Info Light Dark

ボタン

Bootstrap にはフォームやダイアログなどで使えるボタンのスタイルが用意されています(Buttons)。

ボタンを作成するには、button 要素に btn クラスと btn-* などの色を指定するクラスを指定します。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

button 要素以外での利用

btn クラスは button 要素を使うことを前提に設定されていますが、button 要素以外に、a 要素、input 要素を使ってもボタンを作成することができます(ブラウザによっては少し表示が異なる可能性があります)。

また、a 要素を使う場合、それがリンクとしてではなく、コンテンツの開閉などボタンとしての機能であれば、role="button" を指定することが推奨されています。

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Link

アウトラインボタン

背景色のないボタン(アウトラインボタン)を作成する場合は、btn クラスと btn-outline-* の色を指定するクラスを指定します。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ボタンのサイズ

Bootstrap には以下のボタンの大きさを指定するクラスがあります。

クラス 大きさ サンプル
btn-lg 通常サイズより大きいボタン
指定なし 通常サイズ
btn-sm 通常サイズより小さいボタン
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

また、btn-block というクラスを指定すると、親要素の幅100%のブロックレベルのボタンになります。

<button type="button" class="btn btn-danger btn-sm btn-block">Block level button (btn-sm)</button>
<button type="button" class="btn btn-success btn-block">Block level button (default)</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button (btn-lg)</button>

ボタンのアクティブ化

ボタンがアクティブな時は、「暗い背景色で濃い色の枠線」になるように設定されています。ボタンの表示を強制的にアクティブにするには、active クラスを追加し、aria-pressed="true" と言う属性を追加します。

<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary active" aria-pressed="true">Active button</button>
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Active link</a>
Active link

ボタンの無効化

ボタンを無効な状態にするには、button 要素に disabled 属性(ブーリアン属性)を指定します。

<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary" disabled>Disabled button</button>

a 要素を使ったボタンの場合は、disabled 属性が使えないので、disabled クラスを指定して、見え方を変更します。また、スクリーンリーダーを利用しているユーザーへの配慮として、aria-disabled="true" 属性を追加します。

また、disabled クラスは a 要素のリンク機能を無効化するために pointer-events: none を使用していますが、この CSS プロパティはまだ標準化されていないのと、これをサポートするブラウザであっても、キーボードナビゲーションは影響を受けません。このため、そのリンクにキーボードフォーカスが移動しないように tabindex="-1" を追加します。

<a href="#" class="btn btn-primary" role="button">Default link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled link</a>
Default link Disabled link

ボタン・プラグイン

ボタンの状態を制御したり、ツールバーのようなボタングループを作成することができます(Button plugin)。

状態のトグル(切り替え)

デフォルトでは、ボタンはアクティブと非アクティブの状態を保持しません(切り替えません)が、data-toggle="button" を追加することで、状態を切り替える(トグルする)ことができます。

初期状態でアクティブにするには、active クラスを追加し、aria-pressed="true" を指定します。

以下の「Toggle 1」は非アクティブからアクティブに、「Toggle 2」はアクティブから非アクティブに状態がトグルします。

<button type="button" class="btn btn-primary">No toggle</button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle 1</button>
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">Toggle 2</button>

チェックボックスとラジオボタン

button クラスのスタイルは、label 要素にも適用することができ、その中の checkbox や radio の input 要素の状態をトグルすることができます。

そのためには、外側の要素に data-toggle="buttons" を指定し、btn-group-toggle クラスを追加します。単一のボタンや複数のボタン、またはボタングループ(btn-group クラスを指定)を作成することができます。

また、初期状態でチェックされた状態(アクティブ)にするには、label 要素に クラスを指定しておく必要があります。

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
      
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Check
  </label>
</div>
      
<!-- btn-group -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Check
  </label>
</div>

以下は、input 要素 type="radio" をグループ化した例です。type="radio" の場合、どれか1つがアクティブになります。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

これらのボタンのチェック(checked)状態は、ボタンのクリックイベントによってのみ更新されます。<input type="reset"> で入力を更新するために別の方法を使用する場合や、input 要素の checked プロパティを手動で適用する場合は、手動で label 要素の active クラスを切り替える必要があります。

以下は、上記のラジオボタンがクリックされた際に、その要素の id 名をアラート表示する例です。

$(":radio").change(function() {
  alert($(':radio:checked').attr("id"));
});

ボタングループ

ボタングループは複数のボタンをグループ化して表示する機能です。(Button group

基本的なボタングループ

以下は、基本的なボタングループです。グループ化するボタン(btn クラスを付与した button 要素)を div 要素で囲み、btn-group というクラスを指定します。

<div class="btn-group" role="group" aria-label="基本的なボタングループの例">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

アクセシビリティのために、role 属性(role="group")を指定して、ボタンのグループであることを伝えます(ツールバーの場合は role="toolbar" を指定)。

また、aria-label 属性を使ってラベルを付けています。aria-label 属性は要素に対してラベル付けをする WAI-ARIA 属性です。この例では、aria-label を使用していますが、aria-labelledby 属性を使用することもできます。

以下は、data-toggle="buttons" を指定して、クリックしたらボタンの状態を切り替えるトグルボタンの例です。

<div class="btn-group" role="group" aria-label="トグルボタングループの例" data-toggle="buttons">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

ボタンツールバー

ボタングループを更にグループ化して、ボタンツールバーを作成することができます。ボタンツールバーを作成するには、ボタングループを div 要素で囲み、その div 要素に btn-toolbar というクラスを指定します。また、ボタンツールバーの div 要素に role 属性(role="toolbar")を指定します。

必要に応じてユーティリティクラス(mr-2/右側に0.5remのマージン など)を使用して、グループ、ボタンなどの配置を調整します。

<div class="btn-toolbar" role="toolbar" aria-label="ボタングループツールバー">
  <div class="btn-group mr-2" role="group" aria-label="ボタングループ1">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="ボタングループ2">
    <button type="button" class="btn btn-success">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-danger">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="ボタングループ3">
    <button type="button" class="btn btn-warning">8</button>
  </div>
</div>

ボタングループだけでなく、インプットグループも使用することができます。以下の2つ目のツールバーでは、配置に Flex ユーティリティの justify-content-between クラスを利用しています。

また、この例では、aria-labelaria-describedby を使用しています(12行目と27行目)。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

サイズの調整

ボタングループのサイズの調整は、個々のボタンに対して指定するのではなく、ボタングループに対して以下のクラスを指定して調整することができます。

  • btn-group-lg:各ボタンを大サイズで表示
  • 指定なし:各ボタンをデフォルト(通常)のサイズで表示
  • btn-group-sm:各ボタンを小サイズで表示
<div class="btn-group btn-group-lg" role="group" aria-label="Large size example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
      
<div class="btn-group btn-group-sm" role="group" aria-label="Small size example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

ドロップダウンメニューのネスト

ボタングループ内にドロップダウンメニューを実装するには、ボタングループ(btn-group クラス)の中にボタングループをネストさせます。

通常のドロップダウンは、ドロップダウンの機能の範囲を div 要素で囲み、その要素に dropdown クラスを指定しますが、ボタングループをネストしてドロップダウンを実装する場合は、btn-group クラスを指定することになります。

この例では、aria-labelledby を指定しています (9行目)。

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

垂直ボタングループ

グループ化するボタンを囲む div 要素に btn-group-vertical というクラスを指定すると垂直方向にボタンを並べるボタングループを作成できます。但し、スプリットボタンは垂直ボタングループでは使えません。

<div class="btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop2"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div>
  </div>
</div>

フォーム

Bootstrap では用意されたクラスを指定することで簡単にフォームのスタイルやレイアウトを調整することができます。(Forms

新しい入力制御(検証など)を利用するには、適切な input 要素の type 属性(例:type="email" など)を指定する必要があります。

概要

Bootstrap のフォームの基本的な書式は以下のようなものですが、詳細はそれぞれのコントロールの項目を参照してください。

  • 入力項目のグループ(ラベルや入力欄)を form-group クラスを指定した div 要素で囲みます(フォームグループ)。ラジオボタンやチェックボックスの場合は、form-check クラスを指定します(form-group と併用もできます)。
  • input 要素などの入力欄に form-control や form-check-input などのコントロールに特有のクラスを指定します。
  • ラベルは、基本的に明示的なラベル付け(label 要素の for 属性に、コントロールの id 属性の値を指定する方法)をします。

以下は、フォームのコントロール(部品)にクラスを指定した例です。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
We'll never share your email with anyone else.

フォームコントロール

input、select、textarea 要素などのテキスト形式のコントロール(部品)は、form-control クラスを指定することで、外観やフォーカス状態、サイジングなどのスタイルが適用されます。(Form controls

select 要素のスタイルについては、カスタムフォームも参照ください。

form-control クラスには以下のようなスタイル(一部抜粋)が指定されています。

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

以下は、入力項目のグループ(ラベルや入力欄)を form-group クラスを指定した div 要素で囲み、input、select、textarea 要素に form-control クラスを指定した例です。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

ファイル入力(ファイル参照ボタン)

type="file" の input 要素の場合は、form-control の代わりに form-control-file クラスを指定します。

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>
サイズの調整

フォームコントロールの高さを変更することでサイズを調整できます。form-control-sm と form-control-lg クラスが用意されています。

.form-control-sm {
  height: calc(1.8125rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(2.875rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>
読み取り専用

input 要素を書き込みができない読み取り専用にする場合は、readonly の boolean 属性を指定します。読み取り専用入力は、(無効にした入力と同様に)薄く表示されますが、カーソルは標準のままです。

<input class="form-control" type="text" placeholder="Readonly input(読み取り専用)" readonly>

読み取り専用テキスト

input 要素を読み取り専用のテキストとして表示したい場合は、readonly の boolean 属性を指定し form-control-plaintext クラスを追加します。

グリッドシステムを使用して、ラベルの右側にフォーム部品ではなく、通常の文字列を配置したい場合(水平フォーム)やインラインフォームなどに使用すると、パディングやマージンが調整されてレイアウトを保持することができます。

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

以下は、インラインフォームを使用する場合の例です。

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

※このサイトの場合、サイトのスタイルが bootstrap のスタイルに影響を与えてしまい、インラインフォームで form-control-plaintext クラスを指定すると、幅が広がってしまうため、以下のように style="max-width:160px;" を指定して問題を回避しています。(Chrome では問題なく表示されますが、原因は特定できていません。Flexbox 関連?)

<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com" style="max-width:160px;">

以下は、Bootstrap のスタイルのみを使用しているページを iframe で読み込んでいる例ですが、こちらは問題がないため、上記の現象はこのサイト特有の問題と思われます。

横一列で表示するには、以下のようにグリッドを使う方法もあります。

<form>
  <div class="form-group row">
    <label for="staticEmail" class="sr-only">Email</label>
    <div class="col-sm-4">
      <input type="text" readonly class="form-control-plaintext" id="staticEmailx" value="email@example.com">
    </div>
    <label for="inputPassword" class="sr-only">Password</label>
    <div class="col-sm-4">
      <input type="password" class="form-control" id="inputPasswordx" placeholder="Password">
    </div>
    <div class="col-sm-4">
    <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
    </div>
  </div>
</form>

レンジ入力

input 要素の type="range"(レンジ入力)には form-control-range クラスを使用します。(Range Inputs

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

チェックボックスとラジオボタン

チェックボックスとラジオボタンは、form-check クラスを指定した div 要素で囲み、input 要素に form-check-input クラスを、label 要素に form-check-label クラスを指定します。

無効化するには、disabled 属性を指定します。disabled 属性を指定すると、文字列は薄い色で表示され、選択することができなくなります。

HTMLベースのフォーム検証をサポートするには、明示的なラベル付け(コントロールを label 要素で囲む方法ではなく、label 要素の for 属性に、コントロールの id 属性の値を指定する方法)をします。

デフォルトの表示

デフォルトでは、チェックボックスとラジオボタンの直接の兄弟要素は垂直方向に配置され、form-check クラスを指定することで、適切な間隔を確保します。

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

インライン表示

選択肢を横に並べて表示(インライン表示)するには、form-check と form-check-inline クラスを div 要素に指定します。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ラベルなし

ラベルなしのチェックボックスとラジオボタンを作成する場合は、input 要素に form-check-input と position-static クラスを指定します。スクリーンリーダーなどの支援技術への配慮として、何らかの方法(aria-label 属性など)でラベルを付けるようにします。

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

レイアウト

Bootstrap のほとんどのフォームコントロールには、display: block と width: 100% が指定されているので、垂直方向に配置されます。追加でクラスを指定することで、レイアウトを変更することができます。

フォームグループ

form-group クラスは、ラベル、コントロール、オプションのヘルプテキスト、フォーム検証メッセージなどをグループ化する際に利用できます。

デフォルトでは margin-bottom のみが適用されますが、form-inline クラスと併用する際は、追加のスタイルが適用されます。fieldset や div 要素などほぼすべての要素とともに使用することができます。

form-group クラスには以下が設定されています。

.form-group {
  margin-bottom: 1rem;
}

/*インライン・フォーム*/
@media (min-width: 576px) {
  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
}
<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>
フォームグリッド

グリッドクラスを使用することで、複数カラムなどのより複雑なレイアウトを作成することができます。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Form row(フォーム用の行)

グリッドのデフォルトの行のクラス(row)の代わりに、フォーム用の行のクラス(form-row)を指定することで、よりコンパクトな(ガターの値を小さくした)レイアウトにすることができます。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

以下はグリッドと form-row を使用したより複雑なレイアウトの例です。

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

水平フォーム(Horizontal form)

水平フォームを作成するには、フォームグループ(form-group クラスを指定した div や fieldset 要素)に row クラスを追加してグリッドを使い、col-*-* クラスをラベル(label や legend 要素)とコントロールに追加して幅を指定します。

また、水平フォームの場合、ラベルには col-form-label クラスを追加して垂直方向の位置を調整します。

場合によっては、マージンやパディングのユーティリティクラスを使って位置を調整する必要があるかも知れません。以下の例では、pt-0 クラスを指定してラジオボタンのラベル(legend 要素)の padding-top を削除しています。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>  
Radios
Checkbox

水平フォームにおけるラベルサイズ

水平フォームのラベルのサイズは、col-form-label-sm または col-form-label-lg クラスを label や legend 要素に指定し、コントロールのサイズ(form-control-sm と form-control-lg)に合わせます。

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

列の幅(サイズ)

グリッドシステムでは、行(.row または .form-row)の中に任意の数の列(.col)を配置することができ、.col はその中で均等な幅で分割されます。また、.col-* で幅を指定して、残りの部分を .col で分割することもできます。以下は1つのコントロールを col-7 で幅を指定して、残りを均等に分割する例です。

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

列の自動サイズ設定

以下は、Flexbox ユーティリティを使って垂直方向に中央配置し(.align-items-center)、col-auto クラスを使ってコンテンツに合わせて幅を自動設定しています。col-auto クラスを使うと、列の幅がコンテンツに合わせて自動的に調整されます。

input-group-* はインプットグループを参照ください。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>
@

※このサイトの場合、サイトのスタイルが bootstrap のスタイルに影響を与えてしまい、input 要素の幅が広がってしまうため、以下のように style="max-width:180px;" を指定して問題を回避しています。(Chrome では問題なく表示されますが、原因は特定できていません。)

<div class="col-auto">
  <label class="sr-only" for="inlineFormInput">Name</label>
  <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe" style="max-width:180px;">
</div>
<div class="col-auto">
  <label class="sr-only" for="inlineFormInputGroup">Username</label>
  <div class="input-group mb-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username" style="max-width:180px;">
  </div>
</div>

Bootstrap のスタイルのみを使用しているサンプル

以下のようにサイズを指定した列と自動幅の列を併用することもできます。

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
@

カスタムフォームも使用できます。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
インラインフォーム

ラベルやコントロール、ボタンを1行に表示するインラインフォームを作成するには、form-inline クラスを指定します。インラインフォームのコントロールは通常のコントロールと以下のような違いがあります。

  • コントロールは、 display:flex が適用されていて、SpacingFlexbox ユーティリティで配置を調整することができます。
  • コントロールとインプットグループには、デフォルトの width: 100% に代わり width: auto が適用されています。
  • コントロールは、幅 576px 以上のビューポートでのみ横並びで表示されます。

場合によっては、幅や配置をユーティリティなどのクラスを使って追加で指定する必要があるかも知れません。また、ラベルを非表示にする場合でも、スクリーンリーダーなどの利用者のために sr-only クラスを使用して必ずラベルを付けるようにします。

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
@

※このサイトの場合、サイトのスタイルが bootstrap のスタイルに影響を与えてしまい、input 要素の幅が広がってしまうため、以下のように style="max-width:180px;" を指定して問題を回避しています。(Chrome では問題なく表示されますが、原因は特定できていません。)

<form class="form-inline">           
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe" style="max-width:180px;">
  
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username" style="max-width:180px;">
  </div>
  
  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>
  
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form

カスタムフォームも使用できます。

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

ラベルの実装方法

すべての入力要素にラベルを付けないと、スクリーンリーダーなどの支援技術を利用するユーザーにとっては問題が生じてしまいます。インラインフォームでは、sr-only クラスを使用してラベルを非表示にすることができます。

別の方法としては、aria-label, aria-labelledby, title 属性などで支援技術にラベルを提供することができます。これらのいずれもが存在しない場合は、支援技術(Assistive technologies)は placeholder 属性の値を利用することもありますが、前述の他の方法の代替として placeholder 属性を使ってのラベルの提供は推奨されていません。

ヘルプテキスト

form-text クラスを指定して、ブロックレベルのヘルプテキストを作成することができます。インラインのヘルプテキストは、HTML インライン要素を使って text-muted などのクラスを指定して柔軟に作成することが可能です。(Help text

form-text 及び text-muted クラスには以下が設定されています。

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.text-muted {
  color: #6c757d !important;
}

コントロールとヘルプテキストの関連付け

ヘルプテキストは、対象となるコントロールと aria-describedby 属性を使用して関連付けされるようにします。それにより、ユーザーがコントロールにフォーカスを当てたり入力したりしたときに、スクリーンリーダーなどの支援技術により、このヘルプテキストが伝えられるようになります。

以下のヘルプテキストは、form-text により、display: block が適用され、input 要素との間に適切なスペースが設けられます。また、ヘルプテキストの id 属性をコントロールの aria-describedby 属性に指定して関連付けをしています。

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

インラインのヘルプテキストは、small や span 要素などを使って作成することができます。

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>
Must be 8-20 characters long.

無効(disabled)の指定

コントロールを無効にしてユーザーが操作できないようにするには、コントロールの要素に disabled の boolean 属性を指定します。disabled を指定した要素は薄いグレーの表示になります。(Disabled forms

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

fieldset への無効(disabled)の指定

fieldset 要素に disabled クラスを指定すると、その fieldset 要素内の全てのコントロールを無効(操作できないよう)にすることができます。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

a 要素を使う場合の注意

ブラウザは <fieldset disabled> 内の全てのフォームコントロール(input、select、button 要素)を無効として扱い、キーボードとマウスの両方の操作を防止しますが、フォームに <a ... class="btn btn-*"> 要素が含まれている場合、それらの要素には pointer-events: none のスタイルしか適用されません。ボタンの無効化で説明しているように、この CSS プロパティはまだ標準化されておらず、IE 10では完全にサポートされていないため、ユーザーがキーボードからリンクにフォーカスすることを防ぐことができません。

ブラウザの互換性

IE11以下では fieldset 要素 の disabled 属性を完全にサポートしていません。

検証(Validation)

HTML5 のフォーム検証機能を使用して、フィードバックをユーザーに提供することができます。ブラウザのデフォルト検証機能か、form 要素に novalidate 属性を指定して Bootstrap の組込クラスと JavaScript を使用したカスタム検証機能を選択することができます(Validation)。

現時点(2018年)では、ブラウザのデフォルトの検証機能は一貫していないため、カスタム検証機能の使用が推奨されています。

Bootstrap の検証機能

以下は、Bootstrap のフォーム検証がどのように機能するかの概要です。

  • input、select、textarea 要素に対して CSS の2つの疑似クラス、:invalid と :valid を適用します。
  • Bootstrap は、:invalid と :valid のスタイルを親(通常は form 要素)の .was-validated クラスに適用し、ページのロード時に値のない必須フィールド(入力項目)が無効と表示されないようにしています。このようにすることで、無効の表示をアクティブにするタイミングを選択することが可能になります(通常はフォームの送信が実行された後)。
  • フォームの外観(表示)をリセットするため、フォームの送信後に .was-validated クラスを form 要素から削除します。(was-validated クラスを form 要素に指定すると、:invalid と :valid のスタイルが表示されます)
  • フォールバックとしてサーバーサイドの検証用に擬似クラスの代わりに .is-invalid と .is-valid クラスを使えます。その場合、.was-validated クラスは必要ありません。
  • CSS の仕様上、カスタム JavaScript を使わずに、コントロール要素の前に記述されている label 要素にスタイルを適用できません。
  • 全ての最新ブラウザは、フォームコントロールを検証する一連の JavaScript メソッドの検証 API(constraint validation API) をサポートしています。
  • フィードバックメッセージは、ブラウザのデフォルト(各ブラウザごとに異なり、CSS 経由では変更できない)や追加の HTML と CSS を使用した Bootstrap のカスタムフィードバックスタイルを利用できます。
  • JavaScript の setCustomValidity を使用して独自の検証メッセージを提供することができます。
カスタム検証機能

Bootstrap のカスタム検証機能を使用するには、form 要素に novalidate 属性を指定します。この指定によりブラウザのデフォルトの検証機能を無効にします(但し、JavaScript のフォーム検証 API にはアクセスできます)。

以下のフォームに入力して送信することで、Bootstrap のカスタム検証機能のフィードバックや :invalid や :valid のスタイルを確認することができます。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

上記及びこの章のサンプルの場合、全ての項目に入力してボタンをクリックすると、一度ページの先頭に移動後、しばらくすると元の位置に戻るようにしています。(関連ページ:submitした時の位置を保持

以下が、上記フォームの HTML と JavaScript です。

  • form 要素に needs-validation クラスと novalidate 属性を指定します。
  • 入力が有効(:valid)な場合に表示するフィードバックには valid-feedback クラスを指定します。
  • 入力が無効(:invalid)な場合に表示するフィードバックには invalid-feedback クラスを指定します。
  • 以下の JavaScript を記述します。
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// JavaScript の記述例(入力が無効な場合は送信をブロック)
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
デフォルトの検証機能

前述の JavaScript を使用した Bootstrap のカスタム検証機能を使用したくない場合は、ブラウザのデフォルトの検証機能を使用することができますが、ブラウザや OS によりフィードバックの表示が異なります(検証用のクラスや JavaScript は記述する必要はありません)。

これらのフィードバックのスタイルは CSS でスタイルを適用することはできませんが、JavaScript を使用してフィードバックテキストをカスタマイズすることは可能です。

以下のフォームに入力して送信することで、ブラウザのデフォルトの検証機能(フィードバック)を確認することができます。

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

以下のように、フィードバック用テキストを input 要素の後に記述しておいて、入力時にフィードバックを表示することもできます。

メールアドレスが正しくありません。 正しいメールアドレスです。

<form>
  <div class="form-group row">
    <label for="inputEmail4x" class="col-sm-1 col-form-label">Email</label>
    <div class="col-sm-11">
      <input type="email" class="form-control" id="inputEmail4x" placeholder="Email" required>
      <p> 
        <span class="invalid">メールアドレスが正しくありません。</span> 
        <span class="valid">正しいメールアドレスです。</span> 
      </p>
    </div>
  </div>
</form>

CSS の、:focus、:required、:valid 擬似クラスを利用します。(関連ページ:フォームの検証

input + p .invalid { 
  display: none; 
}
input + p .valid { 
  display: none; 
}      
input:focus:required:valid {
  background-color:#CDFAD1;
}
input:focus:required:invalid {
  background-color:#F1BDBE;
}
input:focus:required:valid + p .valid { 
  display: inline-block;
  margin-top:0.25rem;
  color: #1BB006;
  font-size: 0.85rem;
}
input:focus:required:invalid + p .invalid { 
  display:inline-block;
  margin-top:0.25rem;
  color: #CB2629;
  font-size: 0.85rem;
}   
サーバーサイドの検証

サーバーサイドの検証を行う場合は、無効と有効をそれぞれ示す is-invalid と is-valid クラスを使用することができます。また、これらのクラスと共に invalid-feedback クラスもサポートされています。サーバーサイドの検証の際にこれらのクラスを使用します。その場合、was-validated クラスを form 要素に指定する必要はありません(Server side

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form> 
サポートされる要素

カスタムフォームを使ったコントロールの要素でも、同様に検証のスタイルを使用することができます。

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
<form class="needs-validation" novalidate>
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>
  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
  <div class="mt-3">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
ツールチップで表示

検証のフィードバックをツールチップで表示することができます。ツールチップで表示するには、{valid|invalid}-feedback クラスを {valid|invalid}-tooltip で置き換えます。

フィードバックを表示する要素の親要素は、フィードバックをツールチップ表示するために position: relative が指定されている必要があります。以下の例の場合は、すでにそのようになっています。

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

カスタムフォーム

ブラウザのデフォルトのコントロールの代わりに、Bootstrap のカスタムフォームコントロールを使用することもできます。(Custom forms

チェックボックスとラジオボタン

カスタムフォームのチェックボックスとラジオボタンは、div 要素で囲み label 要素でテキスト(ラベル)を表示します。構造的には、Bootstrap のデフォルトの form-check クラスと同じです。

:checked などの input 要素の状態を表すスタイルを適用するために、間接セレクタ「~(チルダ)」を利用しています。custom-control-label クラスを使用すると、input 要素の状態に基づいてテキスト(ラベル)にもスタイルを適用します。

カスタムフォームでは、デフォルトの input 要素は opacity で非表示にし、custom-control-label クラスで、::before と ::after を利用してカスタムフォームの表示を行っています。

チェック状態の表示では、Open Iconic の base64 SVG アイコンを使用しています。これにより、各ブラウザやデバイス間で最適なスタイルと配置が可能になっています。

以下は、bootstrap.css の一部抜粋です。

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #007bff;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");

以下はチェックボックスの例です。div 要素に custom-control と custom-checkbox クラスを指定し、type="checkbox" を指定した input 要素に custom-control-input を、label 要素に custom-control-label クラスを指定します。

<!--カスタムチェックボックス-->
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" value="" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>       

<!--デフォルトチェックボックス-->
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="defaultCheck1x">
  <label class="form-check-label" for="defaultCheck1x">Default checkbox</label>
</div>
You must agree before submitting.

:indeterminate 擬似クラス

カスタムチェックボックスでは、 JavaScript を使えば :indeterminate 擬似クラスを利用することができます。

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>

$(function () {
  $('#customCheck2').prop('indeterminate', true);
})

以下はラジオボタンの例です。div 要素に custom-control と custom-radio クラスを指定し、type="radio" を指定した input 要素に custom-control-input を、label 要素に custom-control-label クラスを指定します。

<!--カスタムラジオボタン-->
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Second Custom radio</label>
</div>
        
  <!--デフォルトラジオボタン-->
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1x" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1x">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2x" value="option2">
  <label class="form-check-label" for="exampleRadios2x">Second default radio</label>
</div>

以下はインラインのカスタムラジオボタンの例です。div 要素に custom-control-inline クラスを指定します。

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

無効化(disabled)の指定

input 要素に disabled ブーリアン属性(論理属性)を指定することで、カスタムチェックボックス及びカスタムラジオボタンを無効にすることができます。

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

セレクトメニュー

カスタムセレクトメニューを使用するには、custom-select クラスを指定するだけです。セレクトメニューの場合、カスタムスタイルは初期状態の外観のみで、option 要素の外観を変更することはできません(ブラウザの制限)。

また、custom-select-lg や custom-select-sm クラスを指定することで、文字のサイズを変更することができます。

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

このサイトの場合、使用している CSS の影響で(何らかの理由で)カスタムセレクトメニューがうまく表示されません(Firefox では通常のセレクトメニューの外観になってしまい、Chrome でも右側のアイコンがきれいに表示されない)。Firefox の場合、-webkit-appearance:none; をインラインのスタイルで指定すると期待通りに表示されます。このサイトの CSS を使用しない場合は、問題なく表示されます。そのためこのサイトの場合、以下のようにインラインで appearance:none を指定をして問題を回避しています。

<select class="custom-select" style="appearance:none;-webkit-appearance:none;-moz-appearance:none;">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

multiple 属性や size 属性もサポートされています。

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

レンジ入力

<input type="range"> に custom-range クラスを指定すると、カスタムレンジ入力を表示できます。

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

数値の範囲は min 属性と max 属性で指定しますが、値を省略した場合はデフォルト値である「0」と「100」が設定されます。また、step 属性を使って数値の刻みを指定できます。

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

ファイル選択

type="file" の input 要素に custom-file-input クラスを指定し、label 要素に custom-file-label クラスを指定し、custom-file クラスを指定した div 要素で囲むとファイル選択用のカスタムコントロールを表示できます。

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

このカスタムコントロールは、input 要素を opacity で非表示にし、label 要素にスタイル付けしています。以下は bootstrap.css からの抜粋です。

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(2.25rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(2.25rem + 2px);
  margin: 0;
  opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-file-input:focus ~ .custom-file-label::after {
  border-color: #80bdff;
}
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: 1px solid #ced4da;
  border-radius: 0 0.25rem 0.25rem 0;
}

ファイル選択のカスタムコントロールの場合、選択されたファイル名が表示されません。JavaScritp (jQuery) を使って、選択されたファイルを表示するようにすると良いかもしれません。(関連ページ:input type="file" の値の取得

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileMultiple" multiple>
  <label class="custom-file-label" for="customFileMultiple">ファイルを選択(複数可)</label>
  <p class="form-control-plaintext">選択されたファイル:<span id="selectedFiles" ></span></p>
</div>
$("#customFileMultiple").on("change", function() {
  var files = document.getElementById("customFileMultiple").files;
  var file_list = "";
  for(var i=0; i<files.length; i++){
    if(i !== files.length - 1) {
      file_list += files[i].name + ", " ;
    }else {
      file_list += files[i].name ;
    }
  }
  document.getElementById("selectedFiles").innerHTML = file_list;
})

選択されたファイル:

「Browse」の文字列の翻訳

:lang() 疑似クラスを使って「Browse」の文字列を他の言語の文字で表示することができます。以下は Sass 変数を使って日本語の翻訳を追加する例です。

$custom-file-text: (
  en: "Browse",
  ja: "参照"
);

日本語(言語)を正しく表示させるには、html 要素の lang 属性を正しく指定する必要があります。以下は日本語の場合の例です。

<html lang="ja">

インプットグループ

インプットグループを使うと、テキスト入力欄やカスタムセレクトメニューカスタムファイル入力の左右どちらにでもテキストやチェックボックス、ラジオボタンなどのアドオン(add-on)を配置することができます。(Input group

アクセシビリティ

スクリーンリーダーを利用している場合、フォームの全ての入力要素にラベルが付いていないと問題が生じてしまいます。インプットグループを使う場合でも、必要に応じてラベルを追加して支援技術(assistive technologies)に伝えられるようにする必要があります。

どのような方法(sr-only クラスの使用や aria-label や aria-labelledby、aria-describedby 属性の使用など)を使うかやどのような追加情報(のラベル)が必要かは、実装するフォームの内容によって異なります。以下のサンプルでは、いくつかの方法を提示しています。(Accessibility

基本的な使い方(テキストのアドオン)

  • 全体を input-group クラスを指定した div 要素で囲みます。
  • アドオンは、テキストを記述した span 要素に input-group-text クラス指定し、input 要素の説明的な目的で使用する場合は id 属性を指定しておきます。
  • アドオンを左側に配置する場合は、input-group-prepend クラスを指定した div 要素で囲み、右側に配置する場合は、input-group-append クラスを指定した div 要素で囲みます(左に配置する場合は、input 要素より先に記述し、右側に配置する場合は、input 要素より後に記述します)。
  • form-control クラスを指定したテキスト入力欄(input 要素)を記述します。必要に応じ aria-label 属性を指定したり、aria-describedby 属性を指定してアドオンに指定した id の値を設定します。
  • label 要素を配置する場合は、input-group クラスを指定した div 要素の外側に配置する必要があります。

おそらく、サンプルを見たほうがわかり易いと思います。

<!--アドオンを左側に配置-->
<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="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<!--アドオンを右側に配置-->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<!--ラベルは input-group の外側に配置-->
<label for="basic-url">Your vanity 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 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <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">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div> 
@
@example.com
https://example.com/users/
$
.00
With textarea

サイズの調整

input-group クラスを指定した div 要素に input-group-sm または input-group-lg クラスを追加することでインプットグループ内の要素のサイズを自動的に調整することができます。

個々の要素に対してのサイズの調整はできません。

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
Small
Default
Large

チェックボックスとラジオボタン

テキスト(span 要素)の代わりに、チェックボックスとラジオボタン(input 要素)を配置することもできます。この場合、input 要素を input-group-prepend クラスを指定した div 要素で囲みます。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

複数の input 要素の配置

インプットグループ内に複数の input 要素を配置することができますが、検証の際のスタイルは1つの input 要素に対してのみサポートされています。

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>
First and last name

複数アドオンの配置

複数のアドオンを並べて配置することができます。チェックボックスやラジオボタンと組み合わせて配置することも可能です。

<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="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>
      
<div class="input-group mt-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for Email subscription">
    </div>
    <span class="input-group-text">Email</span>
  </div>
  <input type="email" class="form-control" aria-label="Email address (if you like to subscribe)" placeholder="foo@example.com">
</div>
$ 0.00
$ 0.00
Email

ボタンアドオン

インプットグループにボタンを配置することもできます。btn や btn-* クラスを指定した button 要素を input-group-prepend や input-group-append を指定した div 要素で囲みます。(Button addons

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

ドロップダウンボタンの配置

ドロップダウンボタンを配置することもできます。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

スプリットボタンも同様に配置することができます。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-info">Action</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

カスタムフォームの利用

インプットグループでは、カスタムフォームのセレクトメニューカスタムファイル入力を使用することができます。但し、ブラウザのデフォルトのセレクトメニュー、ファイル入力はサポートされていません。(Custom forms

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

以下はボタンと使用する例です。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button">Button</button>
  </div>
</div>

カスタムファイル入力

以下は、カスタムファイル入力を使用する例です。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>
Upload
Upload

以下は、ボタンと組み合わせて使う例です。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-success" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-warning" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

リストグループ

リストグループは様々なコンテンツを柔軟に表示することができるコンポーネントです。(List group

基本的な使い方の例

最も基本的な使い方は、ul 要素に list-group クラスを指定して、各 li 要素に list-group-item クラスを指定します。以下で解説するオプションを使用したり、独自に CSS でスタイル付けすることもできます。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

リストの項目をアクティブな表示にするには、active クラスを追加すると青い背景色が付き、無効な表示にするには、disabled クラスを追加すると文字が薄く表示されます。

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio (Active)</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item disabled">Porta ac consectetur (Disabled)</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • Cras justo odio (Active)
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur (Disabled)
  • Vestibulum at eros

Flush(枠なし)

list-group-flush クラスを追加すると、一部の枠線と角丸を削除します。

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

背景色

リスト項目(list-group-item クラスの要素)に list-group-item-success 等のコンテクスチュアルカラーのクラスを指定することで、背景色をつけることができます。(Contextual classes

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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>
  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

list-group-item-action を指定したインタラクティブな要素にもコンテクスチュアルカラーのクラスを指定することができ、ホバー時の状態などを表現できます。また、active クラスを指定することで、アクティブな表示にすることも可能です。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>

バッジの挿入

リストグループの項目に未読数などの数値(カウント)や小さなラベルを表示するバッジを挿入することができます。(With badges

以下の例では、Flexbox のユーティリティを使ってテキストとバッジを両端に並べ、垂直方向に中央揃えで配置しています。

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul> 
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

カスタムコンテンツ

リストグループには、ほぼどのような HTML でも挿入することができます。(Custom content)必要に応じてFlexbox のユーティリティなどのユーティリティクラスを使用することができます。(Custom content

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

JavaScript

Bootstrap の JavaScript を読み込んでいれば、タブパネルの機能を使用することができます。(JavaScript behavior

以下は、グリッドシステム(col-*)を使ってタブリスト(role="tablist" を指定したリストグループ)とタブパネル(role="tabpanel" の div 要素)を分割しています。リストの項目(タブ部分)には role="tab" を指定しています。また、タブとなる要素とパネルの要素は因果関係にあるため、 これらの関係を示す aria-controls 属性を指定しています

<div class="row">
  <!-- List group -->
  <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-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-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-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-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <!-- Tab panes -->
  <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">List Home のコンテンツ...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">List Profile のコンテンツ...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">List Message のコンテンツ...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">List Settings のコンテンツ...</div>
    </div>
  </div>
</div>

タブパネルの機能を使用するには、list-group-item クラスを指定した要素に data-toggle="list" を指定する必要があります(JavaScript を記述する必要はありません)。 ※ スムーズスクロールなどの a 要素に対する JavaScritp を利用している場合は、競合する可能性があります。

以下は、aria-* 属性などを省略した例です。

リスト項目の href 属性にはパネルの id 属性の値を指定します。それぞれのタブには、tab-pane クラスを指定し、初期状態で表示する要素には show クラスを指定します。また、フェードインで表示するには、fade クラスを指定します。

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

<!-- Tab panes -->
<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>

イベント

新しいタブを表示する際は、以下の順番でイベントが発火します。

  1. hide.bs.tab (現在のアクティブなタブ)
  2. show.bs.tab (次に表示されるタブ)
  3. hidden.bs.tab (直前にアクティブだったタブ。hide.bs.tab が発火したタブ)
  4. shown.bs.tab (新しくアクティブになったタブ。show.bs.tab が発火したタブ)

アクティブなタブが存在しない場合は、hide.bs.tab と hidden.bs.tab イベントは発火しません。

タブのイベント
イベントタイプ 説明
show.bs.tab このイベントはタブの表示(tab show)で発火され、但し新しいタブが表示される前に発火します。 event.target でアクティブなタブを、event.relatedTarget で直前にアクティブだったタブを対象(ターゲット)とすることができます。
shown.bs.tab このイベントはタブが表示された後に発火します。event.target で新たにアクティブになったタブを、event.relatedTarget で直前にアクティブだったタブを対象(ターゲット)とすることができます。
hide.bs.tab このイベントは新しいタブが表示されようとする(今までのタブが非表示になる)際に発火します。event.target で現在のアクティブなタブを、event.relatedTarget でこれからアクティブになるタブを対象(ターゲット)とすることができます。
hidden.bs.tab このイベントは新しいタブが表示された(今までのタブが非表示になった)直後に発火します。event.target で直前にアクティブだったタブを、event.relatedTarget でアクティブになったタブを対象(ターゲット)とすることができます。

以下のような使い方をします。

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab(新たにアクティブになったタブ)
  e.relatedTarget // previous active tab(直前にアクティブだったタブ)
})