I have the following code for a footer:
<div class="container"> <hr>
<div class="row">
<div class="col-md-6">
© BusinessName 2017.
</div>
<div class="col-md-3"> <br>
<a href="/blog"> Blog </a> <br>
<a href="/blog"> FAQ </a> <br>
<a href="/blog"> About </a>
</div>
<div class="col-md-3">
<p><strong>Contact</strong> <br> [email protected] <br> more info bla bla <br> more more more info</p>
</div>
</div> </div>
I am trying to align all content on bottom line, I've tried some things but nothing works... any bright ideas?
You can use align-items-end
from the new Bootstrap 4 flexbox utilities...
<div class="container">
<hr>
<div class="row align-items-end">
<div class="col-md-6">
© BusinessName 2017.
</div>
<div class="col-md-3">
<a href="/blog"> Blog </a>
<br>
<a href="/blog"> FAQ </a>
<br>
<a href="/blog"> About </a>
</div>
<div class="col-md-3">
<strong>Contact</strong>
<br> [email protected]
<br> more info bla bla
<br> more more more info
</div>
</div>
</div>
http://codeply.com/go/GXTF43toS9
Also, auto margins work inside flexbox. There you could use mt-auto
(margin-top:auto) to "push" the col-* to the bottom.