Spacing between bootstrap columns - html

Question

So i'm fetching "boxes" and dynamically adding them into the HTML document with ngFor. I don't know in advance how many of them will be there. Currently i'm using this code:
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<app-single-item [item]="item"></app-single-item>
</div>
</div>
What that gives to me:
Which is okay but the problem is I want bigger spacing between those elements. It should look like this:
To achieve the look on the second image I put width: 21% to col-xl-3 and added display: flex and justify-content: between to the row div.
But the problem is, now if I have less than 4 boxes in a row, the spacing between them is much bigger. You can see it on the image below
My question is how can I get the same spacing between boxes regardless of the number. I don't want to use fixed width on the item divs that's why I use cols. and this is important, I need those items to always show from the beginning of the outer div, so in line with the element above it. Thanks.

Answer 1

Simply you can use margin right class of bootstrap for each column so that it appears to take some margin from right column like this
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 mr-3">
<app-single-item [item]="item"></app-single-item>
</div>
</div>

Answer 2

Keep width and use justify-content-center
Edit based on comment-
Apply container class to outer div and use -
#include media-breakpoint-down(lg) {
.container {
width: 100%;
max-width: none;
}
}

Answer 3

Instead updating the margin or width of your elements, you should update the padding, because it won't affect the outer but the inner element.
Code example (not tested)
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 pr-2 pl-2">
<app-single-item [item]="item"></app-single-item>
</div>
</div>
Then with those principles, you can choose the space you want between elements.
And plus, maybe you don't want the first and last elements having left and rightpadding, so you may use media-queries breakpoints to remove pl-2 from first element and each 2n elements for the sm breakpoint for example, and pr-2 from second element and each 2n+1 elements for the sm breakpoint, (and an other math for other breakpoints, depending on how many elements are displayed by row).
See the doc