8 bootstrap tips: Tip 2-1

Tip 2, option 1: Vertical align middle

by Rafael Ramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row font0">
    <div style="height: 50px;" class="col-xs-4 center-vertical font14">
      Content with extra height
    </div>
    <div class="col-xs-4 center-vertical font14">
      Content normal
    </div>
    <div class="col-xs-4 center-vertical font14">
      Content normal
    </div>
    <div class="col-xs-4 center-vertical font14">
      Content normal
    </div>
    <div style="height: 50px;" class="col-xs-4 center-vertical font14">
      Content with extra height
    </div>
  </div>
</div>

CSS

.center-vertical {
  display: inline-block;
  float: none;
  vertical-align: middle;
}

/* Hack to fix the 12 columns issue */
.font0 { font-size: 0; }
.font14 { font-size: 14px; }

/* This styles are just to make it look nice, but not necessary */
.container-fluid {background-color: #eee;border: 1px solid #e1e1e8;border-radius: 5px;}
.row { padding: 5px; }
.col-xs-4 {background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);border-radius: 5px;padding: 5px;}