Question: 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/>

Answer: 
**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](https://stackoverflow.com/questions/7420324/vertical-align-bottom-not-working), 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>

```

Demo: <https://codeply.com/go/SOtL0ovFZR>
You can align text at bottom as follows:

```
<div style="height:55px !important; position: relative;">
  <span class="align-bottom" style="position: absolute;bottom:0;">
    This text should align to bottom, closer to the line
  </span>
</div>
<div class="border-top">
    Other content
</div>

```

Working jsfiddle link is:<https://jsfiddle.net/ez7rbk1u/>