update thumbnails to fix display issues and refine aesthetics

1 files changed, 67 insertions, 48 deletions

diff --git a/docs/components.html b/docs/components.html
index 0c81aefa5..ed1ba953a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1679,53 +1679,67 @@
 
   <h2>Default thumbnails</h2>
   <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-  </ul>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+    </ul>
+  </div>
 
   <h2>Highly customizable</h2>
   <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>Thumbnail label</h5>
-          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-          <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>Thumbnail label</h5>
-          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-          <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-  </ul>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
 
   <h3>Why use thumbnails</h3>
   <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
@@ -1740,9 +1754,9 @@
   <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1751,11 +1765,11 @@
   <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
-      &lt;h5&gt;Thumbnail label&lt;/h5&gt;
-      &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;h3&gt;Thumbnail label&lt;/h3&gt;
+      &lt;p&gt;Thumbnail caption...&lt;/p&gt;
     &lt;/div&gt;
   &lt;/li&gt;
   ...
@@ -1795,6 +1809,11 @@
         <img src="http://placehold.it/160x120" alt="">
       </a>
     </li>
+    <li class="span2">
+      <a href="#" class="thumbnail">
+        <img src="http://placehold.it/160x120" alt="">
+      </a>
+    </li>
   </ul>
 
 </section>