-1

I've searched on google and this site for answers on how to vertically align columns to be centered. I've found entries with this exact title but none of them work, they all show how to align horizontally. Even the bootply's etc. links to examples which centers horizontally and not vertically.

I've followed the guide on bootstraps official site, and it is telling me to just use the class align-items-center on the row, or adding align-content-center on the column, but these doesn't work for me at all, I get no response.

Can someone tell me what I am doing wrong here?

This is the guide I used: http://getbootstrap.com/docs/4.0/layout/grid/#alignment

And I am using the latest bootstrap v4.0.0.beta-2.

Example from my code: 

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Expected result: Column with the text "test" should be located vertically centered on my page.

Actual result: Text is showing in the left upper corner of the page.

Zackarias Montell
  • 63
  • 2
  • 7

1 Answers1

1

Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs. But here in your example you haven't used row class or d-flex class in your code.

I suggest you to add row into your code..

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Now your code will center the text vertically, But within the container height. It won't be center to your html page.

Vertical Center: JS Fiddle

To make Your text to center of your page, make row div to full height 100vh

pradeep kumar
  • 983
  • 10
  • 21