bootstrap4.css
.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
bootstrap4.css
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}
■ドロップダウン: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-row form-group col-md-6

  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail">メールアドレス</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力"> </div>
      <div class="form-group col-md-6">
        <label for="inputPassword">パスワード</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力"> </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputState">国</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">郵便番号</label>
        <input type="text" class="form-control" id="inputZip"> </div>
      <div class="form-group col-md-6">
        <label for="inputCity">都道府県</label>
        <input type="text" class="form-control" id="inputCity"> </div>
    </div>
    <div class="form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村"> </div>
    <div class="form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名"> </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check">
        <label class="form-check-label" for="check">チェックする</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</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>