Rails + Bootstrap responsive columns

Asked Sep 29 '15 at 18:52

Active Sep 29 '15 at 18:52

Viewed 420 times

I need to show all products in a responsive div - three products in a row on lg resolutions, two products in a row on md and sm resolutions and one product in a row on xs resolution.

What should my view markup look like? The following code doesn't work, of course, because every product display in a new row. I found similar question on Stackoverflow with using of the each_slice(3), but there was only lg resolution support in this case, and I need responsive markup.

<% @products.each do |product| %>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <%= link_to image_tag(product.productphoto.url), product_path(product) %>
    </div>
</div>

asked Sep 29 '15 at 18:52

Rustam Rakhimov

Possible duplicate: http://stackoverflow.com/questions/14207109/hiding-elements-in-responsive-layout – Leo Brito Sep 29 '15 at 18:53
The iteration should happen within the `%div.row`, not around it. – wiesion Sep 29 '15 at 18:59
your each loop should be inside of `row` and above `
`
– HolyMoly Sep 29 '15 at 19:13
@wiesion Thank you!!! – Rustam Rakhimov Sep 30 '15 at 03:39
@HolyMoly Thank you!!! – Rustam Rakhimov Sep 30 '15 at 03:43

Rails + Bootstrap responsive columns

0 Answers0