After scouring through various questions, articles, and Bootstrap 4 documentation, I have yet to find the solution I am seeking.
DEMO: https://jsfiddle.net/zxLLqsm0/
My goal is to create boxes with uniform height for all columns while vertically aligning the text inside them. Although I have successfully aligned the text vertically, I am still struggling with achieving consistent box heights.
Below is my HTML structure:
<div class="container">
<div class="row align-items-center">
<div class="col-4">
<div class="box">
<h6>Title 1</h6>
<p>A small description</p>
</div>
</div>
<div class="col-4">
<div class="box">
<h6>Title 2</h6>
<p>A bigger description goes here</p>
</div>
</div>
<div class="col-4">
<div class="box">
<h6>Title 3</h6>
<p>A large description is placed here to make whatever changes we need.</p>
</div>
</div>
</div>
</div>
Below is my CSS:
.container {
margin-top: 15px;
}
.box {
background-color: grey;
padding: 15px;
}