Is there a way to ensure consistent card size across all lines?
I've noticed that the cards in the second line are taller. Can we base the height of all cards on this?
https://i.sstatic.net/KgZwu.png
Below is the HTML code:
<div class="row">
<div class="col-12 col-lg-6">
<div class="row">
<radio-button-square-card
*ngFor="let index of [2, 3, 4, 5, 6, 7, 8, 9]"
[checked]="index === 5"
[index]="index"
[label]="' sonneries'"
[subtitle]="index === 5 ? '(par défaut)' : undefined"
class="col-6 col-md-3 col-lg-4 mb-1">
</radio-button-square-card>
</div>
</div>
</div>And here's the HTML code for my component:
<div class="card p-1 p-md-2 d-flex flex-column align-items-center text-center h-100">
<div class="flex-fill">
<label [for]="index" [ngClass]="{'mb-0': subtitle}" class="standard font-weight-normal">
{{index}}{{label}}
</label>
<p *ngIf="subtitle" class="small text-gray3 mt--1 mb-0">{{subtitle}}</p>
</div>
<div class="custom-control custom-radio mb-0 p-0">
<input (click)="selected.emit(index)" [checked]="checked" [id]="index"
class="custom-control-input" name="customRadio" type="radio">
<label [for]="index" class="custom-control-label" [style]="'position: relative !important'"></label>
</div>
</div>Just to note, I am using Bootstrap 5 and Angular 14