Bootstrap 5 Макет Горизонтальная форма

Bootstrap 5 Макет Горизонтальная форма используется для создания горизонтальных форм с использованием класса .row с классами .col-*-* для указания ширины ваших меток и элементов управления. Кроме того, используйте класс .col-form-label с элементом <label>, чтобы установить метку формы по центру по вертикали.

Макет Горизонтальная форма Используемые классы:

• .row: этот класс используется для создания строки формы.
• .col-*-*: этот класс используется для создания сетки столбцов формы.

Синтаксис:

<form>
      <div class="row">
        <label for="..." class="col-*-* col-form-label">...</label>
        <div class="col-*-*">
              <input type="..." class="form-control" id="...">
        </div>
      </div>
      ...
</div>

Пример 1: В этом примере мы создадим горизонтальный макет формы.

Выход:

Пример 2: В этом примере мы создадим горизонтальный макет формы.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form