Dynamically create rows and columns in bootstrap / rails

Question

Using Rails with bootstrap I'm trying to layout a page which will have an unknown number of blocks of content on it. On small screens there should be 1 column, on medium screens 2 columns, and on larger screens 3 columns.

Such as...

However I can't work out how to slice up the content so it works reliably. Currently I have this in my view :

<div class="container"> <% @posts.each_slice(3) do |posts| %> <div class="row"> <% posts.each do |post| %> <div class="col-sm-6 col-lg-4"> <img src="<%= post.image %>" class="img-responsive"> <h2><%= post.title %></h2> <h6><%= post.created_at.strftime('%b %d, %Y') %></h6> <p> <%= raw(post.body).truncate(358) %></p> </div> <% end %> </div> <% end %> </div>

But this produces...

I've tried changing the each_slice(3) and class="col-sm-6 col-lg-4" however regardless of the combinations I choose one of the medium or large views breaks.

How do I reliably achieve the desired effect above regardless of the number of items on the page?

Box 4 is getting bumped down because either box three is a little too wide, or box 2 is too high and so the layout is breaking. If you set a hard limit on height for those boxes does the layout then look the way you want it to? — Rockwell Rice, CommentedNov 25, 2016 at 14:24
Not if it solves the problem ;-) Within each block there will be an image (responsive), a title, a date then a chunk of text. The chunk of text will be truncated if too long. The text block however can be a fixed height meaning that each content block can be a fixed height. — dwkns, CommentedNov 25, 2016 at 14:24
Yeah.. the text content makes the columns different heights. — Carol Skelly, CommentedNov 25, 2016 at 14:51

Community · Accepted Answer · 2017-05-23 11:46:41Z

When the content of the columns is the same height, the grid wraps evenly: http://www.codeply.com/go/8w2INqz3e1

When the content of the columns is different heights, the grid wraps unevenly, causing gaps.. http://www.codeply.com/go/1LBtvtDnzA

To fix this, you need to use responsive resets as described in this answer..

Bootstrap row with columns of different height

For example, a CSS clearfix approach in your case would work like this..

@media (min-width: 1200px) { .row > .col-lg-4:nth-child(3n+1) { clear: left; } } @media (max-width: 992px) { .row > .col-sm-6:nth-child(2n+1) { clear: left; } }

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

Actually the real problem was that I was creating multiple rows rather than just one.bootply.com/hL0Q7I9kmy When i create just one row, then the height issue crops up. But it has given me a solution. Thanks. — dwkns, CommentedNov 25, 2016 at 14:51

Collectives™ on Stack Overflow

Dynamically create rows and columns in bootstrap / rails

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related