Vertical alignment elements in a map using Bootstrap 4

Question

It is impossible to understand how to vertically align one heading, paragraph, and link inside a map. I tried using the vertical alignment utilities, but they are 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>

Run codeHide result

The image should be on the left, and the remaining elements are aligned in the middle next to it.

Answer 1

There are several different solutions. Here is one way to use flexbox utils ...

https://www.codeply.com/go/pB8HWQ0HCv

      <div class="col-6">
            <div class="card">
                <div class="card-block">
                    Some other text goes here
                </div>
                <div class="card-block d-flex">
                    <img src="https://placehold.it/200x200" class="rounded-circle mr-4 my-auto" height="200">
                    <div class="second">
                        <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>

Demo