I'm currently using Bootstrap 4 and facing an issue where I want to keep a row with some columns at the bottom of the page. However, when I add position fixed and set it to bottom, the placement gets disrupted and does not stay centered. I suspect this might be related to flex?
Here is the link to the JSFiddle for reference: http://jsfiddle.net/1dLrfsbh/1/
<div class="container-fluid">
<div class="mt-3 text-center justify-content-center">
<img src="https://via.placeholder.com/800x200" class="img-fluid logo" />
<div class="chk-actions">
<div class="row">
<div class="col-lg-6">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/800x200" />
</a>
</div>
<div class="col-lg-6">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/800x200" />
</a>
</div>
</div>
</div>
.chk-actions {
position: fixed;
bottom: 20px;
}
.chk-actions a {
margin-bottom: 10px;
}