■ドロップダウン:dropdown-menu:js:自動サイズ調整のカラムを作成する col-auto

@
  <form>
    <div class="form-row align-items-center">
      <div class="col-auto">
        <label class="sr-only" for="inputName">氏名</label>
        <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
      </div>
      <div class="col-auto">
        <label class="sr-only" for="inputUsername">ユーザーネーム</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="inputUsername" placeholder="ユーザーネームを入力">
        </div>
      </div>
      <div class="col-auto">
        <div class="form-check mb-2">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> チェックする </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-2">送信</button>
      </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:カスタムフォームのチェックボックスとラジオボタンを無効にする

  <form>
    <!-- チェックボックスを無効にする -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="checkbox11" disabled>
      <label class="custom-control-label" for="checkbox11">
        チェック(無効)
      </label>
    </div>
    <!-- ラジオボタンを無効にする -->
    <div class="custom-control custom-radio">
      <input type="radio" name="radioDisabled" id="checkbox12" class="custom-control-input" disabled>
      <label class="custom-control-label" for="checkbox12">
        オプション(無効)
      </label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:カスタムフォームのチェックボックスとラジオボタンを作成する

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox13">
      <label class="custom-control-label" for="checkbox13">チェックする</label>
    </div>
    <!-- カスタムフォームのラジオボタン -->
    <div class="custom-control custom-radio">
      <input type="radio" id="option1" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option1">オプション1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="option2" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option2">オプション2</label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:水平配置のフォームを作成する

ラジオボタン
チェックボックス
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
            <label class="form-check-label" for="radios1">
              オプション1
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
            <label class="form-check-label" for="radios2">
              オプション2
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
            <label class="form-check-label" for="radios3">
              オプション3(無効)
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">チェックボックス</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="check1">
          <label class="form-check-label" for="check1">
            チェックする
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">サインイン</button>
      </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:インラインのフォームを作成する

@
  <form class="form-inline">
    <label class="sr-only" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="sr-only" for="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="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">
        チェックする
      </label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>
■フォーム:form-group:コンポーネント:サーバー側で入力検証を行う場合のフィードバック例

市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer01">姓</label>
        <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="山田" required> </div>
      <div class="col-md-6 mb-3">
        <label for="validationServer02">名</label>
        <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎" required> </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">市町村</label>
        <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">市町村名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">都道府県</label>
        <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">都道府県名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">郵便番号</label>
        <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">郵便番号を入力してください</div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
■フォーム:form-group:コンポーネント:Bootstrap フォームバリデーション(入力検証機能) needs-validation

入力済!
入力済!
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
    <form class="needs-validation" novalidate>
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validation01">姓</label>
          <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
          <div class="valid-feedback">
            入力済!
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="validation02">名</label>
          <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
          <div class="valid-feedback">
            入力済!
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validation03">市町村</label>
          <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
          <div class="invalid-feedback">
            市町村名を入力してください
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validation04">都道府県</label>
          <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
          <div class="invalid-feedback">
            都道府県名を入力してください
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validation05">郵便番号</label>
          <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
          <div class="invalid-feedback">
            郵便番号を入力してください
          </div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">送信する</button>
    </form>
  
  
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        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>
  
  
  
  
■フォーム:form-group:コンポーネント:フォームツールチップ:valid-tooltip:JS

入力済!
入力済!
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
    <form class="needs-validation" novalidate>
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validation01">姓</label>
          <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
          <div class="valid-tooltip">          入力済!        </div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="validation02">名</label>
          <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
          <div class="valid-tooltip">          入力済!        </div>
        </div>
      </div>
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validation03">市町村</label>
          <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
          <div class="invalid-tooltip">          市町村名を入力してください        </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validation04">都道府県</label>
          <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
          <div class="invalid-tooltip">          都道府県名を入力してください        </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="validation05">郵便番号</label>
          <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
          <div class="invalid-tooltip">          郵便番号を入力してください        </div>
        </div>
      </div>
      <button class="btn btn-primary" type="submit">送信する</button>
    </form>
  
  
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        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>