Currently, I am making use of Bootstrap 4 along with cards and image overlay to place some text over the image. However, the text is showing up at the top of the image when I actually want it to be located at the bottom.
Below is the HTML code for the cards:
<div class="card-deck">
{% for article in article_list|slice:":3" %}
<div class="card card-inverse align-self-center">
<div class="card-header text-center">
{{ article.category|capfirst }}
</div>
<img class="card-img" src="{% static article.image %}" alt="Card image cap">
<div class="card-img-overlay">
<h4 class="card-title">{{ article.title }}</h4>
</div>
</div>
{% endfor %}