Отображение

Утилиты для управления CSS-свойством display.

Классы

Класс

display

d-none

none

d-block

block

d-inline

inline

d-inline-block

inline-block

d-flex

flex

d-inline-flex

inline-flex

d-grid

grid

d-inline-grid

inline-grid

d-table

table

d-table-row

table-row

d-table-cell

table-cell

d-contents

contents

Адаптивные варианты

Все классы поддерживают адаптивные префиксы — удобно для скрытия или изменения типа отображения на разных экранах:

Пример

Результат

d-none md:d-block

Скрыт на мобильных, блок на планшетах

d-block md:d-none

Блок на мобильных, скрыт на планшетах

d-block md:d-flex

Блок на мобильных, флекс на планшетах

Примеры

<!-- Скрыть на мобильных -->
<div class="d-none md:d-block">
  Видно только на планшетах и шире
</div>

<!-- Показать только на мобильных -->
<div class="d-block md:d-none">
  Видно только на мобильных
</div>

<!-- Инлайн-флекс для иконки с текстом -->
<span class="d-inline-flex items-center gap-2">
  <i class="icon"></i>
  Текст
</span>

<!-- Грид-контейнер -->
<div class="d-grid gap-4">
  <div>Ячейка 1</div>
  <div>Ячейка 2</div>
</div>