Bootstrap 4 как разместить метку и поле ввода по горизонтали

Question

Я проектирую форму в Bootstrap 4, мне нужно выполнить несколько требований:

1) Экран должен быть разделен на две части. (ID и возраст - одна часть, имя и колледж - одна часть.) Чтобы это работало, я использую class="container", это правильно?

2) Поле метки и ввода должно быть горизонтальным на большом экране, но будет вертикальным, когда экран станет средним. (Теперь я могу только оставить его вертикальным на среднем экране, но не могу сделать его горизонтальным на большом экране.) (Я использовал class="row", но он работает.)

Мой HTML:

    <h3 class="title text-center">Student Form</h3>


    <form [formGroup]="registerForm" #studentForm="ngForm">
      <div class="container">
        <div class="form-group">
          <div class="col-lg-12">
            <div class="row">
              <div class=" col-md-12 col-lg-6">
                <label class="col-form-label ">ID:</label>

                <input #SID [(ngModel)]="student.id" formControlName="ID" type="number"
                  class="form-control form-control-sm" />
              </div>

              <div class="col-md-12 col-lg-6 ">
                <label class="col-form-label">Name:</label>

                <input #SName [(ngModel)]="student.name" formControlName="name" type="text"
                  class="form-control form-control-sm" />

              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-12">
            <label class="  ">Age:</label>

            <input #SAge [(ngModel)]="student.age" formControlName="age" type="number"
              class="form-control form-control-sm" />
          </div>


          <div class=" col-lg-6 col-md-12">
            <label class="col-form-label ">College:</label>

            <select #SCollege class="form-control form-control-sm" formControlName="college" [(ngModel)]="student.college">
              <option value="Harvard">Harvard</option>
              <option value="INTI">INTI</option>
              <option value="Sunway">Sunway</option>
            </select>
          </div>
        </div>

[ [Это форма на большом экране]

[] [Это форма на среднем экране]

Answer 1

Просто нужно добавить класс class="form-inline" внутри тега формы.

Answer 2

Официально bootstrap c, https://getbootstrap.com/docs/4.0/components/forms/

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <form>
        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
    </form>