Learning the new Flex features in Bootstrap has been quite a journey for me. I must confess that I've had little experience with Flex before, especially since it wasn't well-supported in older versions.
If you're curious, here's a link to my CodePen showcasing what I've been working on:
http://codepen.io/youradds/pen/egLoVq
Essentially, my goal is to make all the columns equal in height while aligning the content at the bottom of each cell.
Here's a snippet of the code I'm currently using:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary align-self-end">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
Piscine
</label>
<label class="btn btn-secondary align-self-end">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
foo bar<br>
foo bar<br>
foo bar<br>
</label>
<label class="btn btn-secondary align-self-end">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
foo bar<br>
foo bar<br>
</label>
<label class="btn btn-secondary align-self-end">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
foo bar<br>
foo bar<br>
foo bar<br>
foo bar<br>
</label>
<label class="btn btn-secondary align-self-end">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
foo bar<br>
foo bar<br>
foo bar<br>
</label>
</div>
Despite my efforts, I still haven't been able to achieve uniform row heights as displayed below:
https://i.sstatic.net/p1wME.jpg
I've experimented with various approaches but nothing seems to work. Any suggestions or guidance would be greatly appreciated.