I am currently developing a webpage using Angular, where bootstrap cards are generated dynamically. The code snippet for this looks like the following:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The main issue I am encountering is with the element
<h4 class="card-header text-center">{{m.Title}}</h4>The problem arises when the title is displayed on 2 lines or 1 line, causing the cards to look uneven. I am looking for a way, perhaps using Bootstrap or CSS, to ensure that the card-header always displays as 2 lines high, regardless of the content. I attempted using a CSS style of line-height: 2, but it did not have the desired effect. Is there a better way to achieve this uniformity?
Thank you!