I've been struggling to position a button at the bottom of the column, but so far, I haven't had any luck.
After reading this post, I added the CSS classes d-flex, flex-column, and mt-auto, but they don't seem to be working as expected. Can anyone help me figure out what I'm missing?
.my-200 {
height: 400px;
background-color: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
<div class="col-2 my-200">
</div>
<div class="col-10 flex-column">
<div class="form-row">
<div class="form-group col-12">
<label>Title</label>
<input name="comment" type="text" class="form-control" value="">
</div>
</div>
<div class="form-row mt-3">
<div class="form-group col-4">
<button class="btn btn-primary">button 1</button>
</div>
</div>
<div class="form-row mt-auto">
<div class="form-group col-4">
<button class="btn btn-dark">positioned at the bottom</button>
</div>
</div>
</div>
</div