Группа полей ввода позволяет объединить поля формы и текст на одной строке. Они похожи на группы кнопок в том смысле, что позволяют располагать элементы вплотную друг к другу.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до ближайшего доллара)" aria-describedby="basic-addon">
<span class="input-group-text">.00</span>
</div>
Чтобы создать группу полей ввода, используйте класс .input-group для самой группы. Чтобы элемент был добавлен в начало или в конец поля формы, используйте <span> с классом .input-group-text.
Текст с обоих сторон
Вы также можете добавить элемент до поля формы. Фактически вы можете разместить текст с обоих сторон элемента управления.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до ближайшего доллара)" aria-describedby="basic-addon">
<span class="input-group-text">.00</span>
</div>
Размер
Используйте .input-group-sm либо .input-group-lg в группе полей ввода, чтобы указать размер всех элементов. Нет необходимости указывать их для каждого элемента в группе.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Маленький</span>
<input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до ближайшего доллара)" aria-describedby="basic-addon">
</div>
<div class="input-group mb-3">
<span class="input-group-text">По умолчанию</span>
<input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до ближайшего доллара)" aria-describedby="basic-addon">
</div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">Большой</span>
<input type="text" class="form-control" placeholder="1000" aria-label="Сумма (округлённая до ближайшего доллара)" aria-describedby="basic-addon">
</div>
Флажки и переключатели
Вместо текста можно поместить флажки и радиокнопки.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Флажок для следующего текстового поля">
</div>
<input type="text" class="form-control" aria-label="Текстовое поле с флажком">
</div>
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Переключатель для следующего текстового поля">
</div>
<input type="text" class="form-control" aria-label="Текстовое поле с переключателем">
</div>
Кнопки дополнения
Вы также можете добавить кнопки к полям формы вместо текста.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon">Кнопка</button>
</div>
Выпадающие меню
Вы можете добавить выпадающее меню к группе полей ввода.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Текстовое поле с выпадающим меню">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Меню</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Что-то ещё</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Отдельная ссылка</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>