UPDATE for Bootstrap 4
Simpler vertical grid alignement with flex-box
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); html, body { height: 100% }
<div class="h-100 row align-items-center"> <div class="col" style="background:red"> TEXT </div> </div>
Run code snippetExpand snippet
Solution for Bootstrap 3
@import url('http://getbootstrap.com/dist/css/bootstrap.css'); html, body, .container-table { height: 100%; } .container-table { display: table; } .vertical-center-row { display: table-cell; vertical-align: middle; }
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <div class="container container-table"> <div class="row vertical-center-row"> <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div> </div> </div>
It’s a simple example of a horizontally and vertically div centered in all screen sizes.