0

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>
Improve this question

    1 Answer 1

    Reset to default
    1

    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 %>
    Improve this answer
    3
    • gist.github.com/BrianARuff/5f366711e763a41bc61375ed00d6a0b9 I tried what you said and it looks like each card is a little further over horizontally but are still vertically stacked.
      – brff19
      CommentedNov 16, 2017 at 20:50
    • 1
      @brff19 It's hard to say without seeing the full source, but my code is assuming you're using the default 12 column grid, and viewing only the cards. If you're viewing on a smaller screen, or have sidebars, etc., it may stack them, you can try adjusting the columns to something like col-sm-4 so they don't stack, if you need the col-md-6 to keep them contained, you might try adding another container or container-fluid inside so it creates a new grid, or just remove the wrapping row and column divs.
      – DivXZero
      CommentedNov 16, 2017 at 20:55
    • Thanks for your help, I was able to get it to work with the following code gist.github.com/BrianARuff/ed1c1acfc865757fd64e68c5aa3caeef
      – brff19
      CommentedNov 16, 2017 at 21:00

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.