Раскладка формы и плавающие подписи

Поля Bootstrap по умолчанию занимают всю ширину и стоят друг под другом. Для длинной формы это неудобно: имя и фамилию, город и индекс логичнее ставить в одну строку. Для раскладки используется та же сетка, что и для страницы, а для компактных форм есть плавающие подписи — подпись лежит внутри поля и уменьшается, когда в него вводят текст.

Поля в колонках

Форма получает классы row g-3, каждое поле с подписью — колонку. Промежуток g-3 разводит поля и по горизонтали, и по вертикали:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<form class="row g-3">
  <div class="col-md-6">
    <label for="firstName" class="form-label">Имя</label>
    <input type="text" class="form-control" id="firstName">
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Фамилия</label>
    <input type="text" class="form-control" id="lastName">
  </div>
  <div class="col-12">
    <label for="company" class="form-label">Компания</label>
    <input type="text" class="form-control" id="company">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Сохранить профиль</button>
  </div>
</form>

От 768 пикселей имя и фамилия стоят рядом, а «Компания» занимает всю строку. На телефоне все поля друг под другом. Это форма профиля в админ-панели. Если нажать кнопку, превью отправит форму и опустеет — верните пример кнопкой «Сбросить».

Подпись слева от поля

В горизонтальной форме подпись и поле — колонки одной строки. Подписи дают класс col-form-label, чтобы она встала по центру высоты поля:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="row mb-3">
  <label for="teamName" class="col-sm-3 col-form-label">Команда</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" id="teamName" value="Маркетинг">
  </div>
</div>

Подпись занимает 3 части из 12, поле — 9. На экране уже 576 пикселей подпись встаёт над полем.

Плавающие подписи

Обёртка form-floating: сначала поле, потом <label>. У поля обязательно должен быть атрибут placeholder — по нему Bootstrap понимает, пустое ли поле, а сам текст подсказки не виден:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div style="max-width: 360px">
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="loginEmail" placeholder="name@example.com">
    <label for="loginEmail">Email</label>
  </div>
  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="loginPassword" placeholder="Пароль">
    <label for="loginPassword">Пароль</label>
  </div>
  <button type="button" class="btn btn-primary w-100">Войти</button>
</div>

Подписи стоят внутри высоких полей. Щёлкните по полю — подпись уменьшится и поднимется вверх, освободив место для текста. Такая компактная форма входа хорошо смотрится на отдельной странице админ-панели. form-floating работает и с textarea, и с form-select.

Частая ошибка

Поставить <label> перед полем внутри form-floating или забыть placeholder. В обоих случаях подпись не «плавает»: она накладывается на введённый текст или стоит не на месте. Порядок внутри обёртки всегда такой: сначала input, затем label, и у поля есть placeholder.