diff --git a/docs/examples/blog/blog.css b/docs/examples/blog/blog.css
index da14fce9cc..5fed564246 100644
--- a/docs/examples/blog/blog.css
+++ b/docs/examples/blog/blog.css
@@ -125,14 +125,10 @@ h6, .h6 {
 
 
 /* Pagination */
-.pager {
+.blog-pagination {
   margin-bottom: 4rem;
-  text-align: left;
 }
-.pager > li > a {
-  width: 8rem;
-  padding: .75rem 1.25rem;
-  text-align: center;
+.blog-pagination > .btn {
   border-radius: 2rem;
 }
 
diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html
index 57cfafacfb..d73f5ec690 100644
--- a/docs/examples/blog/index.html
+++ b/docs/examples/blog/index.html
@@ -104,11 +104,9 @@
             <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
           </div><!-- /.blog-post -->
 
-          <nav>
-            <ul class="pager">
-              <li><a href="#">Older</a></li>
-              <li class="disabled"><a href="#">Newer</a></li>
-            </ul>
+          <nav class="blog-pagination">
+            <a class="btn btn-outline-primary" href="#">Older</a>
+            <a class="btn btn-outline-secondary disabled" href="#">Newer</a>
           </nav>
 
         </div><!-- /.blog-main -->