Align bottom does not seem to be working for me in Bootstrap 4.
Below is my code. I want the text to appear align to the line at the bottom. I can't use margin/padding, as sometimes, this text will be multiple lines.
How can I vertically align to the bottom?
<div style="height:55px !important;">
<span class="align-bottom">
This text should align to bottom, closer to the line
</span>
</div>
<div class="border-top">
Other content below the line
</div>
JSFiddle: https://jsfiddle.net/wqeah67v/
Bootstrap 5 (update 2021)
mt-auto or align-self-end can still be used to bottom align content in a flexbox (d-flex) div.
Bootstrap 4 (original answer)
As explained here, align bottom doesn't work inside a display:block.
Use display table-cell or flexbox to align to the bottom.
with table-cell
<div style="height:55px !important;" class="align-bottom d-table-cell">
<span>
This text should align to bottom, closer to the line
</span>
</div>
when using flexbox, auto margins work. For example margin-top: auto
<div style="height:55px !important;" class="d-flex">
<span class="mt-auto">
This text should align to bottom, closer to the line
</span>
</div>
or,
<div style="height:55px !important;" class="d-flex">
<span class="align-self-end">
This text should align to bottom, closer to the line
</span>
</div>
<div class="border-top">
Other content
</div>