new homepage, new assets, clean out old stuff

diff --git a/_includes/footer.html b/_includes/footer.html
index 968d42954473f482770b592e299695811ac69166..c034873fdfc0c7dfa9e5e5662c636a1fba2c1923 100644 (file)
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,5 +1,5 @@
 <footer class="bd-footer text-muted">
-  <div class="container">
+  <div class="container-fluid p-3 p-md-5">
     <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
       <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>

diff --git a/_layouts/simple.html b/_layouts/simple.html
index bb35ec792058ee951966043f3c4800a6a9e66f04..8e7fc5e30b0b3c47d2fcf2112fe1ee33a39b7187 100644 (file)
--- a/_layouts/simple.html
+++ b/_layouts/simple.html
@@ -2,16 +2,11 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-center text-sm-left">
-  <div class="container">
-    <h1>{{ page.title }}</h1>
-    <p class="lead">
-      Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-    </p>
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
+    <p class="bd-lead">{{ page.description }}</p>
     {% include ads.html %}
-  </div>
-</div>
-
-<div class="container bd-content">
-  {{ content }}
+    {{ content }}
+  </main>
 </div>

diff --git a/assets/img/bootstrap-stack.png b/assets/img/bootstrap-stack.png
new file mode 100644 (file)
index 0000000..4d7060b
Binary files /dev/null and b/assets/img/bootstrap-stack.png differ

diff --git a/assets/img/bootstrap-themes.png b/assets/img/bootstrap-themes.png
new file mode 100644 (file)
index 0000000..3ab3123
Binary files /dev/null and b/assets/img/bootstrap-themes.png differ

diff --git a/assets/img/bs-themes.png b/assets/img/bs-themes.png
deleted file mode 100644 (file)
index cf1f20f..0000000
Binary files a/assets/img/bs-themes.png and /dev/null differ

diff --git a/assets/img/components.png b/assets/img/components.png
deleted file mode 100644 (file)
index b544d43..0000000
Binary files a/assets/img/components.png and /dev/null differ

diff --git a/assets/img/devices.png b/assets/img/devices.png
deleted file mode 100644 (file)
index 41c1572..0000000
Binary files a/assets/img/devices.png and /dev/null differ

diff --git a/assets/img/expo-lyft.jpg b/assets/img/expo-lyft.jpg
deleted file mode 100644 (file)
index 763db82..0000000
Binary files a/assets/img/expo-lyft.jpg and /dev/null differ

diff --git a/assets/img/expo-newsweek.jpg b/assets/img/expo-newsweek.jpg
deleted file mode 100644 (file)
index bcecdea..0000000
Binary files a/assets/img/expo-newsweek.jpg and /dev/null differ

diff --git a/assets/img/expo-riot.jpg b/assets/img/expo-riot.jpg
deleted file mode 100644 (file)
index e9c6bd1..0000000
Binary files a/assets/img/expo-riot.jpg and /dev/null differ

diff --git a/assets/img/expo-vogue.jpg b/assets/img/expo-vogue.jpg
deleted file mode 100644 (file)
index 324f818..0000000
Binary files a/assets/img/expo-vogue.jpg and /dev/null differ

diff --git a/assets/img/sass.png b/assets/img/sass.png
deleted file mode 100644 (file)
index b67c816..0000000
Binary files a/assets/img/sass.png and /dev/null differ

diff --git a/assets/scss/_ads.scss b/assets/scss/_ads.scss
index efb91e5652014db5de33ee0fe764e07553381ec7..11fdc6959ed706f76876cb9964073619b997a62a 100644 (file)
--- a/assets/scss/_ads.scss
+++ b/assets/scss/_ads.scss
@@ -5,38 +5,26 @@
 //
 
 #carbonads {
+  position: static;
   display: block;
+  max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 50px -15px 0;
+  margin: 2rem 0;
   overflow: hidden;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.4;
   text-align: left;
-  border: solid #866ab3;
-  border-width: 1px 0 0;
+  background-color: rgba(0,0,0,.05);
 
   a {
-    color: #fff;
+    color: #333;
     text-decoration: none;
   }
 
   @include media-breakpoint-up(sm) {
     max-width: 330px;
-    margin: 50px auto 0;
-    border-width: 1px;
     border-radius: 4px;
   }
