Space between items in bootstrap

I am using bootstrap 4 and i have a list of items that i display like this :

<div class="container">

<div class="row">
<div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items">
...
</div>
</div>

</div>


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

.item-wr {
margin: 10px;
}


But here also the line breaks and i see just 2 items, with some space on the right of the row.

So how can i keep my 3 items per row col-md-4 with space between them ?

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 margin-left and the last col of each row must not have some margin-right

Continue reading...