Vertical alignment of two elements within a column

Question

I’m trying to make a layout as shown in the image. Two columns, the second being aligned with a text at the top, and another text below.

So far, what I have achieved is to align the entire text below.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col">
    <img src="http://placehold.jp/800x1000.png" class="img-fluid">
  </div>
  <div class="col align-self-end">
    <h4>NOME <b>SOBRENOME</b></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ratione reprehenderit, error qui enim sit ex provident iure, dolor, nulla eaque delectus, repudiandae commodi. Velit assumenda odit quisquam at error.</p>
  </div>
</div>

How do I align text correctly using Bootstrap 4?

Answer 1

You don’t even need extra CSS to solve the problem, only with the standard Bootstrap classes you solve.

First you need to transform the COL in a container flex, using the class d-flex, then you put the children of that container in column using flex-column, and to finish you put one at the top and the other at the base with justify-content-between

Another option is not to use justify-content-between and put the class mt-auto on the second child so that he stays at the base of the container, This will make him a margin-top automatic, pushing this element to the end of the container.

See the code as it looks:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col">
      <img src="http://placehold.jp/800x1000.png" class="img-fluid">
    </div>
    <div class="col d-flex flex-column justify-content-between">
      <h4>NOME <b>SOBRENOME</b></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ratione reprehenderit, error qui enim sit ex provident iure, dolor, nulla eaque delectus, repudiandae commodi. Velit assumenda odit quisquam at error.</p>
    </div>
  </div>
</div>