homepage docs callout

docs/assets/scss/_featurettes.scss

@@ -12,6 +12,14 @@
     text-align: left;
   }
 
+  .lead {
+    margin-right: auto;
+    margin-bottom: 2rem;
+    margin-left: auto;
+    font-size: 1rem;
+    text-align: center;
+  }
+
   @include media-breakpoint-up(sm) {
     text-align: left;
   }
@@ -31,12 +39,9 @@
   font-size: 2rem;
   font-weight: normal;
   color: #333;
-
-  + .lead {
-    font-size: 1rem;
-    margin-bottom: 2rem;
-  }
+  text-align: center;
 }
+
 .half-rule {
   width: 6rem;
   margin: 2.5rem auto;

docs/index.html

@@ -78,6 +78,21 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
   </div>
 </div>
 
+<div class="bd-featurette">
+  <div class="container">
+    <h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
+    <p class="lead">
+      Take Bootstrap to the next level with official premium themes. Each theme is it's own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
+    </p>
+
+    <p class="lead">
+      <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
+    </p>
+
+    <img class="img-responsive center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+  </div>
+</div>
+
 <div class="bd-featurette">
   <div class="container">
     <h2 class="bd-featurette-title">Built with Bootstrap.</h2>