Layout and style grids for thumbnail

There are many variations of how to use it - try experimenting

Thumbnail style in grid demo

<ul class="thumbnails square100">
  <li>
    <a class="thumbnail nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Thumbnail style in grid demo

<ul class="thumbnails gallery-well square100">
  <li>
    <a class="thumbnail nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Thumbnail style in grid demo

<ul class="thumbnails square100">
  <li class="thumbnail">
    <a class="nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Grid for gallery

<ul class="thumbnails thumbnails-inline gallery-well square100">
  <li class="thumbnail">
    <a class="nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Grid for gallery

<ul class="thumbnails thumbnails-inline gallery-well gallery-small square100">
  <li class="thumbnail">
    <a class="nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Grid for gallery

<ul class="thumbnails thumbnails-inline gallery-condensed square100">
  <li class="thumbnail">
    <a class="nailthumb-container"> <img ... > </a>
  </li>
  ...
</ul>

Layout with preview image

Flexible width - span5

Layout with preview image

Fixed size preview

Layout with preview image

Flexible full width - span12

<ul class="thumbnails thumbnails-inline gallery-well gallery-small horizontal100">
  <li class="thumbnail span12"><img ... ></li>
  <li class="thumbnail"><a class="nailthumb-container"><img ... ></a></li>
  <li class="thumbnail"><a class="nailthumb-container"><img ... ></a></li>
  ...
</ul>