col-sm-3 col-form-label col-form-label-sm

html bootstrap5 Sample

ラベルサイズを調整する: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>