Twitter's Bootstrap mobile: more columns

Question

Regarding twitter bootstrap, I currently have a design showing pictures in a grid

<div class="row-fluid">
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  <div class="image span-4"></div>
  ....
</div>

This works quite well, showing 3 pictures in a row on desktop and tablet.

On mobile, they only show one under each other. Do I have the possibility to show 2 columns next to each on mobile?

Thanks for your help

Shrewmouse

Twist the phone? I'm guessing that the images (including padding/margin) are wider than half the available space. – Allegorical

Answer 1

Below the 768 pixel width the (fluid) grid stack the elements. Add a media query below your bootstrap css include:

    @media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } }

Note in your example code you use many span-4's in a row. The total span of a row should be max 12.

Cause you use a odd number of images, you will get the last row with one image 50%. To get images of different row together you will have to reset the display:table of your fluid row. Add an extra class to your rows like 'inline' and use the media query to reset like:

        @media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } .inline:before,.inline:after {display: inline-block; content:none;} }

Example: http://bootply.com/62893

Twitter Bootstrap 3.0

Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design). (based on TB3 RC1)

For mobile you could use the “.col-” prefixes (tiny grid) but you still got the problem with the odd number of images in a row. To fix this you could try to add 24 for columns in a row instead of 12. Or use the same solution as above for TB2.

See: http://bootply.com/70644

In Twitter Bootstrap 3.0 there will be a grid for small devices too. You can use this by adding an extra class col-small-span-* to your divs. Note span-* is renamed to col-span-*. So you will get:

     <div class="image col-span-4 col-small-span-6"><img src="//placehold.it/350x150">/div>

This will give you 3 (12/4) columns of 33% on the default grid and 2 (12/6) columns of 50% on the small grid. See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Kongo