How to keep bootstrap columns of same size so that

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?

Answer 1

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.

Answer 2

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>

Answer 3

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;
}