How to keep bootstrap columns of same size so that they snap correctly?

Question

I'm building a simple site with bootstrap columns, but I would like for them to stay with the same height, since as of right now, if the last column in the row is short in height, the next one gets placed below it instead of on the next row to the left. How could I do this?

.col-xs-3 {
  border: 1px solid red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row ">
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
    <div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

edit: since the snippet isn't showing correctly to show my issue, here is a codepen: http://codepen.io/sgarcia-dev/pen/zqbjBg

edit2: I saw the other threads, but those show how to set them to the same height without needing columns to be responsive. I can't use flexbox for IE reasons, and I need to keep the HTML clean enough so that these columns have more than one column size (col-md-3, col-xs-6, etc). My current solution which for some reason doesn't work is doing this:

.col-sm-3:nth-child(3n):after {
  content: "";
  display: table;
  clear: both;
}

Can someone help?

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Roger, May 11 '16 at 17:45
@Neoaptt I checked that thread and none of the solutions work as they should. They are good if you don't need overflowing columns to snap — sgarcia.dev, May 11 '16 at 17:52

score 1 · Answer 1 · answered May 11 '16 at 17:45

Placing <div class="clearfix"></div> should fix the issue

<div class="container">
  <div class="row ">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>
    <div class="clearfix"></div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

This would break my columns if I tried to also add col-md-6. I don't want to hardcode the clearfix in a non responsive way — sgarcia.dev, May 11 '16 at 18:05

score 1 · Answer 2 · answered Jun 10 '16 at 22:04

From the question and your comments on previous replies, it sounds as if you do not actually want/need equal sizes columns (which would include stuff such as backgrounds, borders extending to the same height for all, which would be rather easy to achieve with flexbox - maybe as nice-to-have in supporting browsers), at least not as the main goal; but you rather just want the "boxes" that flow onto a second (, third, ...) "row" or rather line to all have the y-position of their top edge match that of the bottom edge of the highest column in the previous row.

That is quite easy to achieve, if you forgo bootstrap's floating, and use display:inline-block on the columns instead.

Then of course you will have to eliminate the space between the columns that inline-block brings with it - but that is a well known issue with several possible fixes, see https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - I chose the font-size 0 on the parent element here, but if you need to satisfy older IE you might need to use an absolute font-size for the "re-set" on the columns rather than the rem I used in the example.

.row {
  font-size: 0; /* fight white space */
}
.col-md-3,
.col-sm-6 { /* add selectors for more of the col-variants if needed */
  border: 1px solid red;

  float: none; /* disable floating */
  display: inline-block; /* make inline-block instead */
  vertical-align: top; /* have top edges of elements on one line align */

  font-size: 1.5rem; /* reset font-size */
}

http://codepen.io/anon/pen/ezJQLM

IMHO this solution has a nice benefit/advantage in that you don't need to alter anything regarding bootstrap's column width definitions or wrestle floats into shape using adventurously placed clearfixes.

Evan Bechtol · Answer 3 · 2016-05-11T17:50:03.847

The reason that you have 1 col getting pushed below the other is becuase you are using the class: col-xs-3 with 5 col's. Bootstrap works off the fact that you can only have an additive total of 12 per "row" on the same "row"

3 * 5 = 15, so you get 1 pushed down to it's own "row, allowing 4 to be on the same row; 3 * 4 = 12.

If you instead use the col-xs-2 class, you will have all on the same "row"; 2 * 5 = 10

Do the following to correct your problem:

.col-xs-2 {
  border: 1px solid red;
}

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row ">
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio!</div>
    <div class="col-xs-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>

EDIT PER COMMENTS:

To push the other column to it's own row, place it in another div that has the row class.

    <div class="container">
  <div class="row ">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nisi, quia. Nobis, quam, provident. Quam quidem reiciendis, aliquid fugiat assumenda deserunt officiis, animi ad magnam explicabo officia dolorem perspiciatis et?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quibusdam, odit consequuntur, eligendi, laborum dolores modi, dignissimos praesentium cumque aut obcaecati at. Quaerat ducimus, nam, sint perspiciatis tenetur distinctio nobis.</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos labore, delectus dignissimos, laudantium, similique tempore cumque voluptatum placeat eos minima modi, veritatis! Cumque, asperiores eveniet animi architecto adipisci voluptatum sed?</div>
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem</div>

  </div>
  <div class="row">
    <div class="col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolorum pariatur optio vel molestiae quo commodi quidem, nostrum porro dicta explicabo assumenda, beatae. Autem voluptatem laudantium facilis, iste at, nesciunt!</div>
  </div>
</div>


.col-sm-3 {
  border: 1px solid red;
}

varun's answer is a bit more elegant than my own, and will fix your problem — Evan Bechtol, May 11 '16 at 17:55
My bad...I really should have included a lot more info. See my update. I need the columns to mantain their ability to be responsive and have more than one column size at once (example: `
`) — sgarcia.dev, May 11 '16 at 17:58
I know using a clearfix or row element after the 4th element will fix this, but this will remove the ability of my columns to be col-xs-6 and col-md-3 at once. Sorry I wasn't clearer — sgarcia.dev, May 11 '16 at 17:59

How to keep bootstrap columns of same size so that they snap correctly?

3 Answers3

Linked