I am currently facing the challenge of vertically aligning images inside a Bootstrap grid below text with containers of varying heights.
Here is the current state: https://i.sstatic.net/Oo4UM.jpg
This is my desired outcome: https://i.sstatic.net/pDz3v.jpg
I prefer to find a solution without using JavaScript, as I believe it would only impact responsiveness.
My attempted solutions include:
- Utilizing
flexbox, but struggling to keep images aligned at the bottom - Applying
display:table-cell;andvertical-align:bottomproperties to thefigureelement, but facing issues with container height uniformity withoutflexbox - Trying out absolute positioning on the figure with
bottom:0;, however, this interferes with parent container height
The HTML structure used:
<div class="row">
<div class="col-xs-3">
<p>
Insert text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non turpis eget libero consequat fringilla vel et sem.
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
<div class="col-xs-3">
<p>
Insert more text here
</p>
<figure>
<img src="http://placehold.it/150x150">
</figure>
</div>
</div>