Vertical Center align a column in Bootstrap

Question

I tried a dozen ways to center align column vertically in bootstrap but none worked. My problem is I don't know then height of column. Can I use flexbox? Is it embedded in Bootstrap 3?

my code :

<div class="row">

  <div class="col-sm-12">

    <div class="col-md-2" style="padding: 0px">
      <img alt="img" src="image/avatar/unknown.png" class="img-responsive forum-avatar">
    </div>

    <div class="col-md-6">
      <span class="qap-q-author">user1</span>
      <br>
      <span class="qap-q-h">test</span>
    </div>

    <div class="col-md-2">
      <span class="text-muted pull-right qap-a-cnt">
        <span>&nbsp;&nbsp;</span>
        <span class="badge">1</span>
      </span>
      <span class="qap-q-h pull-right">1</span>
    </div>

    <div class="col-md-2">
      <i class="fa fa-group" style="font-size: 32px"></i>
    </div>
  </div>
</div>

Solution

Flexbox can be used but then you will have to take care of old browsers. Center aligning a column in bootstrap is explained here perfectly. Have a look center align column in bootstrap

You can center align the columns by using flexbox.

you can add this class to parent container of your div which you want to center align:

.v-center {
   display: flex;
   align-items: center;
}

Read more about vertically aligning columns here: vertical align columns

Comments

[ashfaq.p]

I have updated my answer for vertical alignment also.