-
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: 0;
-    right: 15px;
-    margin-top: 0;
-
-    .bd-masthead & {
-      position: static;
-    }
-  }
 }
 
 .carbon-img {
@@ -46,24 +34,5 @@
 
 .carbon-poweredby {
   display: block;
-  color: #cdbfe3 !important;
-}
-
-.bd-content {
-  #carbonads {
-    position: static;
-    max-width: 400px;
-    margin: 2rem 0;
-    line-height: 1.4;
-    background-color: #f5f5f5;
-    border: 0;
-
-    a {
-      color: #333;
-    }
-
-    .carbon-poweredby {
-      color: #777 !important;
-    }
-  }
+  color: #777 !important;
 }

diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index 70b4969bace4015e1cc822739ab1b83392313ea8..0ac80c7b357eda55adbb4672a47f65aae5c237b5 100644 (file)
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -105,3 +105,6 @@
     font-size: 1.5rem;
   }
 }
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }

diff --git a/assets/scss/_featurettes.scss b/assets/scss/_featurettes.scss
deleted file mode 100644 (file)
index f214eb9..0000000
--- a/assets/scss/_featurettes.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.bd-featurette {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #555;
-  text-align: center;
-  background-color: #fff;
-  border-top: 1px solid #eee;
-
-  .highlight {
-    text-align: left;
-  }
-
-  .lead {
-    margin-right: auto;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    font-size: 1rem;
-    text-align: center;
-  }
-}
-
-.bd-featurette-title {
-  margin-bottom: .5rem;
-  font-size: 2rem;
-  font-weight: normal;
-  color: #333;
-  text-align: center;
-}
-
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem auto;
-
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-.bd-featurette h4 {
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  font-weight: normal;
-  color: #333;
-}
-.bd-featurette-img {
-  display: block;
-  margin-bottom: 1.25rem;
-  color: #333;
-}
-.bd-featurette-img:hover {
-  color: $blue;
-  text-decoration: none;
-}
-.bd-featurette-img img {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 480px) {
-  .bd-featurette .img-fluid {
-    margin-top: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  .bd-featurette {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-  .bd-featurette-title {
-    font-size: 2.5rem;
-
-    + .lead {
-      font-size: 1.5rem;
-    }
-  }
-  .bd-featurette .lead {
-    max-width: 80%;
-  }
-  .bd-featurette .img-fluid {
-    margin-top: 0;
-  }
-}

diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index e6f56d51e3571797e0b42ef289553ccafc13e09c..ab605d285ef8890d6591dacea312e94eb3f6e911 100644 (file)
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -3,8 +3,6 @@
 //
 
 .bd-footer {
-  padding: 4rem 0;
-  margin-top: 4rem;
   font-size: 85%;
   text-align: center;
   background-color: #f7f7f7;

diff --git a/assets/scss/_masthead.scss b/assets/scss/_masthead.scss
index ec2dfe6cf7cc4cb85d22251a99b4eaa36712bba0..f891d4e91d99fe2f696042e48423a137b4c0fadb 100644 (file)
--- a/assets/scss/_masthead.scss
+++ b/assets/scss/_masthead.scss
@@ -2,53 +2,28 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
-  color: $bd-purple-light;
-  text-align: center;
-  background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
-
-  .bd-booticon {
-    margin: 0 auto 2rem;
-    color: $bd-purple-light;
-    border-color: $bd-purple-light;
-  }
+  padding: 3rem ($grid-gutter-width / 2);
+  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
-    font-weight: 300;
     line-height: 1;
   }
 
-  .lead {
-    margin-right: auto;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    font-size: 1.25rem;
-    color: #fff;
-  }
-
-  .version {
-    margin-top: -1rem;
-    margin-bottom: 2rem;
-  }
-
   .btn {
     width: 100%;
-    padding: 1rem 2rem;
+    padding: .8rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
   }
 
   .carbonad {
-    margin-bottom: -2rem !important;
+    margin-top: 0 !important;
+    margin-bottom: -3rem !important;
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 8rem;
-    padding-bottom: 2rem;
-
-    .btn {
-      width: auto;
-    }
+    padding-top: 5rem;
+    padding-bottom: 5rem;
 
     .carbonad {
       margin-bottom: 0 !important;
@@ -56,29 +31,31 @@
   }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 4rem;
-
-    .bd-header {
-      margin-bottom: 4rem;
-    }
-
     h1 {
       font-size: 4rem;
     }
 
-    .lead {
-      font-size: 1.5rem;
-    }
-
     .carbonad {
       margin-top: 3rem !important;
     }
   }
+}
 
-  @include media-breakpoint-up(lg) {
-    .lead {
-      width: 85%;
-      font-size: 2rem;
-    }
+.bd-pretext {
+  overflow: hidden;
+  resize: none;
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+
+.masthead-followup {
+  .bd-clipboard { display: none; }
+
+  .highlight {
+    padding: .5rem 0;
+    background-color: transparent;
   }
 }

diff --git a/assets/scss/_sidebar.scss b/assets/scss/_sidebar.scss
index b9acf308b0d7e7f43eafda6a222b9a9882a56eef..beadf9de5698befbeb7375a1be701eca76478179 100644 (file)
--- a/assets/scss/_sidebar.scss
+++ b/assets/scss/_sidebar.scss
@@ -51,7 +51,7 @@
 
 .bd-sidebar {
   order: 0;
-  background-color: #f5f2f9;
+  // background-color: #f5f2f9;
   border-bottom: 1px solid rgba(0,0,0,.1);
 
   @include media-breakpoint-up(md) {

diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss
index 6535c0ce11d7320edebe6f00bbec6547d14480f3..b091a092f9d0a82a5490abb40f2384dda660196a 100644 (file)
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@@ -32,7 +32,6 @@
 @import "variables";
 @import "nav";
 @import "masthead";
-@import "featurettes";
 @import "featured-sites";
 @import "ads";
 @import "content";

diff --git a/docs/4.0/examples/index.md b/docs/4.0/examples/index.md
index dd52fe9bdae228dd50535f59bd3d70f8b9363167..bec2f014c6ea59f07d71c89fa188293e4397c151 100644 (file)
--- a/docs/4.0/examples/index.md
+++ b/docs/4.0/examples/index.md
@@ -1,6 +1,7 @@
 ---
 layout: simple
 title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
 redirect_from:
   - /examples/
 ---

diff --git a/docs/4.0/extend/icons.md b/docs/4.0/extend/icons.md
index 3b4aea3eb294229df40d411a5d77c11351ea4f81..f7da1ca8379a7cdf489f9a7ee541be44ddeecbca 100644 (file)
--- a/docs/4.0/extend/icons.md
+++ b/docs/4.0/extend/icons.md
@@ -17,6 +17,7 @@ We've tested and used these icon sets ourselves.
 ## More options
 While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
 
+- [Bytesize](https://github.com/danklammer/bytesize-icons)
 - [Google Material icons](https://material.io/icons/)
 - [Ionicons](http://ionicons.com/)
 - [Feather](http://colebemis.com/feather/)

diff --git a/docs/4.0/utilities/borders.md b/docs/4.0/utilities/borders.md
index db8bcee1911e5d6f5a9e9be271fbd5d6cf0e090c..fcc064d39e3bbc1e07a5ff35cc840be005345a21 100644 (file)
--- a/docs/4.0/utilities/borders.md
+++ b/docs/4.0/utilities/borders.md
@@ -30,6 +30,7 @@ Change the border color using utilities built on our theme colors.
 {% example html %}
 {% for color in site.data.theme-colors %}
 <span class="border border-{{ color.name }}"></span>{% endfor %}
+<span class="border border-white"></span>
 {% endexample %}
 </div>
 

diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 11ac0be60416fc69128943e011d3ead93586abd9..ed4ba10664f00d9545264f5d16e5e9bd35ca6be8 100644 (file)
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -23,6 +23,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {% example html %}
 {% for color in site.data.theme-colors %}
 <div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
+<div class="p-3 mb-2 bg-white text-gray-dark">.bg-white</div>
 {% endexample %}
 
 {% callout info %}

diff --git a/index.html b/index.html
index 65778562e326cc3434401f970bc5cf14c714df1d..58a2131eaf61abf1245c9a17026eddd30f169770 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,123 +4,89 @@ layout: home
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
-    {% include icons/bootstrap.svg class="mb-3" width="128" height="128" %}
-    <p class="lead">Bootstrap is the most popular HTML, CSS, and JS library in the world for building responsive, mobile-first projects on the web.</p>
-    <p class="lead">
-      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg btn-bd-yellow" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
-    </p>
-    <p class="version">Currently v{{ site.current_version }}</p>
+    <div class="row align-items-center">
+      <div class="col-6 mx-auto col-md-6 order-md-2">
+        <img src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="" 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>
+        <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.
+        </p>
+        <div class="d-flex flex-column flex-md-row lead mb-3">
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 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" 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 }}
+        </p>
+      </div>
+    </div>
     {% include ads.html %}
   </div>
 </main>
 
-<div class="bd-featurette">
-  <div class="container">
-    <h2 class="bd-featurette-title">Easy to get started</h2>
-    <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
-
-    <div class="row justify-content-center text-center">
-      <div class="col-sm-6 col-md-5 mb-3 pr-md-4">
-        <h4>Managed dependencies</h4>
-        <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
-        <p>
-          <a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download#package-managers">View install methods</a>
-        </p>
-      </div>
-      <div class="col-sm-6 col-md-5 mb-3 pl-md-4">
-        <h4>Bootstrap CDN</h4>
-        <p>When you only need to include Bootstrap's compiled CSS and JS, you can use the Bootstrap CDN.</p>
-{% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-<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>
+<div class="masthead-followup row m-0 border border-white">
+  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
+    </svg>
+    <h3>Installation</h3>
+    <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
+
+{% highlight sh %}
+npm install bootstrap@{{ site.current_version }}
 {% endhighlight %}
-      </div>
-    </div>
 
-    <hr class="half-rule mx-auto">
+{% highlight sh %}
+gem install bootstrap -v 4.0.0.alpha6
+{% endhighlight %}
 
-    <div class="text-center">
-      <p>
-        <strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.
-      </p>
-      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
-    </div>
+{% highlight sh %}
+bower install bootstrap#v{{ site.current_version }}
+{% endhighlight %}
+    <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>
-
-<div class="bd-featurette">
-  <div class="container">
-    <h2 class="bd-featurette-title">Designed for everyone, everywhere</h2>
-    <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
 
-    <div class="row text-center">
-      <div class="col-sm-4 mb-3">
-        <img src="{{ site.baseurl }}/assets/img/sass.png" alt="Sass support" class="img-fluid">
-        <h4>Preprocessor</h4>
-        <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
-      </div>
-      <div class="col-sm-4 mb-3">
-        <img src="{{ site.baseurl }}/assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
-        <h4>One framework, every device.</h4>
-        <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
-      </div>
-      <div class="col-sm-4 mb-3">
-        <img src="{{ site.baseurl }}/assets/img/components.png" alt="Components" class="img-fluid">
-        <h4>Full of features</h4>
-        <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
-      </div>
-    </div>
+  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
+    </svg>
+    <h3>Bootstrap CDN</h3>
+    <p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>
 
-    <hr class="half-rule mx-auto">
+<h5>CSS only</h5>
+{% highlight html %}
+<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+{% endhighlight %}
 
-    <div class="text-center">
-      <p>
-        <strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.
-      </p>
-      <a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
-    </div>
+<h5>JS, Popper, and jQuery</h5>
+{% highlight html %}
+<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 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 its 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-lg btn-bd-purple">Browse themes</a>
+  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
+    </svg>
+    <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 mx-auto" 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>
-    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.baseurl }}/examples/">collection of examples</a> or by exploring some of our favorites.</p>
-
-    <div class="row bd-featured-sites">
-    {% for showcase in site.data.showcase %}
-      <div class="col-6 col-sm-3">
-        <a href="{{ showcase.expo_url }}" target="_blank" rel="noopener" title="{{ showcase.name }}">
-          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
-        </a>
-      </div>
-    {% endfor %}
-    </div>
-
-    <hr class="half-rule mx-auto">
-
-    <div class="text-center">
-      <p>
-        We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.
-      </p>
-      <a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
-    </div>
+    <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+    <hr class="half-rule">
+    <a href="{{ site.themes }}" class="btn btn-outline-primary">Browse themes</a>
   </div>
 </div>