Display и флексбокс
Утилиты display управляют тем, как отображается элемент: блоком, строкой, флекс-контейнером или никак. Вместе с классами флексбокса они позволяют собрать шапку, панель кнопок или строку таблицы без единой строки CSS.
Классы d-*
| Класс | CSS |
|---|---|
d-none | display: none |
d-block | display: block |
d-inline-block | display: inline-block |
d-flex | display: flex |
d-grid | display: grid |
Как и у сетки, в середину можно добавить точку перелома: d-md-flex действует от 768 пикселей.
Показать и скрыть на разных экранах
Сочетание d-none и адаптивного класса прячет элемент на одних экранах и показывает на других:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="d-md-none">Видно только на узком экране</p>
<p class="d-none d-md-block">Видно только от 768 пикселей</p>На экране шире 768 пикселей виден второй абзац, на узком — первый. Так в админ-панели прячут на телефоне второстепенные колонки и подписи.
Флекс-контейнер
Класс d-flex ставит детей в ряд. Дальше выравнивание задают те же слова, что в CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex justify-content-between align-items-center border p-3">
<strong>Задачи на сегодня</strong>
<button class="btn btn-primary btn-sm">Добавить</button>
</div>Заголовок прижат влево, кнопка вправо, и оба стоят по центру высоты блока. Это типичная шапка раздела админ-панели.
Направление и перенос
| Класс | Что делает |
|---|---|
flex-column, flex-row | Дети в столбец или в ряд |
flex-wrap | Переносит детей на новую строку, когда не хватает места |
flex-grow-1 | Элемент забирает всё свободное место |
flex-shrink-0 | Элемент не сжимается |
align-self-* | Выравнивание одного ребёнка |
Направление тоже бывает адаптивным:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex flex-column flex-sm-row gap-2">
<input class="flex-grow-1" placeholder="Ваш email">
<button class="btn btn-primary">Подписаться</button>
</div>На узком экране поле и кнопка стоят друг под другом, от 576 пикселей — в ряд, и поле растягивается на всю свободную ширину.
Другие полезные утилиты
visually-hidden прячет текст с экрана, но оставляет его для программ чтения с экрана. overflow-auto добавляет прокрутку, float-end — обтекание справа, d-print-none скрывает элемент при печати.
Частая ошибка
Ставить justify-content-between или align-items-center на элемент без d-flex. Эти свойства работают только у флекс- или грид-контейнера, и на обычном блоке ничего не происходит. Сначала включите флексбокс классом d-flex, потом выравнивайте.