Flexbox Vertical and horizontal center with bootstrap classes

Question

I am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;.
    align-items: center;
}

I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.

Answer 1

Bootstrap 4

Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.

---

Bootstrap 3.x (orignal answer)

It will center both horizontally and vertically if you make the div and it's containers 100% height:

html,
body,
.fluid-container {
    height: 100%;
}

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
}

Demo

Another option (for modern browsers) is to set the full height using vh viewport unit:

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    height: 100vh;
}

Demo 2