0

Is is possible to force a bootstrap column to force all columns to make use of the white space above? Example: http://jsfiddle.net/tkrhkz0d/ 

<div class="row">
    <div class="col-sm-6">A<br/>A</div>
    <div class="col-sm-6">B</div>
    <div class="col-sm-6">C<br/>C<br/>C<br/>C<br/>C<br/>C</div>
    <div class="col-sm-6">D</div>
    <div class="col-sm-6">E<br/>E</div>
    <div class="col-sm-6">F</div>
    <div class="col-sm-6">G<br/>G</div>
    <div class="col-sm-6">H</div>
    <div class="col-sm-6">I<br/>I</div>
    <div class="col-sm-6">J</div>
</div>

I want all whitespace to be filled without knowing the contents of the columns

enter image description here

Tom
  • 139
  • 1
  • 14
  • Unclear as in what you trying to achieve. The fiddle is also different from the image shown – HalfWebDev Dec 31 '15 at 08:39
  • Have a look at this http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – pktangyue Dec 31 '15 at 08:47
  • I am sorry, I dont want equal heights. I want (for example) column 'D' to go up and take up the whitespace created beneath 'AA' and next to 'CC' without changing the order of the columns – Tom Dec 31 '15 at 08:50
  • 1
    i dont think its possible but you can wrap the big elements in one colm and other in one colm ? – Vitorino fernandes Dec 31 '15 at 09:02

1 Answers1

0

just change background from col-sm-6 to row! 

.row {
  background: #DDDDDD;
}

EDIT
in this case use bootstrap row for each couple of cols

jsfiddle-link

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
  • i don't care about the background. What i want to do is move up the columns to remove whitespace. – Tom Dec 31 '15 at 08:52
  • Now that I understand what you are trying to do : Take a look at masonry (http://masonry.desandro.com/) – Ianis Dec 31 '15 at 09:00