If you are looking for a way to create cards with equal width and height, consider using Bootstrap's built-in card decks. Instead of relying on rows and columns, give card decks a try:
<div class="container mt-5">
<div class="card-deck">
<div class="card">
<img class="card-img-top" />
<div class="card-body">
<h1 class="card-title text-center" />
<p class="card-text" />
</div>
</div>
<div class="card" />
<div class="card" />
<div class="card" />
<div class="card" />
</div>
</div>
By wrapping your content in .card, the images should align automatically.
To handle overflow in titles, one strategy is to display "..." when they exceed a single line. This ensures aligned titles that occupy only a single line. Bootstrap provides a class for truncating text: .text-truncate:
<div class="card">
<img class="card-img-top" />
<div class="card-body">
<h1 class="card-title text-center text-truncate" />
...
</div>
</div>
These adjustments will help achieve results like:
https://i.stack.imgur.com/W6zP3.png
demo: https://jsfiddle.net/davidliang2008/uv4zbomL/34/
This may not be perfect, but it provides a starting point for your project.
Update: Ensuring Complete Title Display
To show the title entirely without truncation, use the flexbox technique by setting the .card-body as a flex container in column direction. This allows you to adjust the card header's margin bottom to push other content down. The recommended Bootstrap classes for this are: d-flex flex-column and mb-auto:
<div class="card">
<img class="card-img-top" />
<div class="card-body d-flex flex-column">
<h1 class="card-title text-center mb-auto" />
...
</div>
</div>
https://i.stack.imgur.com/OBFsc.png
demo: https://jsfiddle.net/davidliang2008/uv4zbomL/47/