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

Используйте модификаторы отображения, чтобы изменять свойство 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>

<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 элемент быдет сокрыт на всех экранах, за исключением среднего и большого.

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

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