It has come to my attention that the new version of Bootstrap (v4) utilizes flex to present elements within a box, providing more flexibility for alignment. On my webpage, I am dealing with three boxes that have equal heights. However, the inner white elements also need to share the same height.
https://i.sstatic.net/bNFsq.png
How can I accomplish this? When I set the .tile to height:100%, the boxes end up being too long.
EDIT: I want to clarify that I am not trying to make the columns highlighted in red equal in height, as that is already achieved using standard Bootstrap classes. It's the white boxes that I need to be at full height.
.col-md-4 {
border: 1px solid red;
}
.tile {
background: #fff;
}
body {
background: grey
}
.img-fluid {
width: 100%;
}
.padding {
padding: 0 10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height three-sections">
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Text block 1</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi
clita, eu pro tation audiam.</p>
</div>
</div>
</div>
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Some random text here</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. </p>
</div>
</div>
</div>
<div class="col-md-4 align-self-stretch tile-outer">
<div class="tile">
<a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid" /></a>
<div class="padding">
<h3>Another random line</h3>
<p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has.</p>
</div>
</div>
</div>
</div>
</div>