v4: Update homepage, examples, and general docs styles

- Refreshes the look and feel of the homepage with fresh colors, new content, and simplified styles.
- Updates docs button styles
- Replaces bytesize icons with Bootstrap icons
- Adds themes callout to examples page

diff --git a/site/_includes/icons/circle-square.svg b/site/_includes/icons/circle-square.svg
new file mode 100644 (file)
index 0000000..432a5ab
--- /dev/null
+++ b/site/_includes/icons/circle-square.svg
@@ -0,0 +1,4 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
+  <path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
+</svg>

diff --git a/site/_includes/icons/cloud-fill.svg b/site/_includes/icons/cloud-fill.svg
new file mode 100644 (file)
index 0000000..0116a0d
--- /dev/null
+++ b/site/_includes/icons/cloud-fill.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/>
+</svg>

diff --git a/site/_includes/icons/code.svg b/site/_includes/icons/code.svg
new file mode 100644 (file)
index 0000000..2975666
--- /dev/null
+++ b/site/_includes/icons/code.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+</svg>

diff --git a/site/_includes/icons/download.svg b/site/_includes/icons/download.svg
deleted file mode 100644 (file)
index ef8af76..0000000
--- a/site/_includes/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Download</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
\ No newline at end of file

diff --git a/site/_includes/icons/droplet-fill.svg b/site/_includes/icons/droplet-fill.svg
new file mode 100644 (file)
index 0000000..41b7b58
--- /dev/null
+++ b/site/_includes/icons/droplet-fill.svg
@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
+</svg>

diff --git a/site/_includes/icons/import.svg b/site/_includes/icons/import.svg
deleted file mode 100644 (file)
index 28563c2..0000000
--- a/site/_includes/icons/import.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Import</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
\ No newline at end of file

diff --git a/site/_includes/icons/lightning.svg b/site/_includes/icons/lightning.svg
deleted file mode 100644 (file)
index bbcf24a..0000000
--- a/site/_includes/icons/lightning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Lightning</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
\ No newline at end of file

diff --git a/site/_layouts/simple.html b/site/_layouts/simple.html
index 9d869be51424d69ed1c12d5ceb2b5a4ac6869df8..833061b700fb1bb3be70acda55b1cb738f503595 100644 (file)
--- a/site/_layouts/simple.html
+++ b/site/_layouts/simple.html
@@ -7,8 +7,10 @@ layout: default
     <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
     <p class="bd-lead">{{ page.description | smartify }}</p>
     {%- if page.title == "Examples" -%}
-    <a href="{{ site.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
-    <a href="{{ site.download.dist_examples }}" class="btn btn-lg btn-bd-primary mt-3 mt-sm-0 ml-sm-3 ml-md-5" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download Examples</a>
+    <div class="d-flex flex-column flex-sm-row">
+      <a href="{{ site.download.dist_examples }}" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
+      <a href="{{ site.download.source }}" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+    </div>
     {%- endif -%}
   </div>
   {% include ads.html %}

diff --git a/site/docs/4.4/assets/img/bootstrap-icons.png b/site/docs/4.4/assets/img/bootstrap-icons.png
new file mode 100644 (file)
index 0000000..73f45ee
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-icons.png differ

diff --git a/site/docs/4.4/assets/img/bootstrap-icons@2x.png b/site/docs/4.4/assets/img/bootstrap-icons@2x.png
new file mode 100644 (file)
index 0000000..48f0472
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-icons@2x.png differ

diff --git a/site/docs/4.4/assets/img/bootstrap-themes-collage.png b/site/docs/4.4/assets/img/bootstrap-themes-collage.png
new file mode 100644 (file)
index 0000000..54eba99
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-themes-collage.png differ

diff --git a/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png b/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png
new file mode 100644 (file)
index 0000000..ad165eb
Binary files /dev/null and b/site/docs/4.4/assets/img/bootstrap-themes-collage@2x.png differ

diff --git a/site/docs/4.4/assets/img/bootstrap-themes.png b/site/docs/4.4/assets/img/bootstrap-themes.png
index d1e1fc26789746a970b33e72aee667e056e8d017..d43dba2a7d859bfab72ba0fa4ed38ae41e26c892 100644 (file)
Binary files a/site/docs/4.4/assets/img/bootstrap-themes.png and b/site/docs/4.4/assets/img/bootstrap-themes.png differ

