8 bootstrap tips: Tip 2-1

Tip 2, option 1: Flex

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 vertical-align">
    <div style="height: 50px;" class="col-xs-4">
      Content with extra height
    </div>
    <div class="col-xs-4">
      .col-xs-4
    </div>
    <div class="col-xs-4">
      .col-xs-4
    </div>
    <div class="col-xs-4">
      .col-xs-4
    </div>
    <div style="height: 50px;" class="col-xs-4">
      Content with extra height
    </div>
  </div>
</div>

CSS

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

/* 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;}