One nightmare of front end developer is the columns alignments, it was easy in the ’90 with table but it is very annoying with div.

Now I have finally found the solution until the web rules will change again.

I mention this good article from Minimit regarding the ability to create columns with same height and different vertical alignment.

Vertical alignment on Bootstrap 3 columns with equal height

UPDATED

20/12/2004 – Removed the container class and improved the row class, now inside .row. Fixed ie8 not removing the float.
10/02/2005 – Fixed width of the columns. Added full height solution and improved demo.

The Solution

The Markup

You have to add the class .row-same-height inside the row, and also add.col-xs-height to the columns.

 
 
  1. <div class="row">
  2.   <div class="row-same-height">
  3.     <div class="col-xs-6 col-xs-height"></div>
  4.     <div class="col-xs-3 col-xs-height col-top"></div>
  5.     <div class="col-xs-2 col-xs-height col-middle"></div>
  6.     <div class="col-xs-1 col-xs-height col-bottom"></div>
  7.   </div>
  8. </div>

If you want to restrict the effect to a certain media query, just use .col-sm-height or .col-md-height or .col-lg-height. You can also use different column sizes on each media query.

 
 
  1. <div class="row">
  2.   <div class="row-same-height">
  3.     <div class="col-xs-12 col-sm-6 col-sm-height"></div>
  4.     <div class="col-xs-6 col-sm-3 col-sm-height col-top"></div>
  5.     <div class="col-xs-6 col-sm-2 col-sm-height col-middle"></div>
  6.     <div class="col-xs-6 col-sm-1 col-sm-height col-bottom"></div>
  7.   </div>
  8. </div>

You choose the aligment of each column by using the classes .col-top or.col-middle or .col-bottom.

To have columns full height use the class .row-full-height and .col-full-height.

 
 
  1. <div class="row">
  2.   <div class="row-same-height row-full-height">
  3.     <div class="col-xs-6 col-xs-height col-full-height"><div class="item"><div class="content"><br><br><br><br><br><br><br></div></div></div>
  4.     <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>
  5.     <div class="col-xs-2 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>
  6.     <div class="col-xs-1 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>
  7.    </div>
  8. </div>

The Css

The styles for the columns of same height are three, repeated for each responsive media query.

 
 
  1. /* columns of same height styles */
  2. .row-full-height {
  3.   height: 100%;
  4. }
  5. .col-full-height {
  6.   height: 100%;
  7.   vertical-align: middle;
  8. }
  9. .row-same-height {
  10.   display: table;
  11.   width: 100%;
  12.   /* fix overflow */
  13.   table-layout: fixed;
  14. }
  15. .col-xs-height {
  16.   display: table-cell;
  17.   float: none !important;
  18. }
  19. @media (min-width: 768px) {
  20.   .col-sm-height {
  21.     display: table-cell;
  22.     float: none !important;
  23.   }
  24. }
  25. @media (min-width: 992px) {
  26.   .col-md-height {
  27.     display: table-cell;
  28.     float: none !important;
  29.   }
  30. }
  31. @media (min-width: 1200px) {
  32.   .col-lg-height {
  33.     display: table-cell;
  34.     float: none !important;
  35.   }
  36. }

Then just add the alignments Css.

 
 
  1. /* vertical alignment styles */
  2. .col-top {
  3.   vertical-align: top;
  4. }
  5. .col-middle {
  6.   vertical-align: middle;
  7. }
  8. .col-bottom {
  9.   vertical-align: bottom;
  10. }

Restrictions

With column of same height in effect, you can have only one line of columns in the same row, and the line of columns is 100% of the row.

Applying Boostrap push, pulls and offset breaks the layout, they’re not supported by this solution.

IE8 Support

The code works also on IE8 only if you make Bootstrap 3 work on IE8. To make it work you need to use Respond.js and follow the respond.js guidelines:

  • Change the Bootstrap 3 Css netdna.bootstrapcdn.com to a local file: Respond.js only works with local Css files unless additional steps are taken.
  • Change the Css from a style element to an external local Css with link rel=”stylesheet”: Respond.js doesn’t parse Css referenced via @import, nor does it work with media queries within style elements.
  • Reference the Respond.js script after all of your Css.