Как между в bootstrap4 сетке row задать свои отступы между блоками?

В Bootstrap 4 для задания своих отступов между блоками в сетке row можно использовать классы mt-* (для отступа сверху), mb-* (для отступа снизу), ml-* (для отступа слева) и mr-* (для отступа справа), где * может быть числом от 0 до 5.

Например, если вам нужно задать отступы сверху и снизу, вы можете добавить классы mt-* и mb-* к row.

<div class="row mt-4 mb-4">
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
</div>

mt-4 и mb-4 добавят отступы в 1.5 рем отверху и снизу для элементов внутри row.

Вы также можете комбинировать классы, чтобы указать различные отступы в разных направлениях. Например, если вам нужно задать отступ слева и справа, вы можете добавить классы ml-* и mr-* к row.

<div class="row ml-3 mr-3">
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
</div>

ml-3 и mr-3 добавят отступы в 0.75 рем слева и справа для элементов внутри row.

Также можно использовать эти классы непосредственно на элементы col, если вам нужно задать отступы только для определенных блоков области контента.

<div class="row">
  <div class="col mt-3 mb-3">
    <!-- Ваш контент здесь -->
  </div>
  <div class="col mt-3 mb-3">
    <!-- Ваш контент здесь -->
  </div>
</div>

mt-3 и mb-3 добавят отступы в 0.5 рем сверху и снизу для элементов col.

Если вам необходимы более точные или настраиваемые отступы, вы можете также использовать пользовательские стили CSS, чтобы добавить отступы между блоками в сетке row. Для этого просто определите свои собственные классы стилей и примените их к row или col.

Например, вы можете определить класс my-custom-margin в своем файле CSS:

.my-custom-margin {
  margin-top: 20px;
  margin-bottom: 20px;
}

Затем примените этот класс к row:

<div class="row my-custom-margin">
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
  <div class="col">
    <!-- Ваш контент здесь -->
  </div>
</div>

Это добавит отступы сверху и снизу в 20 пикселей для элементов внутри row.