Working with bootstrap 4.0.0, the code snippet below showcases my current setup:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
<h5>Title</h5>
<p style="font-size:24px;">text text text</p>
<button type="button" class="btn btn-primary"> Click me </button>
</div>
</div>
... repeated multiple times
</div>
</div>
The goal is to create a grid layout with rows of jumbotrons in sets of three. However, I am encountering issues trying to make the jumbotrons stretch vertically to occupy 100% of their respective row's height while maintaining individual heights for each one. The desired layout has the title and paragraph aligned at the top, and the button positioned at the bottom of each jumbotron.
What steps can be taken to achieve this design? Appreciate any guidance provided. Thank you!