Обводки
<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>