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!

Possible duplicate of [vertical-align with Bootstrap 3](https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Yates, Jun 23 '17 at 09:33

score 36 · Answer 1 · answered Apr 22 '19 at 20:58

36

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

answered Apr 22 '19 at 20:58

MrOrhan

877
6
21

Soheil Pourbafrani · Accepted Answer · 2017-06-23T12:10:26.343

25

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;
}

edited Jun 23 '17 at 12:10

answered Jun 23 '17 at 09:39

Soheil Pourbafrani

3,249
3
32
69

Thank you, same as the answer from @TheLiquidCharcoal, please see my comment above. :-) – tinymarsracing Jun 23 '17 at 11:52
@Adrian My pleasure, I updated my answer, you should add, `flex-wrap: wrap;`.Pls check my answer as correct answer if it helps. – Soheil Pourbafrani Jun 23 '17 at 12:07
Wow, this worked! I can't believe this is not in any of the other questions out there. :-D Thanks!! Maybe, for future readers, you can add in your original reply that the css properties should be applied to the .row div. – tinymarsracing Jun 23 '17 at 12:21

score 1 · Answer 3 · answered Jun 23 '17 at 10:22

1

All you need to do is adding below snippet to your CSS.

just like this.

.row{ display: flex; align-items: center;}

I tried the same code and got output too. if you want to see, download the file and run it.

https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0

answered Jun 23 '17 at 10:22

TheLiquidCharcoal

163
7

Yay, this worked in lg! But when changing screen-size to md or sm it will prevent the line break from happening messing up the layout. Is there any way around that? I also tried applying the css to the other divs, but only using it with .row has the desired effect (in lg). Thanks! – tinymarsracing Jun 23 '17 at 11:49

score 0 · Answer 4 · answered Jun 23 '17 at 09:53

0

The following code will center items perfectly within a div:

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;

answered Jun 23 '17 at 09:53

EmmaJ

35
10

Thank you for your reply. Unfortunately, that didn't produce the desired vertical centering (I tried applying it to all the div levels and none seemed to work). – tinymarsracing Jun 23 '17 at 11:51

Bootstrap: How to center content vertically within a column

4 Answers4