Bootstrap 3 columns with same height and vertically aligned

The mechanism is –

  1. Wrap all columns in one div
  2. Make that div as a Table with fixed layout
  3. Make each column as a table cell
  4. Use vertical-align property to control content position

We can make columns of same height and vertically aligned using following css and classes.

Demo Fiddle –

JsFiddle Example

Markup :

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

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</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.

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-12 col-sm-6 col-sm-height"></div>
    <div class="col-xs-6 col-sm-3 col-sm-height col-top"></div>
    <div class="col-xs-6 col-sm-2 col-sm-height col-middle"></div>
    <div class="col-xs-6 col-sm-1 col-sm-height col-bottom"></div>
  </div>
</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.

<div class="row">
  <div class="row-same-height row-full-height">

    <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>
    <div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>
    <div class="col-xs-2 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>
    <div class="col-xs-1 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>

   </div>
</div>

CSS:

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

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

Then just add the alignments Css.

/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

Pitfalls :

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 :

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.

Thanks.

Advertisements

14 responses to “Bootstrap 3 columns with same height and vertically aligned

  1. I think thi is onne of the so much significant
    info for me. And i am happy studying your article.
    But wann observation on few common things, The site taste iis ideal, the articles
    iss in point of fact excellent : D. Excsllent task,
    cheers

    Like

  2. I’m impressed, I have to admit. Seldom do I come across a
    blog that’s both equyally educative and amusing, annd without a doubt,
    you have hit the nail on the head. The issue is something
    that too few men and women are speaking intelligently about.

    Now i’m very happy I came across this during my hunt for something regarding this.

    Like

  3. Magnificent beat ! I wish to apprentice even as you amend your site, how can i subscribe for a weblog web site?
    The account helped me a applicable deal. I had been tiny
    bit acquainted of this your broadcast provided bright clear idea

    Like

  4. You actually make it appear so easy together with your presentation but I to find
    this topic to be actually one thing which I feel I might never understand.
    It kind of feels too complicated and extremely vast for me.

    I’m looking ahead to your next post, I’ll try to get the cling of
    it!

    Like

  5. I’m so happy to read this. This is the type of manual that needs to be given and not the accidental misinformation that’s at the other blogs. Appreciate your sharing this greatest doc.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s