Blog

Vertical align text in a column using Bootstrap3 and CSS3

I have encountered with an problem when I wanted to align a text in one column In a row new to a bigger column in the same row

the solution was not so trivial

Suppose we have this situation :

Big Column
Some text here

The Html for this is:

  1. <div class="row ">
  2.         <div class="col-xs-6 col-md-4 col-lg-2">
  3.             <div style="height:10em;border:1px solid #000">Big Column</div>
  4.         </div>
  5.  
  6.         <div class="col-xs-6 col-md-8 col-lg-10">
  7.             <div style="height:3em;border:1px solid #F00">Some text here</div>
  8.         </div>
  9.     </div>

Here we have a typical html with Bootstrap classes like: col-xs-6 ,col-md-8 and row to make two columns in row and make it also responsive

But what if we want to vertically align the smaller right column to the middle of the right to achieve this:

Big Column
Some text here

The Html for this is:

  1. <div class="row vertical-align">
  2.              <div class="col-xs-6 col-md-4 col-lg-2">
  3.                  <div style="height:10em;border:1px solid #000">Big Column</div>
  4.              </div>
  5.  
  6.              <div class="col-xs-6 col-md-8 col-lg-10">
  7.                  <div style="height:3em;border:1px solid #F00">Some text here</div>
  8.              </div>
  9.          </div>

It is almost the same Html as before but with one difference

in line 1 we got the magic class that makes it all happen: vertical-align

the class is:

@media (min-width: 992px) {
    .vertical-align {
        display: flex;
        align-items: center;
    }
}

The flex display in this class make the parent that is the div with the row class in line 1 to control the alignment of his children (click here for more info)

the alignment here is center

It is also advised to put this class in Medium devices limitation ,meaning it will only work if the screen with is above 768px

if not , both columns will be on top of each other when the screen will shrink