Руководство Bootstrap Spacing Utility

Spacing Utility

Spacing Utility  это часть в Bootstrap, которая предоставляет классы помогающие пользователям задавать значения margin, padding для элементов. Эти классы подходят устройствам с разными размерами экрана.
В основном данные представлены следующим форматом:

• {property}{sides}-{size}

• {property}{sides}-{breakpoint}-{size}

При этом:

• {property} и {size} это обязательные значения.
• {sides} и {breakpoint} это необязательные значения.

{property}:

{property} имеет значение "m" или "p".

{property}	Описание
m	Это аббревиатура "Margin", связанная с настройкой margin для элементов.
p	Это аббревиатура  "Padding", связанная с настройкой padding для элементов.

{sides}:

{sides}	Описание
t	Это аббревиатура  "Top", связанная с настройкой margin-top или padding-top
b	Это аббревиатура  "Bottom", связанная с настройкой margin-bottom или padding-bottom
l	Это аббревиатура  "Left", связанная с настройкой  margin-left или padding-left
r	Это аббревиатура  "Right", связанная с настройкой  margin-right или padding-right
x	Указывает на ось X (Горизонтально), связанная с настройкой margin-left & margin-right или padding-left & padding-right.
y	Указывает на ось  Y (Вертикально), связанная с настройкой margin-top & margin-bottom или padding-top & padding-bottom.

{size}:

{size}	Описание
0	Настроить значение для padding или margin равно 0.
1	Настроить значение для padding или margin равно 0.25 * $spacer.
2	Настроить значение для padding или margin равно 0.5 * $spacer.
3	Настроить значение для padding или margin равно 1 * $spacer.
4	Настроить значение для padding или margin равно 1.5 * $spacer.
5	Настроить значение для padding или margin равно 3 * $spacer.
auto	Настроить значение для margin равно auto.

{breakpoint}

{breakpoint}	Описание
sm	Работает, когда ширина родительского элемента >= 567px.
md	Работает, когда ширина родительского элемента  >= 768px.
lg	Работает, когда ширина родительского элемента  >= 992px.
xl	Работает, когда ширина родительского элемента  >= 1200px.

Примеры

1.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Margin Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
 
      <div class="container-fluid border border-primary mt-5">
         <div class="border border-danger mt-5 mr-4 mb-4 ml-auto" style="width:100px;">
           Div
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
 
</html>

2.

<div class="border border-danger pt-5 pr-4 pb-4 pl-5" style="width:300px;">
   Bootstrap is a free front-end framework for faster and easier web development.
   Bootstrap includes HTML and CSS based design templates for typography ...
</div>

3. Если элемент настраивает автоматический margin слева и справа. Он появится в центре (center) родительского элемента горизонтально.

<div class="container-fluid border border-primary mt-5">
 
   <div class="mx-auto border border-danger" style="width:100px;">
      Center DIV
   </div>
 
</div>

Responsive:

<div class="container-fluid border border-primary">
 
   <div class="border border-danger m-1 m-sm-5" style="width:100px;">
      .m-1 .m-sm-5
   </div>
 
</div>