I am currently dealing with the .card
displayed below and struggling to get the text "You liked this." to align correctly with the Like and Comment .btn-links
under the hr
element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I have exhaustively attempted various methods such as adjusting display properties, margins, padding, and font-height to no avail. I am seeking advice on how to achieve proper alignment in this scenario.
I could potentially resolve it using floats or flexbox, but I find them to be excessive solutions. Any help offered would be greatly appreciated. Thanks.