Question

I’m working on a website with Twitter Bootstrap.

I have a row with 4 columns :

%ul.thumbnails
  %li.span3
  .thumbnail
    %a{href:"#"}
      %img{src:"http://placehold.it/260x180", alt:""}
    .thumb_info
      %h5= truncate("Dot. The world smallest stop motion", length:25)
      %p
        %i.icon-eye-open
        11
        %i.icon-heart
        1  

 %li.span3
  .thumbnail
    %a{href:"#"}
      %img{src:"http://placehold.it/260x180", alt:""}
    .thumb_info
      %h5= truncate("Dot. The world smallest stop motion", length:25)
      %p
        %i.icon-eye-open
        11
        %i.icon-heart
        1
 %li.span3
  .thumbnail
    %a{href:"#"}
      %img{src:"http://placehold.it/260x180", alt:""}
    .thumb_info
      %h5= truncate("Dot. The world smallest stop motion", length:25)
      %p
        %i.icon-eye-open
        11
        %i.icon-heart
        1
 %li.span3
  .thumbnail
    %a{href:"#"}
      %img{src:"http://placehold.it/260x180", alt:""}
    .thumb_info
      %h5= truncate("Dot. The world smallest stop motion", length:25)
      %p
        %i.icon-eye-open
        11
        %i.icon-heart
        1

I am using a responsive design so the columns adapts. However, on some scree displays, I get a bad result.

This is the desired result I get on my normal scree size :

And this is what I get when I shrink my browser window

However, if I shrink more, the result looks like the first one…

My guess is that the picture format (260×180) is not good for 4 columns. I just don’t know what size would be good…

Answer 1

You need to wrap elements that use the bootstrap grid .span{n} classes within a .row class. The .row class has a negative margin that absorbs the left margin of the .span{n} class.

Your code might look like this:

.row
  %ul.thumbnails
    %li.span3
       ... your content here ...
    %li.span3
       ... your content here ...
    %li.span3
       ... your content here ...
    %li.span3
       ... your content here ...

There is an example in the docs here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

Or, have a look at the Twitter provided example layouts here: http://twitter.github.com/bootstrap/examples.html