Solution 1 :

You need to add bottom: 0 in the .kid_card h4 css.

Solution 2 :

The problem is that your <h4> is inside the <div class="text_container"> but you give the css property position: relative to <div classkid_card> which contains <div class="text_container">. You need to give the css property position: relative to <div class="text_container"> and set its size as well.

Solution 3 :

Set #coas_content height to 100%

Problem :

I’m developing a website and I need to positionate some text (h4) on the bottom of a div but I’m having problems to solve it.
I had used position tags, bottom, margin-bottom … but had no effect, so I decided to post this question searching for a solution.
This is an image of the content.

enter image description here

#coas_content {
    margin-top: 2%;
    text-align: center;
    height: 72%;
    height: 30%;
    width: 100%;
    padding: 5px;
    width: 33%;
    height: 100%;
    float: left;
    background-size: cover;
    position: relative;
.kid_card h2{
    text-align: initial;
    margin-top: 0;
.kid_card h4{
    text-align: initial;
    position: absolute;
.kid_card a{
    text-decoration: none;
    text-align: initial;
    margin-bottom: 0;
<div id="coas_content">
 <t t-if="kid_id">
  <div class="row">
   <div class="kid_card" style="background-image: 
    <div class="text_container">
     <h4><a href="">
      <i class="fa fa-asterisk"></i>
       Ver calificaciones</a></h4>


Comment posted by…

Take a look at

Comment posted by Put text at bottom of div

Does this answer your question?