Расположить элементы в одну строку — частая задача при создании меню, форм, карточек или кнопок.
Bootstrap предлагает несколько способов выстроить блоки или элементы в ряд — от классических d-inline-block до мощного flex-контейнера. Ниже — самые удобные варианты.
Способ 1. d-inline-block — классика строчных блоков
htmlКопироватьРедактировать<div class="d-inline-block bg-light p-2">Блок 1</div>
<div class="d-inline-block bg-light p-2">Блок 2</div>
Класс d-inline-block позволяет блочным элементам располагаться в одну строку. Подходит для простых случаев, когда не нужна гибкая вёрстка.
Способ 2. Flexbox — универсальное решение
htmlКопироватьРедактировать<div class="d-flex">
<div class="p-2 bg-warning">Элемент 1</div>
<div class="p-2 bg-info">Элемент 2</div>
<div class="p-2 bg-success">Элемент 3</div>
</div>
Класс d-flex включает flex-режим. По умолчанию элементы располагаются по горизонтали. Удобно для выравнивания, отступов и адаптивности.
Способ 3. Класс row и col из сетки Bootstrap
htmlКопироватьРедактировать<div class="row">
<div class="col bg-light">1</div>
<div class="col bg-secondary">2</div>
<div class="col bg-dark text-white">3</div>
</div>
Каждый col располагается в строку внутри row, при этом ширина автоматически подстраивается. Подходит для адаптивных макетов.
Способ 4. Кнопки или формы в одну строку
htmlКопироватьРедактировать<div class="d-inline-flex">
<button class="btn btn-primary">Да</button>
<button class="btn btn-danger ms-2">Нет</button>
</div>
Используем d-inline-flex, если хотим выстроить кнопки в строку и сохранить строчный поток.
Способ 5. Класс btn-group для кнопок
htmlКопироватьРедактировать<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary">Левый</button>
<button type="button" class="btn btn-outline-primary">Центр</button>
<button type="button" class="btn btn-outline-primary">Правый</button>
</div>
Создаёт группу кнопок, расположенных в ряд.
Заключение
В Bootstrap выстраивать элементы в строку можно разными способами: d-inline-block для простоты, d-flex для гибкости, row и col для сетки. Выбор зависит от задачи: будь то меню, карточки или кнопки — всё решается в одну строку.