revamped the thumbnails examples to make them work and look better at higher resolution

4 files changed, 36 insertions, 28 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f40f0c110..ca03cecde 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 a17a4475d..37b774fb9 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 52483572e..7ba72f34d 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 312863c6b..11874b9f3 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>