diff --git a/site/docs/4.4/assets/img/bootstrap-themes@2x.png b/site/docs/4.4/assets/img/bootstrap-themes@2x.png
index 3876a18ee3357754d5439d80abe25c7d30f7a02d..13c32337d6e18b84ff6a2dc191e022463a3e130b 100644 (file)
Binary files a/site/docs/4.4/assets/img/bootstrap-themes@2x.png and b/site/docs/4.4/assets/img/bootstrap-themes@2x.png differ

diff --git a/site/docs/4.4/assets/scss/_buttons.scss b/site/docs/4.4/assets/scss/_buttons.scss
index 25bcbbd4b0f33cd7c12b3a817d15f680f7bcaef9..8d35fef4601b6792d38ac6afbb6a09942f4f787b 100644 (file)
--- a/site/docs/4.4/assets/scss/_buttons.scss
+++ b/site/docs/4.4/assets/scss/_buttons.scss
@@ -4,14 +4,15 @@
 
 .btn-bd-primary {
   font-weight: 600;
-  color: $bd-purple-bright;
+  color: $white;
+  background-color: $bd-purple-bright;
   border-color: $bd-purple-bright;
 
   &:hover,
   &:active {
     color: $white;
-    background-color: $bd-purple-bright;
-    border-color: $bd-purple-bright;
+    background-color: darken($bd-purple-bright, 10%);
+    border-color: darken($bd-purple-bright, 10%);
   }
 
   &:focus {

diff --git a/site/docs/4.4/assets/scss/_content.scss b/site/docs/4.4/assets/scss/_content.scss
index 439601d1ec06bfa3770bccea80caa8364edd67dd..030a1a2564360df4fb18a7d262a3444cc11ee709 100644 (file)
--- a/site/docs/4.4/assets/scss/_content.scss
+++ b/site/docs/4.4/assets/scss/_content.scss
@@ -107,7 +107,6 @@
 .bd-title {
   margin-top: 1rem;
   margin-bottom: .5rem;
-  font-weight: 300;
   @include font-size(3rem);
 }
 
@@ -122,3 +121,7 @@
 
 .bd-text-purple { color: $bd-purple; }
 .bd-text-purple-bright { color: $bd-purple-bright; }
+
+.bd-bg-purple-bright {
+  background-color: $bd-purple-bright;
+}

diff --git a/site/docs/4.4/assets/scss/_masthead.scss b/site/docs/4.4/assets/scss/_masthead.scss
index f4e70a2cfb634a559b372250dd968c86ec92a84e..62047fbbb306016c3d82207c09d0e57027baa795 100644 (file)
--- a/site/docs/4.4/assets/scss/_masthead.scss
+++ b/site/docs/4.4/assets/scss/_masthead.scss
@@ -3,13 +3,19 @@
 .bd-masthead {
   position: relative;
   padding: 3rem ($grid-gutter-width / 2);
-  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+  background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%);
 
   h1 {
     @include font-size(4rem);
     line-height: 1;
   }
 
+  .lead {
+    @include font-size(1.5rem);
+    font-weight: 400;
+    color: $gray-700;
+  }
+
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
@@ -37,16 +43,38 @@
   }
 }
 
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem 0;
-}
-
 .masthead-followup {
   .bd-clipboard { display: none; }
 
+  h2 {
+    @include font-size(2.5rem);
+  }
+
   .highlight {
-    padding: .5rem 0;
-    background-color: transparent;
+    @include border-radius(.5rem);
+
+    pre::-webkit-scrollbar {
+      display: none;
+    }
+
+    pre code {
+      display: inline-block;
+      white-space: pre;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }
+
+.masthead-followup-icon {
+  padding: .75rem;
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
+  @include border-radius(.75rem);
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
+}
+
+.masthead-followup-svg {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
+}

diff --git a/site/docs/4.4/assets/scss/_nav.scss b/site/docs/4.4/assets/scss/_nav.scss
index 8958ccde1d3871c0d7a8d7ddcbee86ae0acb998a..d8d24b723010a787876d965f1d776593671e2eef 100644 (file)
--- a/site/docs/4.4/assets/scss/_nav.scss
+++ b/site/docs/4.4/assets/scss/_nav.scss
@@ -4,7 +4,7 @@
 
 .bd-navbar {
   min-height: 4rem;
-  background-color: $bd-purple;
+  background-color: $bd-purple-bright;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
 
   @include media-breakpoint-down(md) {
@@ -38,7 +38,7 @@
     .nav-link {
       padding-right: .5rem;
       padding-left: .5rem;
-      color: $bd-purple-light;
+      color: rgba($white, .85);
 
       &.active,
       &:hover {

diff --git a/site/docs/4.4/examples/index.html b/site/docs/4.4/examples/index.html
index 965c2756463ba257b7730fed3053ad8756f5e650..ced9cc814a8b3604f00ceda1778af04b1fab90c6 100644 (file)
--- a/site/docs/4.4/examples/index.html
+++ b/site/docs/4.4/examples/index.html
@@ -14,7 +14,8 @@ redirect_from: "/examples/"
         <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
           <img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
                                                   {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
-                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png" alt="{{ example.name }} screenshot" width="480" height="300">
+                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
+                                          alt="{{ example.name }} screenshot" width="480" height="300">
           <h5 class="mb-1">{{ example.name }}</h5>
         </a>
         <p class="text-muted">{{ example.description }}</p>
@@ -22,3 +23,22 @@ redirect_from: "/examples/"
     {% if forloop.last %}</div>{% endif %}
   {% endfor %}
 {% endfor %}
+
+<hr class="my-5">
+
+<div class="container">
+  <div class="text-center">
+    <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+      {% include icons/droplet-fill.svg width="32" height="32" %}
+    </div>
+    <h2>Go further with Bootstrap Themes</h2>
+    <p class="col-md-10 mx-auto lead font-weight-normal">
+      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+  </div>
+  <img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
+                                              {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
+                                              src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
+                                              alt="Bootstrap Themes" width="1151" height="320">
+</div>

diff --git a/site/index.html b/site/index.html
index f16ea4878ac9ff1663c486a873831909fb88d4be..adae306b5e8336935be566a70903b6023f76d851 100644 (file)
--- a/site/index.html
+++ b/site/index.html
@@ -5,24 +5,17 @@ layout: home
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
     <div class="row">
-      <div class="col-6 mx-auto col-md-6 order-md-2">
+      <div class="col-6 mx-auto col-md-4 order-md-2">
         {% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
       </div>
-      <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
-        <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
-        <p class="lead">
-          Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
-        </p>
+      <div class="col-md-8 order-md-1 text-center text-md-left pr-md-5">
+        <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
         <p class="lead mb-4">
-          Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+          Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
         </p>
-        <div class="row mx-n2">
-          <div class="col-md px-2">
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
-          </div>
-          <div class="col-md px-2">
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
-          </div>
+        <div class="d-flex flex-column flex-md-row">
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
         </div>
         <p class="text-muted mb-0">
           Currently v{{ site.current_version }}
@@ -33,57 +26,100 @@ layout: home
   </div>
 </main>
 
-<div class="masthead-followup row m-0 border border-white">
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Installation</h3>
-    <p>Include Bootstrap’s source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.</p>
-
+<div class="masthead-followup">
+  <div class="container">
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
+          {% include icons/code.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Installation</h2>
+        <p class="lead font-weight-normal">
+          Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
+        </p>
+        <p>Package managed installs don’t include documentation, but do include our build system and readme. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight sh %}
+# Via npm
 npm install bootstrap
-{% endhighlight %}
 
-{% highlight sh %}
+# Via gem
 gem install bootstrap -v {{ site.current_ruby_version }}
 {% endhighlight %}
+      </div>
+    </div>
 
-    <hr class="half-rule">
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
-  </div>
-
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>BootstrapCDN</h3>
-    <p>When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
-
-<h5>CSS only</h5>
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
+          {% include icons/cloud-fill.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>BootstrapCDN</h2>
+        <p class="lead font-weight-normal">
+          When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
+        </p>
+        <p>
+          See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project.
+        </p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight html %}
+<!-- CSS only -->
 <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-{% endhighlight %}
 
-<h5>JS, Popper.js, and jQuery</h5>
-{% highlight html %}
+<!-- JS, Popper.js, and jQuery -->
 <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
-    <hr class="half-rule">
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
-  </div>
+      </div>
+    </div>
 
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Official Themes</h3>
-    <p>
-      Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
-    </p>
-    <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
-                                                {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                        src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
-    <hr class="half-rule">
-    <a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
+          {% include icons/circle-square.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Bootstrap Icons</h2>
+        <p class="lead font-weight-normal">
+          For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
+        </p>
+        <p>
+          Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implmented in several ways, and can be styled with CSS.
+        </p>
+        <a href="{{ site.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
+                                                    alt="Bootstrap Icons" width="966" height="600">
+      </div>
+    </div>
+
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+          {% include icons/droplet-fill.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Official Themes</h2>
+        <p class="lead font-weight-normal">
+          Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>.
+        </p>
+        <p>
+          Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+        </p>
+        <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png"
+                                                    alt="Bootstrap Themes" width="700" height="500">
+      </div>
+    </div>
   </div>
 </div>