Utilizing Bootstrap 4, my goal is to create a row where all columns are vertically centered. To achieve this, I am implementing the Bootstrap 4 class align-items-center, as recommended in this SO answer.
Here is a simplified version of what I have:
.yellow-row {
background-color: #f2c14e;
color: #141823;
}
.blue-col {
background-color: blue;
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row yellow-row align-items-center">
<div class="col-lg-7 blue-col text-center">
<h1>Testing</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quasi omnis accusantium deserunt laboriosam magni veniam reprehenderit </p>
</div>
<div class="col-lg-5 text-center">
<h1>Just a test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus exercitationem mollitia officia natus tempora eos alias velit odit vitae ex! Nemo sint molestias deleniti corrupti placeat& lt;/p>
<p>Officiis repudiandae obcaecati temporibus adipisci aliquam eius quo architecto similique corporis reiciendis vel repudiandae pariatur? Fugiat saepe voluptates autem fugit molestiae asperiores atque quam illo eligendi doloremque& lt;/p>
</div>
</div>
</div>
</body>
</html>The code snippet above renders output on wider screens like this:
https://i.sstatic.net/kHHQm.png
The expected result is for the blue column to match the height of the parent row (and therefore the other column). I've experimented with adding min-height: 100% and height: 100% to the .blue-col class without success. Additionally, applying the Bootstrap 4 class h-100 to the blue-col didn't yield the desired outcome.
I believe there might be a gap in my understanding of how flexbox and vertical centering function in Bootstrap 4.