[bootstrap4]一部の入力欄だけを横並びにしたい

Question

皆様いつもお世話になっております。

Twitter Bootstrap4を使ってこのように、一部の入力欄だけを横並びにしたいのですが

【理想】

以下のコードで実装すると、

<form method="post">
    <div class="form-group form-inline">
        <label>姓</label>
        <input type="text" name="firstname" class="firstname form-control" required>
        <label>名前</label>
         <input type="text" name="lastname" class="lastname form-control" required>
    </div>
    <div class="form-group">
        <label>パスワード</label>
        <input type="password" name="password" class="password form-control">
        </div>
        <div class="form-group">
        <label>メールアドレス</label>
        <input type="email" name="password" class="password form-control">
    </div>
</form>

このように、labelがinputの右側に来てしまいます。

【現実】

どのようにしたら、横並びにしたときに<label>要素を<input>の上に表示できるでしょうか？
どうかご教授のほどよろしくお願いいたします。

Answer 1

bootstrapだとこれが自然な気がします。

<div class="form-group row">
	<div class="col-sm-6">
		<label>姓</label>
		<input name="firstname" class="firstname form-control" required="" type="text">
	</div>
	<div class="col-sm-6">
		<label>名前</label>
		<input name="lastname" class="lastname form-control" required="" type="text">
	</div>
</div>

一応、col-sm-6→col-sm-4などで調整はできます。

Comments

[kalon]

お返事遅れました。もっとシンプルに記述するだけで良かったのですね。助かりました。
ありがとうございました。