form-select-sm

bootstrap5.css

bootstrap5.css
.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 1.75rem;
}

html bootstrap5 Sample

フォームタイトルのアイコン、水平レイアウト：rowとcolとfa-shopping-basket

formタイトルにfont-awesome 

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowとcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

読み取りテキストを、枠を非表示にする：form-control-plaintext

  <form>
    <!-- divにrowを設定して、labelとdivにcolを設定する -->
    <div class="mb-3 row">
      <label for="staticEmail" class="col-sm-4 col-form-label">メールアドレス</label>
      <div class="col-sm-8">
        <!-- inputの枠を表示しない -->
        <input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="inputPassword" class="col-sm-4 col-form-label">パスワード</label>
      <div class="col-sm-8">
        <!-- typeにpasswordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

入力コントロールのサイズを調整する：-lgと-sm

  <form>
    <!-- 大サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input1">大サイズのテキスト入力欄　form-control-lg</label>
      <input type="text" class="form-control form-control-lg" id="input1" placeholder="form-control-lg">
    </div>
    <!-- 標準サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input2">標準サイズのテキスト入力欄</label>
      <input type="text" class="form-control" id="input2" placeholder="Default size">
    </div>
    <!-- 小サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input3">小サイズのテキスト入力欄　form-control-sm</label>
      <input type="text" class="form-control form-control-sm" id="input3" placeholder="form-control-sm">
    </div>
    <hr>
    <!-- 大サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select1">大サイズのプルダウンメニュー　form-select-lg</label>
      <select class="form-select form-select-lg" id="select1">
        <option>form-control-lg</option>
      </select>
    </div>
    <!-- 標準サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select2">標準サイズのプルダウンメニュー</label>
      <select class="form-select" id="select2">
        <option>Default size</option>
      </select>
    </div>
    <!-- 小サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select3">小サイズのプルダウンメニュー　form-select-sm</label>
      <select class="form-select form-select-sm" id="select3">
        <option>form-control-sm</option>
      </select>
    </div>
  </form>

フォームのファイル選択：file

  <div class="mb-3">
    <label for="formFile" class="form-label">Default サンプル</label>
    <input class="form-control" type="file" id="formFile" />
  </div>
  <div class="mb-3">
    <label for="formFileMultiple" class="form-label">複数ファイル選択可　multiple</label>
    <input class="form-control" type="file" id="formFileMultiple" multiple />
  </div>
  <div class="mb-3">
    <label for="formFileSm" class="form-label">Small サンプル</label>
    <input class="form-control form-control-sm" id="formFileSm" type="file" />
  </div>
  <div>
    <label for="formFileLg" class="form-label">Large サンプル</label>
    <input class="form-control form-control-lg" id="formFileLg" type="file" />
  </div>
  <div class="mb-3">
    <label for="formFileDisabled" class="form-label">ファイル選択不可</label>
    <input class="form-control" type="file" id="formFileDisabled" disabled />
  </div>

プルダウンメニュー 小：form-select-sm

  <select class="form-select form-select-sm">
    <option selected>選択してください</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

フォームレイアウト３カラム：rowとcol

  <!-- col-sm-7 のような特定のカラムクラスを使って、残りの .col が残りのスペースを均等に分割する -->
  <div class="row g-3">
    <div class="col-sm-7">
      <input type="text" class="form-control" placeholder="住所" aria-label="住所" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="マンション名" aria-label="マンション名" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="部屋番号" aria-label="部屋番号" />
    </div>
  </div>

水平配置のフォームを作成する：mb-3とrowとcol

ラジオボタン
チェックボックス
  <div class="mb-3 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="mb-3 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="mb-3">
    <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="mb-3 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="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

インラインのフォーム：form-inline

@
  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</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>

ラベルサイズを調整する：col-form-label-smとform-control-sm

  <div class="mb-3 row">
    <!-- 小サイズのラベル -->
    <label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ：col-form-label-sm</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 標準サイズのラベル -->
    <label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="labelDefault" placeholder="Default size">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 大サイズのラベル -->
    <label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ：col-form-label-lg</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
    </div>
  </div>

入力グループのサイズ調整/小： input-group-sm

Small 
  <!-- 小サイズの入力グループ -->
  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    <input type="text" class="form-control" aria-label="Small">
  </div>