Looking at the bootstrap 4 card documentation page in the Images > Image Caps section, you'll find two examples provided. In these examples, the image can be positioned either at the top or the bottom of the card block, with the .card-block div either following or preceding the image tag. I started wondering if it would be possible to insert the image in between two card blocks like this:
<div class="card-group>
<div class="card>
<div class="card-block></div>
<img src="..." alt="..." >
<div class="card-block></div>
</div>
<!--Multiple Cards-->
</div>
I attempted to do so, but the output was not what I expected. While the cards had the same dimensions, the images did not align correctly in comparison to the images in the other cards. Depending on the card block content, the image would either shift upwards or downwards.