Good morning,
I'm currently working on organizing my Bootstrap card elements into rows of 3 cards each. I want the cards to be uniform in height and width, with spacing between them. For instance, if I have 7 cards, I'd have 3 rows of three cards and the last row would have a single card, yet it should be the same size as the cards above it.
Here is my code:
<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">More</a>
<a class="card-link">{{t.City}}</a>
<a class="card-link">{{t.FirstRegistration}} </a>
</div>
</div>
</div>
</div>
</div>
</div>
My CSS (though not directly related to the issue):
.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 issue I'm facing is that, with the current code, the cards have no margin or padding between them when in the same row. I have removed all padding in the .no-padding class. Adding any margin pushes the 3rd card to a new line. Putting the elements in a card-group doesn't create space between them, and adding space breaks the grid. Organizing them in a card-deck results in the last card in a row taking up the whole space.
How can I achieve the desired result I'm looking for?
I hope this explanation is clear, but if not, please feel free to ask.