CODEWITHSUNDEEP
twitter-bootstrap
sharataka
sharataka

Reputation: 5132

How to align images using twitter bootstrap?

I have the following code in my rails view. I am using twitter-bootstrap and am having trouble getting the formatting correct. As shown in the image, there is a gap on the second line and everything on the third row is slightly misaligned with everything on the first row (since there's white space on the second row). What I would like is 4 boxes in each row; any advice?

<div class = 'row-fluid'>
    <div class = 'span12'>
        <% @products.each_with_index do |(product),index| %>
            <div class = 'span3'>
                <center>
                    <a href = '/products/<%= product.id %>'>
                        <img style = 'width: 100px;' src = '/assets/logo/<%= product.slug.downcase %>-sq.jpg'>
                    </a><br />
                    <a href = '/products/<%= product.id %>'><%= product.name %></a>
                </center>
            </div>
        <% end %>
    </div>
</div>
<div class = 'row'></div>

enter image description here

Upvotes: 3

Views: 137

Answers (1)

Granville Schmidt
Granville Schmidt

Reputation: 399

Try this out

<% @products.in_groups_of(4, false) do |grouped_products| %>
    <div class="row-fluid">
        <% grouped_products.each do |product| %>
            <div class="span3">
               <center>
                   <a href = '/products/<%= product.id %>'>
                   <img style = 'width: 100px;' src = '/assets/logo/<%=   product.slug.downcase %>-sq.jpg'>
                   </a><br />
                   <a href = '/products/<%= product.id %>'><%= product.name %></a>
               </center> 
        </div>
        <% end %>
    </div>
<% end %>

Also, on a side note - I would highly suggest using rails routes for your links instead of manually typing them out (Ex. product_path(product) ). Also, I would advise against using center tags as they are obsolete, and would suggest using CSS.

Here's a link to the Ruby documentation for the in_groups_of method http://api.rubyonrails.org/classes/Array.html#method-i-in_groups_of

Upvotes: 1

Related Questions