From 62f4a1571a3801c867b80c228464cc9c695f1d13 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 28 Jan 2012 22:48:25 -0800
Subject: [PATCH] revamped the thumbnails examples to make them work and look
 better at higher resolution

---
 docs/assets/css/bootstrap-responsive.css |  6 +++++
 docs/assets/css/bootstrap.css            |  2 ++
 docs/components.html                     | 28 ++++++++++++------------
 docs/templates/pages/components.mustache | 28 ++++++++++++------------
 less/responsive.less                     |  8 +++++++
 less/thumbnails.less                     |  2 ++
 6 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f40f0c110d..ca03cecde8 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -342,4 +342,10 @@
   .offset11 {
     margin-left: 1130px;
   }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
 }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a17a4475dd..37b774fb94 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2988,6 +2988,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;
diff --git a/docs/components.html b/docs/components.html
index 52483572ee..7ba72f34da 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1057,22 +1057,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -1083,7 +1083,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1093,7 +1093,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1128,7 +1128,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1139,7 +1139,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&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;/div&gt;
@@ -1154,32 +1154,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 312863c6b1..11874b9f35 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -985,22 +985,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -1011,7 +1011,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</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>
@@ -1021,7 +1021,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</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>
@@ -1056,7 +1056,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1067,7 +1067,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
       &lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
       &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
     &lt;/div&gt;
@@ -1082,32 +1082,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>
diff --git a/less/responsive.less b/less/responsive.less
index 7320990799..db2675e3db 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -358,4 +358,12 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
 
+  // Thumbnails
+  .thumbnails {
+    margin-left: @gridGutterWidth * -1;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth;
+  }
+
 }
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 0ba749059d..541fbd6a74 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,6 +27,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;