How to add margin between cards without breaking layout?

Question

css

How to add margin between cards without breaking layout? I want it to be like this


And it turns out like this


Example in the sandbox
https://codepen.io/delgus/pen/wvMqvER

The code

<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>

help me please

Answer 1

margin: 5px;

Answer 2

If you are interested in a Bootstrap solution, then this is the class m(argin)
m - indents on all sides
mt - top
ml - left
mr - right
mb -bottom
example mt-(a number from 1 to 5)

Answer 3

never put extra styles on the grid where the .col is

<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>