1

I have a container that contains data populated from my database as well as data created by the user on another page.

My issue is styling. Currently my page jumbles and the columns are all over the place. They appear to be following the end of the longest column.

Jumbly

enter image description here

I would like for after 3 columns a new row to be created, but I'm not sure how to go about this.

enter image description here

Note/Tricky part:- My users have the option to sort where each Column (Sales, BingBong, Game of Thrones) goes. If they want Game of Thrones first, they can make it the first column. Obviously this messes things up because each column will have a different height at different times

Most everything I've seen squishes all the columns together to create a pinterest-like look. That is not what I want and I know that my design will create white space. That is what I'm being told to create.

CatDev90
  • 11
  • 3
  • You can just use col-*-4 on each column. Your script will have to take control of how to sort and such but with the bootstrap columns it will give you 3 columns – MiltoxBeyond May 17 '16 at 15:22
  • I've got that already. I'm more referring to the fact that that still produces the 1st picture. Where you have a 2 columns stacking because the first is small...I'm looking to achieve the second picture. Which was achieved via me sorting them to look that way but I want it to be 3 columns per row no matter the sort. :) Thanks though – CatDev90 May 17 '16 at 15:49
  • You could add a `
    ` after each 3rd div.     – Tasos K. May 17 '16 at 16:02
  • Possible duplicate of [Clear Rows When Doing Multi-responsive Columns - Bootstrap](http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap) – max May 17 '16 at 16:06

2 Answers2

0

UPDATE: Here is my code to show you how I iterate through each of these departments (sales, rainbows n'sprinkles, Game of Thrones, etc).

Hopefully this makes it clear why adding a clearfix div doesn't work in my case code

CatDev90
  • 11
  • 3
0

http://www.codeply.com/go/jXuoGHHker

This worked brilliantly!!! Works with dynamic data...all I grabbed were the few lines of CSS

CatDev90
  • 11
  • 3