Bootstrap 4 align-items-bottom inside div flexbox

Question

this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div. I tried both align-items-center and also align-bottom options.

What happens

How it should be

.gear {
  height: 50px;
	}
.banner {
  height: 70px;
}

<footer>
  <div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
	<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>

Answer 1

There is no align-items-bottom class. The class name is align-items-end..

<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
        <img class="gear d-flex" src="//placehold.it/300x70">
</div>

https://www.codeply.com/go/ub6hNpd9TL