Bootstrap 4 выравнивание по вертикали блоков

Посмотрел некоторые ответы по этому вопросу здесь, но на свой вопрос не могу найти. Суть в следующем: надо выравнять блоки внутри другого по вертикали, но примеры с оф. сайта почему-то не работает. На фото как выводиться логика и внизу как желательно Как можно исправить или вариант только через JS провести?

<div class="row  align-items-center parent-row">
    <div class="col-4 ">
        <div class="row justify-content-start">
            <a href="/"><img src="<?= $logo ?>" alt="logo"></a>
        </div>
    </div>
    <div class="col">
        <div class="row justify-content-center">
            <img src="/protected/m/img/logo_copyright.png" alt="Copyright">
            ...
        </div>
    </div>
    <div class="col-4 ">
        <div class="row justify-content-end align-items-center">
            <a href="mailto:...">
                <img src="/protected/m/img/logo_email.png" alt="email"></a>
            <a href="skype:...?add">
                <img src="/protected/m/img/logo_skype.png" alt="Skype"></a>
            <a href="https://github.com/...">
                <img src="/protected/m/img/logo_githab.png"
                     alt="GitHab"></a>
        </div>
    </div>
</div>

CSS:

header, footer {
    margin: 5px 0;
    padding: 5px 0;
    height: 50px;
    border: 1px solid;
}
.parent-row {
    height: inherit;
    margin: -5px 0;
    padding: -5px 0;
    overflow: auto;
}

как желательно