How to align content bottom on Bootstrap 4 col
Row vs col, check it out https://jsfiddle.net/Julesezaar/zyh5a4rb/
For all the columns in the entire row use align-items-end
on the row
<div class="row border align-items-end">
<div class="col">
A (row align-items-end)
<br/>
A<br/>
A<br/>
</div>
<div class="col">
B
</div>
<div class="col">
C
</div>
<div class="col">
D
</div>
</div>
For a single column us align-self-end
on the col
<div class="row border">
<div class="col">
A
</div>
<div class="col">
B<br/>
B<br/>
B<br/>
</div>
<div class="col align-self-end">
C (col align-self-end)
</div>
<div class="col">
D
</div>
</div>
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.