Bootstrap 入力フォームの横並びを2段で表示したい

Question

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">名前</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">メール</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[e-mail]">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

Bootstrap4で入力フォームを横並びで複数段表示したいのですが、formで制御は可能なのでしょうか？

実現したいレイアウトのイメージ

列1	列2	列3	列4
名前	テキストボックス	メール	テキストボックス
年齢	テキストボックス	住所	テキストボックス

Comments

[beginner_t]

まず実現したいレイアウトイメージのHTMLをかくことはできますか？
可能であれば、コードの修正をお願いします。

Answer 1

一例

  <div class="form-row">
   <div class="col-md-6 form-row form-group form-inline">
    <label class="col-sm-3" for="name">名前</label>
    <input class="col-sm-9 form-control" id="name" />
   </div>
   <div class="col-md-6 form-row form-group form-inline">
    <label class="col-sm-3" for="mail">メール</label>
    <input class="col-sm-9 form-control" id="mail" type="email" />
   </div>
   <div class="col-md-6 form-row form-group form-inline">
    <label class="col-sm-3" for="age">年齢</label>
    <input class="col-sm-9 form-control" id="age" />
   </div>
   <div class="col-md-6 form-row form-group form-inline">
    <label class="col-sm-3" for="address">住所</label>
    <input class="col-sm-9 form-control" id="address" />
   </div>
  </div>

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

Comments

[msd]

”form-row”というクラスがあるんですね！
なるほどです。ありがとうございました。

Answer 2

<div class="form-group row">
    <div class="col-sm-6">
        <label>名前</label>
        <input name="name" class="form-control" required="" type="text">
    </div>
    <div class="col-sm-6">
        <label>メール</label>
        <input name="email" class="form-control" required="" type="text">
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-6">
        <label>年齢</label>
        <input name="age" class="form-control" required="" type="text">
    </div>
    <div class="col-sm-6">
        <label>住所</label>
        <input name="address" class="form-control" required="" type="text">
    </div>
</div>

上記で横並びのフォームはいけると思いますが、いかがでしょうか？
col-などのを使って各横幅のサイズを変えることもできます。
https://getbootstrap.com/docs/4.2/layout/grid/