diff --git a/site/docs/4.2/examples/blog/index.html b/site/docs/4.2/examples/blog/index.html
index c2e1395acb..3513f22c0a 100644
--- a/site/docs/4.2/examples/blog/index.html
+++ b/site/docs/4.2/examples/blog/index.html
@@ -41,7 +41,7 @@ extra_css:
     </nav>
   </div>
 
-  <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
+  <div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
     <div class="col-md-6 px-0">
       <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
       <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
@@ -51,31 +51,31 @@ extra_css:
 
   <div class="row mb-2">
     <div class="col-md-6">
-      <div class="card flex-md-row mb-4 shadow-sm h-md-250">
-        <div class="card-body d-flex flex-column align-items-start">
+      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-primary">World</strong>
-          <h3 class="mb-0">
-            <a class="text-dark" href="#">Featured post</a>
-          </h3>
+          <h3 class="mb-0">Featured post</h3>
           <div class="mb-1 text-muted">Nov 12</div>
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#">Continue reading</a>
+          <a href="#" class="stretched-link">Continue reading</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" %}
         </div>
-        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" %}
       </div>
     </div>
     <div class="col-md-6">
-      <div class="card flex-md-row mb-4 shadow-sm h-md-250">
-        <div class="card-body d-flex flex-column align-items-start">
+      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
           <strong class="d-inline-block mb-2 text-success">Design</strong>
-          <h3 class="mb-0">
-            <a class="text-dark" href="#">Post title</a>
-          </h3>
+          <h3 class="mb-0">Post title</h3>
           <div class="mb-1 text-muted">Nov 11</div>
-          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#">Continue reading</a>
+          <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+          <a href="#" class="stretched-link">Continue reading</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" %}
         </div>
-        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" %}
       </div>
     </div>
   </div>
@@ -84,7 +84,7 @@ extra_css:
 <main role="main" class="container">
   <div class="row">
     <div class="col-md-8 blog-main">
-      <h3 class="pb-3 mb-4 font-italic border-bottom">
+      <h3 class="pb-4 mb-4 font-italic border-bottom">
         From the Firehose
       </h3>
 
@@ -155,12 +155,12 @@ extra_css:
     </div><!-- /.blog-main -->
 
     <aside class="col-md-4 blog-sidebar">
-      <div class="p-3 mb-3 bg-light rounded">
+      <div class="p-4 mb-3 bg-light rounded">
         <h4 class="font-italic">About</h4>
         <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
       </div>
 
-      <div class="p-3">
+      <div class="p-4">
         <h4 class="font-italic">Archives</h4>
         <ol class="list-unstyled mb-0">
           <li><a href="#">March 2014</a></li>
@@ -178,7 +178,7 @@ extra_css:
         </ol>
       </div>
 
-      <div class="p-3">
+      <div class="p-4">
         <h4 class="font-italic">Elsewhere</h4>
         <ol class="list-unstyled">
           <li><a href="#">GitHub</a></li>