Update Holder.js to v2.8.2.

[ci skip]

docs/components/card.md

@@ -19,7 +19,7 @@ Cards require a small amount of markup and classes to provide you with as much c
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -34,7 +34,7 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -53,7 +53,7 @@ Cards support a wide variety of content, including images, text, list groups, li
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
   <div class="card-block">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
@@ -75,7 +75,7 @@ Cards support a wide variety of content, including images, text, list groups, li
     <h4 class="card-title">Card title</h4>
     <h6 class="card-subtitle text-muted">Support card subtitle</h6>
   </div>
-  <img data-src="holder.js/100%x180/?text=Image" alt="Card image">
+  <img data-src="holder.js/100px180/?text=Image" alt="Card image">
   <div class="card-block">
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     <a href="#" class="card-link">Card link</a>
@@ -196,7 +196,7 @@ Similar to headers and footers, cards include top and bottom image caps.
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -209,7 +209,7 @@ Similar to headers and footers, cards include top and bottom image caps.
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
-  <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
+  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
 </div>
 {% endexample %}
 
@@ -219,7 +219,7 @@ Turn an image into a card background and overlay your card's text. Depending on
 
 {% example html %}
 <div class="card card-inverse">
-  <img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image">
+  <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
   <div class="card-img-overlay">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -298,7 +298,7 @@ Use card groups to render cards as a single, attached element with equal width a
 {% example html %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -306,7 +306,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -314,7 +314,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -334,7 +334,7 @@ Need a set of equal width and height cards that aren't attached to one another?
 <div class="card-deck-wrapper">
   <div class="card-deck">
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -342,7 +342,7 @@ Need a set of equal width and height cards that aren't attached to one another?
       </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -350,7 +350,7 @@ Need a set of equal width and height cards that aren't attached to one another?
       </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
       <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -370,7 +370,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
 {% example html %}
 <div class="card-columns">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title that wraps to a new line</h4>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -387,7 +387,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     </blockquote>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -410,7 +410,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
   <div class="card">
-    <img class="card-img" data-src="holder.js/100%x260/" alt="Card image">
+    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
   </div>
   <div class="card card-block text-right">
     <blockquote class="card-blockquote">

docs/content/images.md

@@ -16,7 +16,7 @@ Opt your images into responsive behavior (so they never become larger than their
 Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
 <div class="bd-example">
-  <img data-src="holder.js/100%x250" class="img-fluid" alt="Generic responsive image">
+  <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image">
 </div>
 
 {% highlight html %}

docs/examples/album/index.html

@@ -63,41 +63,41 @@
 
         <div class="row">
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
 
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
 
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
           <div class="card">
-            <img data-src="holder.js/100%x280/thumb" alt="Card image cap">
+            <img data-src="holder.js/100px280/thumb" alt="Card image cap">
             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
           </div>
         </div>