Утилиты

Обводки

<div class="border"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

Загругление

<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class="rounded-left"></div>
<div class="rounded-circle"></div>
<div class="rounded-0"></div>

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

Оберните вставленный объект, например <iframe>, родительским элементом класса .embed-responsive с заданным соотношением сторон экрана.

<!-- Соотношение сторон 21:9 -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Соотношение сторон 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Соотношение сторон 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- Соотношение сторон 1:1 -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Отступы

Классы отступов названы по формату {property}{sides}-{size} для и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Где property – это одно из:

  • m - для классов, которые задают margin
  • p - для классов, которые задают padding

Где sides – это одно из:

  • t - для классов, которые задают margin-top или padding-top
  • b - для классов, которые задают margin-bottom или padding-bottom
  • l - для классов, которые задают margin-left или padding-left
  • r - для классов, которые задают margin-right или padding-right
  • x - для классов, которые задают и *-left и *-right
  • y - для классов, которые задают и *-top и *-bottom
  • blank - для классов, которые задают margin или padding для всех 4-х сторон элемента

Где размер – это один из:

  • 0 - для классов, которые удаляют margin или padding назначая его равны 0
  • 1 - для классов, которые устанавливают margin или padding к значению, равному 1px
  • 2 - для классов, которые устанавливают margin или padding к значению, равному 0.25rem
  • 3 - для классов, которые устанавливают margin или padding к значению, равному 0.5rem
  • 4 - для классов, которые устанавливают margin или padding к значению, равному 1rem
  • 5 - для классов, которые устанавливают margin или padding к значению, равному 1.5rem
  • 6 - для классов, которые устанавливают margin или padding к значению, равному 2rem
  • 7 - для классов, которые устанавливают margin или padding к значению, равному 3rem
  • auto - для классов, которые устанавливают margin как auto

Примеры использования

<div class="m-4"></div>
<div class="my-2"></div>
<div class="mx-5"></div>
<div class="p-4"></div>
<div class="pt-5"></div>