Fixed position element within a bootstrap 4 column - html

Question

I am trying to have a bar sit at the bottom of the users screen, but only within a column. I can use position:fixed; bottom:0; if I want the element to stretch across the entire screen, but I can't figure out how to make the bar stay within the column. See picture for example
In the above picture, I want the Like, Comment, Share box to always be at the bottom of the users screen, but stay within the column it's in.
I'm using bootstrap 4, and you can see the website here: https://www.arelplane.com/#arelenglish
EDIT:
HTML of page
<div class='container-fluid user-profile'>
<div class='row'>
<div class='col-md-3 col-12 d-none d-md-block remove-lr-padding' id='sticky-sidebar'>
<div class='row mt-5 mb-5 align-center'>
<div class="col-12">
Some text
</div>
</div>
<div class="row social-module">
<div class="col-4">
Like
</div>
<div class="col-4">
Comment
</div>
<div class="col-4">
Share
</div>
</div>
</div>
<div class='col-md-9 col-12 remove-lr-padding' id='user-map'>
<div class="user-map" id="cesiumContainer"></div>
</div>
</div>
</div>
CSS
.social-module {
background-color: blue;
// position:fixed;
bottom:0;
width: 100%;
margin-left: 0;
margin-right: 0;
}
Edit 2:
Fiddle: https://jsfiddle.net/arel/9t3tnhzt/3/

Answer 1

This is how you make the bar stay at the bottom of the column:
<div class="d-flex align-items-end">...</div>
Alternatively, add the align-items-end class to that column.
No need for custom css in Bootstrap 4.
Here's a working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container-fluid user-profile">
<div class="row">
<div class="col-4 remove-lr-padding" id="sticky-sidebar">
<div class="row text-center">
<div class="col-12 bg-warning" style="min-height: 100vh;">
<p>Feature requests? Questions?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate temporibus assumenda molestias laborum ipsam quisquam, nisi, aspernatur quia, ratione ipsum illo cum exercitationem nostrum dolor corrupti ducimus sunt provident harum. Eum, ullam id! Adipisci perspiciatis reiciendis minus quisquam culpa nobis voluptatem suscipit iusto dolores hic ab impedit incidunt rem labore praesentium, sed itaque voluptates distinctio vero temporibus quia atque magni ratione. Ratione, sit maiores asperiores architecto deserunt ducimus dignissimos? Error doloremque reiciendis repellendus esse dolor at expedita non. Ipsum maxime optio quasi, ratione pariatur excepturi aperiam. Dolores nisi magni est suscipit placeat nobis quaerat fugit culpa laboriosam, quam autem aut nesciunt fuga reiciendis dolor omnis doloremque ab corporis dicta adipisci eos amet ipsa. Qui beatae possimus pariatur nemo ducimus autem, architecto officia libero nisi quo, a earum repellendus explicabo cumque quidem consequatur sapiente ipsam molestias molestiae, nostrum sed nesciunt neque. Ex accusantium inventore quam! Commodi tempora eligendi possimus nam ut similique quidem, rem enim, quo quisquam autem accusantium! Suscipit error a quidem adipisci. Repellat maxime nesciunt id quasi deleniti, consectetur, est eius commodi doloremque odit, fugiat! Consequatur modi distinctio reiciendis natus et quibusdam eum doloribus temporibus delectus obcaecati laboriosam earum, ad eveniet! Ea, necessitatibus perferendis, nostrum aperiam saepe voluptates reiciendis odit, quis porro ipsa omnis ab iste doloribus, cupiditate nobis eos enim cum molestias facilis laudantium ex. Hic at impedit in alias.</p>
</div>
<div class="row social-module position-sticky fixed-bottom m-0 w-100 py-2 bg-primary">
<div class="col-12 col-md-4">
Like
</div>
<div class="col-12 col-md-4">
Cmnt
</div>
<div class="col-12 col-md-4">
Share
</div>
</div>
</div>
</div>
<div class="col-8 remove-lr-padding" id="user-map">
hello
</div>
</div>
</div>
I just added the h-100 class to the row and then added the position-sticky class to the other row.
Oh, and I ripped out your margins. :-)