Bootstrap 4 Horizontal form（水平フォーム）のラベル位置

Question

現在の状況

Bootstrap 3 から Bootstrap 4 へ移行作業しています。
Horizontal form（水平フォーム）のラベル位置を同じようにしたいです。

Bootstrap 3.4.1

https://getbootstrap.com/docs/3.4/css/#forms-horizontal

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

公式ドキュメントからの引用ですが、十分な画面幅の場合はラベル「Email」は右寄せ、狭くなると改行されて左寄せになります。

Bootstrap 4.3.1

https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

こちらも公式ドキュメントからの引用ですが、ラベル「Email」が常に左寄せになっています。
これを Bootstrap 3 のようなラベル位置にしたいです。

よろしくお願いします。

Comments

[x_x]

移行前は本当に3.4.1ですか？ 3.3.7ではなく。
3.4.1と4.3.1は同時にリリースされています。

[n_no]

ご指摘の通り、実環境は3.3.7ですが、ローカルテスト環境は3.4.1です。

Answer 1

text-md-right を追加してください

<label for="inputEmail3" class="col-sm-2 col-form-label text-md-right">Email</label>

https://getbootstrap.com/docs/4.3/migration/#utilities

Comments

[n_no]

意図通りの表示が可能になりました。ありがとうございます。