Санкт-Петербург,
пр. Просвещения, д. 15, лит. А
Без выходных 09:00-20:00

Отдел по работе с юр. лицами
пн-пт 9:00-18:00
0 0 0

Утилиты

Обводки

<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>
Мой город
+7 (812) 640 85 01 +7 (812) 319 26 36 +7 (812) 319 26 50 +7 931 305 01 67 +7 911 281 06 89
Без выходных 09:00-20:00

Отдел по работе с юр. лицами
пн-пт 9:00-18:00
Адрес: 194355 г. Санкт-Петербург, ул. Просвещения проспект, д. 15 (вход с улицы Хошимина) магазин "Сварка"

Без выходных 09:00-20:00