CODEWITHSUNDEEP
csstwitter-bootstrapflexboxvertical-alignment
AVEbrahimi
AVEbrahimi

Reputation: 19214

Vertical Center align a column in Bootstrap

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? items are not vertically centered

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>

Upvotes: 4

Views: 30466

Answers (1)

ashfaq.p
ashfaq.p

Reputation: 5487

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

Upvotes: 17

Related Questions