4

i'm in rails with bootstrap.

i have a product site with many products. i need to display my products in a grid format for the "store front". each product has a photo and some info.

i saw this post and this post but they are not what i'm looking for.

i am trying to iterate over each product using product.each while attempting to use bootstrap's grid system.

i will need to add additional products as time goes on and therefore need each product to flow from one row to the next. i have not used any additional css styling outside of bootstrap.

as of now, i appears that each products is dropping to next row and that each product is inside it's own column, but any attempt i make to resize the image or the div or col that each product is inside, everything becomes misaligned.

here is my html.erb file:

<div class="row">
 <% @products.each do |product| %>
  <div class="col-md-3">
   <div id="storeimages">
    <%= image_tag(product.image_url, class: "img-responsive") %>
    <h3><%= product.title %></h3>
    <div><%= sanitize(product.description) %></div>
    <div><%= number_to_currency(product.price) %></div> 
    <%= button_to 'Add to Cart', line_items_path(product_id: product), 
         class: 'btn btn-info btn-sm', remote: true %>
   </div>
  </div>
 <% end %>
</div>
Community
  • 1
  • 1
kacy hulme
  • 131
  • 1
  • 10

2 Answers2

13

Assuming you want rows of 4 columns, you could do something like this:

<% @products.in_groups_of(4, false).each do |group| %>
  <div class='row'>
    <% group.each do |product| %>
      <div class='col-md-3'>
        <%= image_tag(product.image_url, class: "img-responsive") %>
        <h3><%= product.title %></h3>
        <div><%= sanitize(product.description) %></div>
        <div><%= number_to_currency(product.price) %></div> 
        <%= button_to 'Add to Cart', line_items_path(product_id: product), class: 'btn btn-info btn-sm', remote: true %>
      </div>
    <% end %>
  </div>
<% end %>

This splits your data set up into groups of 4 items, then outputs a row div for each group. Then within each row, it outputs each member of the group in its own column div.

The false passed in to in_groups_of ensures that you don't try to output a column for a row where there are less than 4 items. This would happen on your last row if your total number of products was not exactly divisible by 4 since by default the function will pad out the array with nil.

Thanks to @vermin for the fill_with tip!

Jon
  • 10,678
  • 2
  • 36
  • 48
  • You can you the :fill_with option to avoid doing if product: `in_groups_of(4, false)` – vermin Jun 10 '14 at 02:34
  • Thanks @vermin - I've updated my answer to cover this. – Jon Jun 11 '14 at 19:49
  • Very simple fix to something I was also struggling with. – DNorthrup Nov 28 '16 at 17:54
  • How can you change the 4 (number of quantity per group in method in_groups_of) responsively according to the size of the device that opened it? – JuanM. Feb 27 '17 at 20:15
  • You would be better off using something like flexbox or other CSS solutions if you want a responsive layout. This isn't something you can generate from the server side if you want it to respond to screen size. – Jon Feb 27 '17 at 20:37
0

i also added the following css.

for the div.col-md-3:

#productdescription { 
 height: 375px;
 width: 200px;
}

and for the image: 

   #img {
     height: 200px;
     width: 180px;
     overflow: hidden;
    }
kacy hulme
  • 131
  • 1
  • 10