I have been struggling to align items within a div tag and despite trying various methods, I have not been successful.
.
Here is the current structure of my code:
https://i.stack.imgur.com/t9PAj.png
I attempted to use flexbox, but encountered an issue where aligning individual items to top, middle, or bottom resulted in all 3 being aligned in the same way.
Is there a solution that relies solely on Bootstrap for achieving this alignment? If not, please provide assistance with custom CSS. Thank you!
Below is the relevant code snippet (styles are usually in a separate file, but I've included them here for context):
<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>