Утилиты

Обводки

<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>