Bootstrap card deck can't get card height to align - css

Question

I've used Bootstrap's card deck but i can't seem to make it align vertically.
One of the cards has shorter text and creates a mismatch, not sure how to fix it..
I should also mention that i want a 3 card display in that page on desktop and on mobile it stacks up vertically so that why i needed the extra margin in my css file.
<div class="container mw-100 h-100">
<div class="row h-100 align-items-center">
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img1.jpg" alt="img1" />
<div class="card-body">
<h5 class="card-title">Title 1</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg" onclick="startGame()">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img2.jpg" alt="img2" />
<div class="card-body">
<h5 class="card-title">Title 2<span class="badge badge-secondary">New</span></h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.
</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<div class="card">
<img class="card-img-top" src="img3.jpg" alt="img3" />
<div class="card-body">
<h5 class="card-title">Title 3<span class="badge badge-secondary">New</span></h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero voluptas, vero voluptatibus odio nostrum facilis aut! Dolores, non accusamus. Sapiente et minus sint numquam. Labore laborum ut a commodi doloremque.</p>
<p class="card-text">
<button type="button" class="btn btn-dark btn-lg">Start</button>
</p>
</div>
</div>
</div>
</div>
</div>
As for other css there is only height that is needed to align the container itself and some margins along with the regular browser reset props.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.card {
margin-bottom: 0.75rem;
}
.row :first-child > .card {
margin-top: 0.75rem;
}

Answer 1

This is because you have your items aligned to the center <div class="row h-100 align-items-center"> change it to top <div class="row h-100 align-items-top"> This is in the 2nd line of your html. See here: https://jsfiddle.net/wp406n8d/4/
Also, you can get rid of this code:
.row :first-child > .card {
margin-top: 0.75rem;
}
And I'm not completely sure if you were wanting this also, but you can simply add height: 100% to the .card class to make all of the cards the same height. See here: https://jsfiddle.net/7ah6f4mo/