There is a row of buttons with two aligned on the left and one on the right:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* Vertically center the text there */
line-height: 60px;
background-color: #f5f5f5;
}
.fa-arrows-alt {
color: rgb(231, 81, 37);
cursor: pointer;
}<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
A div here
</div>
<div class="col-12 col-md-12">
<button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
<button type= "button" class="btn btn-outline-dark btn-sm">Delete</button>
<i class="fa fa-arrows-alt fa-2x float-right"></i>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>The desired layout for the buttons is to always stay at the bottom of the div, above the footer. Various positioning properties like absolute and fixed have been tried without the desired outcome. Any suggestions or solutions are appreciated.