vertical-align with Bootstrap 3

Question

I\'m using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:

Answer 1

I ran into this same issue. In my case I did not know the height of the outer container, but this is how I fixed it:

First set the height for your html and body elements so that they are 100%. This is important! Without this, the html and body elements will simply inherit the height of their children.

html, body {
   height: 100%;
}

Then I had an outer container class with:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

And lastly the inner container with class:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML is as simple as:

   

     

        
Vertically Aligned
     
   

This is all you need to vertically align contents. Check it out in fiddle:

Jsfiddle