Bootstrap: How to center content vertically within a column

Question

I have spent hours on this problem now and have read through countless questions, but none of the provided solutions works for me, so I'm now just gonna post my specific problem:

I want to build a row with four columns. The first three columns have pictures in them and the fourth column has a text description that I want to show vertically centered (meaning with an equal margin on the top and bottom that is obviously not fixed, but responsive to changing screen-sizes). Here's the code:

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-3 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-1 col-sm-6">
                <div class="container-fluid">
                    <p>Some text that is supposed to be vertically centered within the column</p>
                </div>
            </div>
        </div>
    </div>
</section>

It must have to do something with the Bootstrap specific classes that non of the CSS-based solutions I can find on this works. How can I make it work in this particular example? Feel free to make any changes you want on this part:

<div class="container-fluid">
    <p>Some text that is supposed to be vertically centered within the column</p>
</div>

However the rest of the structure should remain unchanged if possible (including the col-lg-1).

Your help is greatly appreciated!

Answer 1

In Bootstrap 4, add "align-self-center"-class to the col, where you want the content centred vertically.

Answer 2

You can use flexbox. Make your outer div, display: flex and use The property align-items to make it's contents vertically center. Here is the code:

#outerDiv{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}