Bootstrap выравнивание по горизонтали для разных меток для группы форм с текстом ошибки

Question

Кто-нибудь может сказать, как расположить горизонтальное текстовое поле накануне одной строки, хотя метка будет в другой строке

<div class="row">
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="control-label">Roll number <br> Student Code:</label>
                          <input type="text" class="form-control">
                          </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label">School code:</label>

                            <input type="text" class="form-control ">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label>Year Of Passing:</label>
                          <input type="text" class="form-control">
                      </div>
                </div>
            </div>

Answer 1

Вы можете заключить ввод в div с атрибутом col-x и добавить класс row в группу форм. Пример:

        <div class="form-group row">
            <label class="control-label col-4">Roll number <br> Student Code:</label>
          <div class="col-6">
            <input type="text" class="form-control">
          </div>
        </div>

Полный пример здесь: https://stackblitz.com/edit/js-bootstrap-css?file=index.html

<div class="row">
                <div class="col-12">
                <div class="form-group row">
                    <label class="control-label col-4">Roll number <br> Student Code:</label>
                  <div class="col-6">
                    <input type="text" class="form-control ">
                  </div>
                </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-3 col-lg-4">
                    <div class="form-group row">
                        <label class="control-label col-4">School code:</label>

                  <div class="col-6">
                            <input type="text" class="form-control ">
                  </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group row">
                        <label class="control-label col-4">Year Of Passing:</label>
                  <div class="col-6">
                          <input type="text" class="form-control">
                  </div>
                      </div>
                </div>
            </div>

Answer 2

Вы можете добавить w-50 d-inline-block класс для ввода и w-25 для обозначения, как показано ниже

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="control-label w-25">Roll number <br> Student Code:</label>
                          <input type="text" class="form-control w-50 d-inline-block">
                          </div>
                 <div class="text-required> This is required </div>

                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="w-25">School code:</label>

                            <input type="text" class="form-control w-50 d-inline-block">
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-4">
                    <div class="form-group">
                        <label class="w-25">Year Of Passing:</label>
                          <input type="text" class="form-control w-50 d-inline-block">
                      </div>
                </div>
            </div>