title: Footer at the bottom of div without using position absolute
body: <p>I want my .card-footer to be always at the end of my div. 
  I guess it's a better way to solve it with bootstrap 4 then what i did with position absolute.</p>
  
  <p>How it looked before i've tried to solve it</p>
  
  <p><a href="https://www.bootply.com/5xw7sfaPLs" rel="nofollow noreferrer">https://www.bootply.com/5xw7sfaPLs</a></p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="card-group "&gt;
                  &lt;div class="col-md-4 m10"&gt;
                      &lt;div class="newsbox"&gt;
                          &lt;img src="https://via.placeholder.com/350x150"&gt;
                          &lt;div class="card-body "&gt;
                              &lt;h4&gt;What is Lorem Ipsum?&lt;/h4&gt;
                              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="card-footer "&gt;
                              &lt;small class="text-muted "&gt;13 februari, 2019&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 m10"&gt;
                      &lt;div class="newsbox"&gt;
                          &lt;img src="https://via.placeholder.com/350x150"&gt;
                          &lt;div class="card-body "&gt;
                              &lt;h4&gt;What is Lorem Ipsum?&lt;/h4&gt;
                              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="card-footer "&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-12 "&gt;
                                      &lt;small class="text-muted "&gt;13 februari, 2019&lt;/small&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 m10"&gt;
                      &lt;div class="newsbox"&gt;
                          &lt;img src="https://via.placeholder.com/350x150"&gt;
  
                          &lt;div class="card-body "&gt;
                               &lt;h4&gt;What is Lorem Ipsum?&lt;/h4&gt;
                              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="card-footer "&gt;
                              &lt;small class="text-muted "&gt;13 februari, 2019&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And with position absolute :</p>
  
  <p>Se bootply :<a href="https://www.bootply.com/Tv2DWpQx3Q" rel="nofollow noreferrer">https://www.bootply.com/Tv2DWpQx3Q</a></p>
  
  <pre><code>.newsbox {
      border: 1px solid rgba(0, 0, 0, .125);
      height: 100%;
      position: relative;
  
  }
  
  .card-footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      right: 0;
  }
  </code></pre>