Bootstrap 4 cards are not aligning - html

Question

Morning,
I am trying to put my bootstrap card element in a row by 3 cards, cards need to be of the same hight and width and have spacing in between them. For example if I have 7 card I will have 3 rows by three cards and the last row with one element will still be the same size as the card above it.
My code is:
<div class="container pt-2">
<div *ngFor="let g of carMultiArray">
<div class="row">
<div class="col-12">
<div class="card border-0 boxShadow no-padding col-lg-4 col-md-12 col-sm-12 col-xs-12" *ngFor="let t of g">
<a data-toggle="modal" href="'#'+ 'car'+t.Id" class="card-link" [attr.data-target]="'#'+ 'car'+t.Id" style="color:black; text-decoration: none;">
<img class="card-img-top rounded-0" src="{{t.MainImage}}">
</a>
<div class="card-body text-center">
<div class="my-arrow">
<img *ngIf="!t.Verified" src="../../icons/error.png">
<img *ngIf="t.Verified" src="../../icons/checked.png">
</div>
<h5 class="card-title">{{t.Title}} {{t.Kubatura}} {{t.BodyType}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{t.FuelType}} {{t.GearBox}} {{t.Horsepower}}
{{t.OdometerReading}}</h6>
<a [routerLink]="['/car', t.Id]" class="card-link">Daugiau</a>
<a class="card-link">{{t.City}}</a>
<a class="card-link">{{t.FirstRegistration}} </a>
</div>
</div>
</div>
</div>
</div>
</div>
My css (Though it does not influence the problem):
.boxShadow {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.card-body {
position: relative;
}
.my-arrow {
position: absolute;
top: -10%;
right: 10%;
}
.card-img-top {
width: 100%;
height: 17vw;
object-fit: cover;
}
.card{
width: 90%;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
The problem that I am having is that with the current code the cards do not have any margin or padding in between them when in one row. As you may have seen I have removed all padding in class .no-padding as if there is any padding even by default the images inside the card get smaller however the cards itself do not and they still touch each other, removing padding brings the cards to look the same and the way they suppose to, however they have no space in between them, adding margin, any margin, pushes the 3 card to a new line.
If I put the elements in a card-group instead of putting it in rows and columns, the result is they have no space in between them, adding some breaks the grid again. Putting it in card-deck results the last card which is one in a row to take up the whole space of the last row, trying to set the width of the cards in a card-deck, for some reason when the elements have 33% or 30% have different width, for example the 3 cards above will have the same width however the single card bellow will still be a little bit wider.
Adding the cards to card-columns, will result in having the cards different hights, trying to make it the same will result in images in the cards not aligning with each other.
While adding everything like you see right now in the code, in a row and then in col-12 allows to handle everything and the way I want it, it removes spacing between cards and as I said if adding margin it pushes the last 3rd card to new line if adding padding image gets smaller then the card.
How would I achieve my wanted result?
Hope this makes sense, if not, please ask.

Answer 1

I think you should use .justify-content-between class from bootstrap4 and try remove your display: inline-block attr from .boxShadow

Answer 2

FOR BOOTSTRAP REFER THIS LINK..
W3 bootstrap 4 card deck
FOR WITHOUT BOOTSTRAP REFER THE CODE BELOW..
.parent{
text-align:center;
}
.padding_maker{
display:inline-block;
padding:10px;
}
.children{
display:inline-block;
background-color:black;
height:300px;
width:150px;
color:white;
}
<div class="parent">
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
</div>