Christophvh Christophvh - 1 month ago 10
Sass (Sass) Question

Vertically align Bootstrap panel with flexbox

I want to vertically align a Bootstrap panel using flexbox, but i can't figure it out.

html

<div class="container">
<div class="row vertical-align">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">
<p>Bla bla</p>
</div>
</div>
</div>
</div>
</div>


CSS

html, body {
height:100%;
}

.vertical-align {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}


The horizontal align works, only the vertical align doesn't do anything. The panel sticks to the top of the screen

Answer

You need to give the container a height and set the height of .vertical-align to be 100%.

html,
body {
  height: 100%;
}

.container {
  height: 100%
}

.vertical-align {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
  background-color: pink;
}

Here I've just given all containers a height of 100% but you probably want to target that different in your actual code.

http://codepen.io/anon/pen/zKZvOE