フォームごとにこのレイアウトを変更するには, 追加のクラスを使用できます。, .form-group はフォームに構造体を適用できます。ラベル, コントロール, オプションのヘルプテキスト, フォーム検証メッセージを提供しています。 Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. フォームを利用する場合の基本的な使い方としては、フォーム部品(input、textarea、select)にform-controlクラスを追加し、外側をform-groupクラスをつけたdivタグで囲む形になります。, ラベルとフォーム部品を横並びにするためには、グリッドシステムのrow、col-{prefix}-{数字}を利用します(※)。, フォーム部品を全て横並びにする場合は、form要素にform-inlineクラスを追加します(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。), ■(参考)form-inlineクラス(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。), インプットフォームの大きさを設定するには、form-controlクラスに加えて、form-control-{sm | lg}を追記します。, ここでは、チェックボックスとラジオボタンの使用例をご紹介します。input要素のtypeがcheckboxやradioの場合は、form-controlの代わりにform-check-inputを利用します。, form-checkクラスとform-check-labelクラスも、レイアウトを微調整するために用意されているBootstrap4のクラスです。必要に応じて組み合わせて使いましょう。, form-checkクラスに加えてform-check-inlineクラスを追加すると、チェックボックスやラジオボタンを横並びにすることができます。, ■参考)form-check-inlineクラスのCSS。display:flex-inlineが設定されます。, ここでは割愛しますが、このほかにも色々な使い方があります。詳しくは下記の公式サイトをご覧ください。 フィードバックのスタイルはCSSでスタイルすることはできません。JavaScriptを使用してフィードバックテキストをカスタマイズすることは可能です。, クライアント側で検証をすることを推奨します。サーバー側の検証が必要な場合は無効や有効なフォームフィールドを .is-invalid と .is-valid で指定可能です。 .invalid-feedback もサポートされます。, サンプルフォームは, 上記のテキストの を示しているがフォームの検証スタイルは