Свойство отображения

Используйте модификаторы отображения, чтобы изменять свойство display property элемента.

Использование модификатора: .d{контрольная точка}-{свойство отображения}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Свойство отображения. Обязательный параметр:
    • .d-none – элемент не отображается
    • .d-inline – элемент отображается как строчный
    • .d-inline-block – элемент отображается как блочно-строчный
    • .d-block – элемент отображается как блочный
    • .d-table – элемент отображается как таблица
    • .d-table-cell – элемент отображается как ячейка таблицы
    • .d-flex – элемент отображается как флексбокс
    • .d-inline-flex – элемент отображается как строчный флексбокс
В линию?
В линию!
<div class="d-inline bg-orange-50 px-4 py-2">В линию?</div>
<div class="d-inline bg-green-50 px-4 py-2">В линию!</div>
Я блок. И занимаю всю ширину!
<span class="d-block bg-blue-50 p-4 t-center">Я блок. И занимаю всю ширину!</span>

inline-block

Первый!

inline-block

Второй!
<div class="d-inline-block bg-orange-50 hr-5 wr-5 t-center">
<div class="align-middle">
<h3>inline-block</h3>
Первый!
</div>
</div>
<div class="d-inline-block bg-orange-50 hr-5 wr-5 t-center">
<div class="align-middle">
<h3>inline-block</h3>
Второй!
</div>
</div>

Скрытые элементы

Для быстрой разработки дружественной к мобильным устройствам используйте отзывчивые модификаторы свойств отображения для показа или сокрытия элементов на устройстве. Вы можете самостоятельно определять на каких видах устройствах показывать или скрывать элементы.

Для сокрытия элемента используйте модификатор .d-none и один из следующи вариантов .d-{sm,md,lg,xl}-none для отзывчивого сокрытия элементов.

Для показа только в определенном интервале отзывчивости используйте комбинацию из нескольких модификаторов, отдельно для каждого экрана: модификатор .d-*-none вместе с .d-*-* классом, например .d-none.d-md-block.d-xl-none элемент быдет сокрыт на всех экранах, за исключением среднего и большого.

Модификатор Размер экрана
d-none Скрыто всегда
d-none d-sm-block Скрыто только на xs
d-sm-none d-md-block Скрыто только на sm
d-md-none d-lg-block Скрыто только на md
d-lg-none d-xl-block Скрыто только на lg
d-xl-none Скрыто только на xl
d-block Показывается всегда
d-block d-sm-none Показыватся только на xs
d-none d-sm-block d-md-none Показыватся только на sm
d-none d-md-block d-lg-none Показыватся только на md
d-none d-lg-block d-xl-none Показыватся только на lg
d-none d-xl-block Показыватся только на xl

Показ при печати

Измените значение display элемента для показа его при печати.

Модификатор Стиль печати
.d-print-block Применяется display: block к элементу при печати
.d-print-inline Применяется display: inline к элементу при печати
.d-print-inline-block Применяется display: inline-block к элементу при печати
.d-print-none Применяется display: none к элементу при печати