Space between items in bootstrap - html

Question

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

Answer 1

You have to give card class inside col-md-4 col-sm-4 col-12. because col-md-4 col-sm-4 col-12 this class taking itself padding and give space so you can apply design related class inside column class.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
<div class="col-md-4 col-sm-4 col-12">
<div class="card item-wr">
...
</div>
</div>
</div>
</div>

Answer 2

Use padding utility classes available with bootstrap 4 like pr-2 for padding right by 2 spacing units. Refer here
P.S. margin will add space outside of the box-model and hence you should use padding to prevent line breaks. For more info refer here