As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs:
<div class='container'>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<h3>Title</h3>
<p style="text-align: justify">Text</p>
<h4>Line that needs to stay at the bottom</h4>
</div>
<div>...</div> <!--Additional similar div-->
<div>...</div> <!--Additional similar div-->
</div>
</div>
The current layout results in every div within the .row taking the height of the tallest div, leaving space for others. Here's an illustration:
+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||--lineIWantToFix--|
|-------text1------||--lineIWantToFix--||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||-------space------||-------space------|
+------------------+ +------------------+ +-------------------+
I envision the layout looking something more like this:
+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||-------space------|
|-------text1------||-------space------||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||--lineIWantToFix--||--lineIWantToFix--|
+------------------+ +------------------+ +-------------------+