I'm currently working on an angular project with bootstrap 4.
Within the container, there are two rows. I specifically want one row to always be positioned at the bottom of the container.
Despite trying methods like justify-content: flex-end;, bottom:0;, and others, I haven't been able to achieve the desired layout.
It's important to note that the parent component only has min-height: 100vh; in its CSS. (This ensures the board always fills the full height)
Below is a snippet of the code for better understanding:
<div class="sight-slider bg-success">
slider goes here <br>
slider goes here <br>
</div>
<div class="container">
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
</div>
<div class="sight-logic-info">
Bla <br>
Phone <br>
Hours <br>
Website
</div>
</div>
</div>
<div class="row btn-controls"> <!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>