CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
brff19
brff19

Reputation: 834

Rails/BootStrap - Make iterated object data appear in columns

I am trying to get my cards to show-up as three in a row and then jump to the next line and put the next three. Right now, it's just putting each card right below the one above it. Can anyone help me out?

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <% @block_busters.each do |movie| %>
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="<%= movie.image_url %>" alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title"><%=movie.title%></h4>
          <p class="card-text"><%=movie.description%></p>
        </div>
      </div>
      <%end%>
    </div>
  </div>
</div>

Upvotes: 0

Views: 23

Answers (1)

DivXZero
DivXZero

Reputation: 611

You're most likely looking for the 'slice' method, try something like this:

<% @block_busters.each_slice(3) do |slice| %>
  <div class="row">
    <% slice.each do |movie| %>
      <div class="col-md-4"> <!-- 12 cols / 3 cards = 4 -->
        <!-- render your cards here, each will show up in rows of 3 -->
      </div>
    <% end %>
  </div>
<% end %>

Upvotes: 1

Related Questions