Can't seem to figure out how to vertically align one title, a paragraph and a link inside a card. I tried using vertical-align utilities but they're only for inline elements.
This is what my code looks like:
.second {
background: gray;
}
.card-text {
font-size: 12px;
}
.card-title {
font-size: 29px;
}
.btn {
font-size: 12px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-6">
<div class="card">
<div class="card-block">
Some other text goes here
</div>
<div class="card-block">
<div class="second p-5">
<img src="https://placehold.it/200x200" class="rounded-circle float-left mr-4" height="200">
<h4 class="card-title mb-2">John Doe</h4>
<p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
<a href="#" class="btn btn-primary py-1 px-3">Click Here</a>
</div>
</div>
</div>
</div>The image is supposed to be on the left, while the rest of the elements are middle aligned beside it.