Rails + Bootstrap: How to iterate over collection of items with multiple items per row

ruby-on-rails, twitter-bootstrap

Solution

You can use in_groups_of method like:

<% @items.in_groups_of(2) do |item1, item2| %>
  <div class="row">
    <div class="col-xs-6"><%= item1.attribute1 %></div>
    <div class="col-xs-6"><%= item1.attribute2 %></div>
    <% if item2 %> <%# To take care of odd groups %>
      <div class="col-xs-6"><%= item2.attribute1 %></div>
      <div class="col-xs-6"><%= item2.attribute2 %></div>
    <% end %>
  </div>
<% end %>

With `in_groups_of` you can group the `@items` collection in a group of 2 items each and iterate over it.

UPDATE

`@items` is generated using `gem tire` and is actually type of `Tire::Results::Collection` class. In that case, you need to first convert it to an array and then apply `in_groups_of` method on it as shown below:

<% @items.to_ary.in_groups_of(2) do |item1, item2| %>
  <div class="row">
    <div class="col-xs-6"><%= item1.attribute1 %></div>
    <div class="col-xs-6"><%= item1.attribute2 %></div>
    <% if item2 %> <%# To take care of odd groups %>
      <div class="col-xs-6"><%= item2.attribute1 %></div>
      <div class="col-xs-6"><%= item2.attribute2 %></div>
    <% end %>
  </div>
<% end %>

Problem

When I want to display a collection of things in a Rails view, I usually do something like this: ``` <% @items.each do |item| %> <div class="row"> <div class="col-xs-6"><%= item.attribute1 %></div> <div class="col-xs-6"><%= item.attribute2 %></div> </div> <% end %> ``` I want to do something different though. I want to display the first 2 items in the first row, the next 2 in the second row etc. Conceptually like this: ``` <div class="row"> <div class="col-xs-3"><%= item.attribute1 %></div> <!-- first item in collection --> <div class="col-xs-3"><%= item.attribute2 %></div> <!-- first item in collection --> <div class="col-xs-3"><%= item.attribute1 %></div> <!-- second item in collection --> <div class="col-xs-3"><%= item.attribute2 %></div> <!-- second item in collection --> </div> ``` I feel like this shouldn't be too difficult, but I'm not sure how to get it done. Any help is much appreciated!

Original source