Align items in div bootstrap - html

Question

I'm trying to align items in a div tag and I have tried a couple ways but failed to do so.
.
Basically this is what I have:
I tried using flex but when I align individual items to top, midlde or bottom, all 3 get aligned that way.
Is there a way I can do it using bootstrap only? and if not please help me with css. Thank you!
This is my code (the styles are in a separate file but I minimized it into the html code for this question):
<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
<div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
<div class="--I tried flex and different aligns--">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
<%=user_data.projects[i].category%>
</p>
<h6 class="font-weight-bold">
<%=user_data.projects[i].title%>
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
</div>
</div>
</div>

Answer 1

You can use the classes d-flex, flex-column and justify-content-around to solve this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
<div class="card card-image">
<div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
<div class="d-flex flex-column justify-content-around">
<p class="red-text">
<i class="fa fa-pie-chart"></i>
1st item
</p>
<h6 class="font-weight-bold">
2nd item
</h6>
<a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
<i class="fa fa-clone left"></i> View
</a>
</div>
</div>
</div>