Project FH Project FH - 1 year ago 104
CSS Question

Bootstrap 3 : Vertical-align on column

I'm trying to do a vertical-align on "col-sm-12" inside of a height-defined container but this doesn't work...
I have tried a lot of different method (some of those from here) and nothing seems to work.

Here is the CSS code

.home-main-elem {
content: "";
display: block;
background: url('XXXX') no-repeat bottom left;
height: 450px;
-webkit-background-size: cover;
background-size: cover;
color: #FFF;
h1 {color: #FFF;}
.font-orange {color: #ffcc43;}
.vertical-middle {
float: none;
vertical-align: middle;
display: inline-block;

And here the HTML

<div class="home-main-elem">
<div class="container">
<div class="row">
<div class="col-sm-12 vertical-middle">
<h1>Welcome to <span class="font-orange">XXXX</span></h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum qui dolore quam et fugiat hic tenetur, quasi in doloremque reiciendis quia, blanditiis eaque adipisci explicabo, facere enim fuga repellendus sunt!
<a href="#" class="btn btn-orange">SIGN UP</a>

Thanks in advance

Answer Source

Unfortunately the Bootstrap framework does not have a great way 'Out of the box' of vertically centering the content.

There are 2 ways I can think of how to do this but it would require additional CSS and HTML.

Method 1: Use display: flex

See an example here

.wrap {
  display: flex;
  align-items: center;

The CSS flexbox model allows us to better manage how our elements are positioned.

Method 2: Use display: table

See an example here

.wrap {
  display: table;
  width: 100%;
.item {
  display: table-cell;
  vertical-align: middle;

Table cells are capable of being vertically centered within a table