Как добавить margin между карточками и при этом не разорвать верстку?

Question

[di]

Как добавить margin между карточками и при этом не разорвать верстку? Я хочу чтоб было вот так


А получается так


Пример в песочнице
https://codepen.io/delgus/pen/wvMqvER

Код

<div class="container">
    <div class="row">
      <div class="my-class col-4 card">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="my-class col-4 card">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="my-class col-4">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
</div>

Помогите пожалуйста

Answer 1

[Stalker_RED]

margin: 5px;

Comments

[di]

Я хочу 3 колонки, я не просто так там пишу col-4. Ваш вариант не работает

[Stalker_RED]

di, мой вариант работает, добавляет margin-ы.
Про колонки вы написали позже
Осторожнее относитесь ко встроенным классам сетки.

Answer 2

[Олег Вещин]

Если интересно решение на Bootstrap, то это класс m(argin)
m - отступы по всем сторонам
mt - top
ml - left
mr - right
mb -bottom
пример mt-(число от 1 до 5)

Comments

[di]

m-1 также разрывает верстку. 3 колонки не получается

[Maxim Kirshin]

di, потому что их нужно добавлять не к .col, а div'у внутри col, тогда ничего не будет рвать

Answer 3

[Just Me]

никогда не лепи дополнительные стили на сетку, где стоят .col

<div class="container">
    <div class="row">
      <div class="col-4 px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="col-4 px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="col-4  px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
</div>