Struggling to align Bootstrap's card deck vertically? One card with shorter text is causing a mismatch and you're not sure how to fix it.
On the same page, you want three cards displayed horizontally on desktop and stacked vertically on mobile. That's why you added extra margin in your 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>
To align the container itself, add height in the CSS along with some margins and regular browser reset properties.
* {
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;
}