What's the best way to vertically align content within Bootstrap 4 grid columns?

Question

I have the following elements with Bootsrap 4(.3.1) classes:

  <footer class="container-fluid">
    <div class="row">
      <div class="col">
        Copyright &copy;
      </div>
      <div class="col text-right">
        <a class="">Back to top</a>
      </div>
    </div>
  </footer>

The height of <footer> is 100px and I'd like the content fo the cols to sit veritcally in the center of the element.

I've tried adding d-flex align-items-center to the elements (trying container, row and cols in turn) but didn't get any results.

Will I have to scrap the grid classes all together and re-do this with flex classes? Or does anyone know of a way Bootstrap can acheive this out-of-the-box using it's own classes?

Answer 1

In addition to adding d-flex align-items-center to the footer and flex-grow-1 to the row class - see demo below:

footer {
  height: 100px;
  border: 1px solid;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<footer class="container-fluid d-flex align-items-center">
  <div class="row flex-grow-1">
    <div class="col">
      Copyright &copy;
    </div>
    <div class="col text-right">
      <a class="">Back to top</a>
    </div>
  </div>
</footer>

Answer 2

You should add the height to the row. and use align-items-center to vericaly align the flex-items i.e, col

.footer {
  height: 100px;
  background: #dedede;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <footer class=" container-fluid">
    <div class="footer row align-items-center justify-content-center">
      <div class="col">
        Copyright &copy;
      </div>
      <div class="col text-right">
        <a class="">Back to top</a>
      </div>
    </div>
  </footer>