Position absolute not working (bootstrap)
<p>I'm trying to get something like this<a href="https://i.stack.imgur.com/DJYjy.png" rel="nofollow noreferrer">the last element at the bottom of the footer</a>]<a href="https://i.stack.imgur.com/DJYjy.png" rel="nofollow noreferrer">1</a>
and instead i'm getting this : <a href="https://i.stack.imgur.com/lXazk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXazk.png" alt="the link doesn't fit in the footer" /></a></p>
<pre><code>&lt;footer&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;

    &lt;div class=&quot;col-md-3 col-sm-3 pad&quot;&gt;
      &lt;img src=&quot;img/footer.png&quot; class=&quot;img_footer img-responsive&quot; alt=&quot;&quot; /&gt;
    &lt;/div&gt;
      &lt;div class=&quot;col-md-9 col-sm-9&quot;&gt;
        &lt;div class=&quot;row test&quot;&gt;
          &lt;div class=&quot;col-md-8 col-lg-8&quot;&gt;
            &lt;p class=&quot;apropos text-justify&quot;&gt;A Propos&lt;/p&gt;

            &lt;p class=&quot;text_footer text-justify&quot;&gt;Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz&lt;/p&gt;
          &lt;/div&gt;
            &lt;div class=&quot;col-md-4 col-sm-4&quot;&gt;
              &lt;!-- &lt;div class=&quot;arrow_footer&quot;&gt; --&gt;
                &lt;a href=&quot;contact.html&quot; class=&quot;arrow_footer&quot;&gt;Nous contacter&lt;i class=&quot;icon-right-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;!-- &lt;/div&gt; --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>
  
<p>Here's the CSS :</p>
<pre><code>footer
 {
 width:100%;
 height:100%;
 background-color: #009900;
 }

.test
{
 position: relative;
}
.img_footer
{
 height:100%;
}
.apropos, .text_footer, .arrow_footer
{
  color:white;
}
.apropos
{
 font-weight: bold;
 font-size: 28px;
 text-transform: uppercase;
}
.pad
{
 padding:0;
}
.arrow_footer
{
 position: absolute;
  bottom:0;
  right:0;
  z-index:3;
  font-weight:500;
  font-size:24px;
  text-transform: uppercase;
  text-decoration: none;
  }
  .contact_text
  {
   text-decoration: none;

   }
  .text_footer
  {
   margin-top:50px;
  }
</code></pre>
<p>Sorry I'm learning so the code is still a little bit messy. I tried also with by putting the container (footer in display flex and playing with align-items but didn't work neither).
Someone could help me to understand ?
Thanks guys.</p>