title: Space between items in bootstrap
body: <p>I am using <code>bootstrap 4</code> and i have a list of items that i display like this :</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="card col-md-4 col-sm-6 col-12 item-wr"  *ngFor="let item of items"&gt;
          ...
      &lt;/div&gt;
    &lt;/div&gt; 
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In my desktop view with Google Chrome i can see 3 items by row but the problem is there is no space between columns. so i add a class <code>item-wr</code></p>
  
  <pre><code>.item-wr {
      margin: 10px; 
  }
  </code></pre>
  
  <p>But here also the line breaks and i see just 2 items, with some space on the right of the row.</p>
  
  <p>So how can i keep my 3 items per row <code>col-md-4</code> with space between them ? </p>
  
  <p>P.S i want no space in the beginning or the ending of each row. the first col of each row must not have some <code>margin-left</code> and the last col of each row must not have some <code>margin-right</code></p>