Bootstrap 4 - align anchor with heading element in card-head - html

Question

I am using Bootstrap 4+ to create a card with collapsable card-body, triggered by a link in the card-head.
<div class="card text-left mb-3 mt-3">
<div class="card-head p-3">
<h4>How do we get started?</h4>
<a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>
The tag showing "more" is not lining up vertically inline with the heading element next to it.
It looks like this in chrome:
How can I get the heading and "More" link (vertically) inline with each other? thereby reducing the wasted vertical height.

Answer 1

Just add d-flex justify-content-between classes with your card-head class will resolve your issue. I hope it'll help you out. Thanks
Bootstrap 4 Flexbox - Documentation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card text-left mb-3 mt-3">
<div class="card-head p-3 d-flex justify-content-between">
<h4>How do we get started?</h4>
<a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

You can use d-flex align-items-center which is available in Bootstrap 4+ in your card-head and also you don't need to use float-right instead you can use ml-auto. Something like this
<div class="card text-left mb-3 mt-3">
<div class="d-flex align-items-center card-head p-3">
<h4>How do we get started?</h4>
<a class="ml-auto" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
More
</a>
</div>
<div class="collapse" id="collapse1">
<div class="card card-body">
<p>Content</p>
</div>
</div>
</div>