Align Vertical with Bootstrap 3

Align Vertical with Bootstrap 3

by Cristofer Sousa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section class="bg1">
  <div class="row">
    <div class="col-md-12">
      <div class="center-content">
       <h1 class="text-center"> 
        Create and organize your security controls baseline.
       </h1>
      </div> 
    </div>
  </div>
</section>

<section class="bg2">
  <div class="row">
    <div class="col-md-12">
      <div class="center-content">
       <h1 class="text-center"> 
          Inspect and review outcomes against business deliverables.
       </h1>
      </div> 
    </div>
  </div>
</section>


<section class="bg3">
  <div class="row">
    <div class="col-md-12">
      <div class="center-content">
       <h1 class="text-center"> 
          Understand confidently which business objectives are at risk.
       </h1>
      </div> 
    </div>
  </div>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.center-content{
    width : 100vw;
    height : 30vh;
    display : table-cell;
    vertical-align : middle;
    float:none;
}

h1{
    color:#eee;
    text-shadow: 2px 2px #2B2C28;
    font-family: 'Open Sans', sans-serif;
}


.bg1{background-color:#3CB9B5;}

.bg2{background-color:#3D9DBD;}

.bg3{background-color:#A357C7;}