Removal of one of the most iconic components of Bootstrap: the jumbotron (#28876)

26 files changed, 23 insertions, 193 deletions

diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
deleted file mode 100644
index bcd7dcad9..000000000
--- a/scss/_jumbotron.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding / 2);
-  margin-bottom: $jumbotron-padding;
-  color: $jumbotron-color;
-  background-color: $jumbotron-bg;
-  @include border-radius($border-radius-lg);
-
-  @include media-breakpoint-up(sm) {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
-.jumbotron-fluid {
-  padding-right: 0;
-  padding-left: 0;
-  @include border-radius(0);
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 79e0793a7..716b55136 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -811,13 +811,6 @@ $pagination-disabled-bg:            $white !default;
 $pagination-disabled-border-color:  $gray-300 !default;
 
 
-// Jumbotron
-
-$jumbotron-padding:                 2rem !default;
-$jumbotron-color:                   null !default;
-$jumbotron-bg:                      $gray-200 !default;
-
-
 // Cards
 
 $card-spacer-y:                     .75rem !default;
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 5f100326b..6ded9f628 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -35,7 +35,6 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
-@import "jumbotron";
 @import "alert";
 @import "progress";
 @import "list-group";
diff --git a/site/content/docs/4.3/components/jumbotron.md b/site/content/docs/4.3/components/jumbotron.md
deleted file mode 100644
index 9810be418..000000000
--- a/site/content/docs/4.3/components/jumbotron.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: docs
-title: Jumbotron
-description: Lightweight, flexible component for showcasing hero unit style content.
-group: components
----
-
-A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
-
-{{< example >}}
-<div class="jumbotron">
-  <h1 class="display-4">Hello, world!</h1>
-  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-  <hr class="my-4">
-  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
-  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
-</div>
-{{< /example >}}
-
-To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
-
-{{< example >}}
-<div class="jumbotron jumbotron-fluid">
-  <div class="container">
-    <h1 class="display-4">Fluid jumbotron</h1>
-    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-  </div>
-</div>
-{{< /example >}}
diff --git a/site/content/docs/4.3/examples/album/album.css b/site/content/docs/4.3/examples/album/album.css
deleted file mode 100644
index bc81349c5..000000000
--- a/site/content/docs/4.3/examples/album/album.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.jumbotron {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  margin-bottom: 0;
-  background-color: #fff;
-}
-@media (min-width: 768px) {
-  .jumbotron {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-}
-
-.jumbotron p:last-child {
-  margin-bottom: 0;
-}
-
-.jumbotron h1 {
-  font-weight: 300;
-}
-
-.jumbotron .container {
-  max-width: 40rem;
-}
-
-footer {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-footer p {
-  margin-bottom: .25rem;
-}
diff --git a/site/content/docs/4.3/examples/album/index.html b/site/content/docs/4.3/examples/album/index.html
index bedeefcf3..366ac5116 100644
--- a/site/content/docs/4.3/examples/album/index.html
+++ b/site/content/docs/4.3/examples/album/index.html
@@ -1,8 +1,6 @@
 ---
 layout: examples
 title: Album example
-extra_css:
-  - "album.css"
 ---
 
 <header>
@@ -39,14 +37,16 @@ extra_css:
 
 <main role="main">
 
-  <section class="jumbotron text-center">
-    <div class="container">
-      <h1>Album example</h1>
-      <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
-      <p>
-        <a href="#" class="btn btn-primary my-2">Main call to action</a>
-        <a href="#" class="btn btn-secondary my-2">Secondary action</a>
-      </p>
+  <section class="py-5 text-center container">
+    <div class="row py-lg-5">
+      <div class="col-lg-6 col-md-8 mx-auto">
+        <h1 class="font-weight-light">Album example</h1>
+        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+        <p>
+          <a href="#" class="btn btn-primary my-2">Main call to action</a>
+          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+        </p>
+      </div>
     </div>
   </section>
 
@@ -197,12 +197,12 @@ extra_css:
 
 </main>
 
-<footer class="text-muted">
+<footer class="text-muted py-5">
   <div class="container">
-    <p class="float-right">
+    <p class="float-right mb-1">
       <a href="#">Back to top</a>
     </p>
-    <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
-    <p>New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
+    <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
+    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
   </div>
 </footer>
diff --git a/site/content/docs/4.3/examples/blog/index.html b/site/content/docs/4.3/examples/blog/index.html
index 06b8d2a64..6436f1ad8 100644
--- a/site/content/docs/4.3/examples/blog/index.html
+++ b/site/content/docs/4.3/examples/blog/index.html
@@ -42,7 +42,7 @@ include_js: false
     </nav>
   </div>
 
-  <div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
+  <div class="p-4 p-md-5 mb-4 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>
diff --git a/site/content/docs/4.3/examples/jumbotron/index.html b/site/content/docs/4.3/examples/jumbotron/index.html
deleted file mode 100644
index efcae9cae..000000000
--- a/site/content/docs/4.3/examples/jumbotron/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: examples
-title: Jumbotron Template
-extra_css:
-  - "jumbotron.css"
----
-
-<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-  <a class="navbar-brand" href="#">Navbar</a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Link</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-      </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu" aria-labelledby="dropdown01">
-          <a class="dropdown-item" href="#">Action</a>
-          <a class="dropdown-item" href="#">Another action</a>
-          <a class="dropdown-item" href="#">Something else here</a>
-        </div>
-      </li>
-    </ul>
-    <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-    </form>
-  </div>
-</nav>
-
-<main role="main">
-
-  <!-- Main jumbotron for a primary marketing message or call to action -->
-  <div class="jumbotron">
-    <div class="container">
-      <h1 class="display-3">Hello, world!</h1>
-      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
-    </div>
-  </div>
-
-  <div class="container">
-    <!-- Example row of columns -->
-    <div class="row">
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-      </div>
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-      </div>
-      <div class="col-md-4">
-        <h2>Heading</h2>
-        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-      </div>
-    </div>
-
-    <hr>
-
-  </div> <!-- /container -->
-
-</main>
-
-<footer class="container">
-  <p>&copy; Company 2017-{{< year >}}</p>
-</footer>
diff --git a/site/content/docs/4.3/examples/jumbotron/jumbotron.css b/site/content/docs/4.3/examples/jumbotron/jumbotron.css
deleted file mode 100644
index d751264ef..000000000
--- a/site/content/docs/4.3/examples/jumbotron/jumbotron.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* Move down content because we have a fixed navbar that is 3.5rem tall */
-body {
-  padding-top: 3.5rem;
-}
diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html
index 4210fbce5..50c5e4c57 100644
--- a/site/content/docs/4.3/examples/navbar-bottom/index.html
+++ b/site/content/docs/4.3/examples/navbar-bottom/index.html
@@ -4,7 +4,7 @@ title: Bottom navbar example
 ---
 
 <div class="container">
-  <div class="jumbotron mt-3">
+  <div class="bg-light p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/4.3/examples/navbar-fixed/index.html b/site/content/docs/4.3/examples/navbar-fixed/index.html
index 2ab51e348..0dc1702dc 100644
--- a/site/content/docs/4.3/examples/navbar-fixed/index.html
+++ b/site/content/docs/4.3/examples/navbar-fixed/index.html
@@ -30,7 +30,7 @@ extra_css:
 </nav>
 
 <main role="main" class="container">
-  <div class="jumbotron">
+  <div class="bg-light p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html
index f0ee429a7..aabbd01f0 100644
--- a/site/content/docs/4.3/examples/navbar-static/index.html
+++ b/site/content/docs/4.3/examples/navbar-static/index.html
@@ -30,7 +30,7 @@ extra_css:
 </nav>
 
 <main role="main" class="container">
-  <div class="jumbotron">
+  <div class="bg-light p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html
index 64f124307..bdb4aeb01 100644
--- a/site/content/docs/4.3/examples/navbars/index.html
+++ b/site/content/docs/4.3/examples/navbars/index.html
@@ -310,7 +310,7 @@ extra_css:
   </nav>
 
   <main role="main">
-    <div class="jumbotron">
+    <div class="bg-light p-5 rounded">
       <div class="col-sm-8 mx-auto">
         <h1>Navbar examples</h1>
         <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 85e9f6dcf..59c0c8af6 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -77,6 +77,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 - **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
 - **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
 
+### Jumbotron
+
+- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
+
 ### Popovers
 
 - Renamed `.arrow` to `.popover-arrow`
diff --git a/site/data/examples.yml b/site/data/examples.yml
index 6fb65d7f6..9e4fd6bd7 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -31,8 +31,6 @@
       description: "Nothing but the basics: compiled CSS and JavaScript."
     - name: Grid
       description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
-    - name: Jumbotron
-      description: "Build around the jumbotron with a navbar and some basic grid columns."
 
 - category: Navbars
   description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
diff --git a/site/data/nav.yml b/site/data/nav.yml
index 67c64b9f7..1fc3f6333 100644
--- a/site/data/nav.yml
+++ b/site/data/nav.yml
@@ -40,7 +40,6 @@
     - title: Dropdowns
     - title: Forms
     - title: Input group
-    - title: Jumbotron
     - title: List group
     - title: Modal
     - title: Navs
diff --git a/site/static/docs/4.3/assets/img/examples/album.png b/site/static/docs/4.3/assets/img/examples/album.png
index 694b3b2d2..9f628babf 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/album.png
+++ b/site/static/docs/4.3/assets/img/examples/album.png
diff --git a/site/static/docs/4.3/assets/img/examples/[email protected] b/site/static/docs/4.3/assets/img/examples/[email protected]
index 162269c46..00c938df8 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/[email protected]
+++ b/site/static/docs/4.3/assets/img/examples/[email protected]
diff --git a/site/static/docs/4.3/assets/img/examples/navbar-bottom.png b/site/static/docs/4.3/assets/img/examples/navbar-bottom.png
index e9f0abc95..af47666f1 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/navbar-bottom.png
+++ b/site/static/docs/4.3/assets/img/examples/navbar-bottom.png
diff --git a/site/static/docs/4.3/assets/img/examples/[email protected] b/site/static/docs/4.3/assets/img/examples/[email protected]
index a62faa182..93a7cdc49 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/[email protected]
+++ b/site/static/docs/4.3/assets/img/examples/[email protected]
diff --git a/site/static/docs/4.3/assets/img/examples/navbar-fixed.png b/site/static/docs/4.3/assets/img/examples/navbar-fixed.png
index c839602a7..97df67e96 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/navbar-fixed.png
+++ b/site/static/docs/4.3/assets/img/examples/navbar-fixed.png
diff --git a/site/static/docs/4.3/assets/img/examples/[email protected] b/site/static/docs/4.3/assets/img/examples/[email protected]
index 1ce8ca576..3e0f98b95 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/[email protected]
+++ b/site/static/docs/4.3/assets/img/examples/[email protected]
diff --git a/site/static/docs/4.3/assets/img/examples/navbar-static.png b/site/static/docs/4.3/assets/img/examples/navbar-static.png
index faebe3451..8d54f182c 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/navbar-static.png
+++ b/site/static/docs/4.3/assets/img/examples/navbar-static.png
diff --git a/site/static/docs/4.3/assets/img/examples/[email protected] b/site/static/docs/4.3/assets/img/examples/[email protected]
index 758aa61e8..9b057371d 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/[email protected]
+++ b/site/static/docs/4.3/assets/img/examples/[email protected]
diff --git a/site/static/docs/4.3/assets/img/examples/navbars.png b/site/static/docs/4.3/assets/img/examples/navbars.png
index 874f6d752..4e7e5fa6a 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/navbars.png
+++ b/site/static/docs/4.3/assets/img/examples/navbars.png
diff --git a/site/static/docs/4.3/assets/img/examples/[email protected] b/site/static/docs/4.3/assets/img/examples/[email protected]
index ce11b8d2c..dc0cea085 100644..100755
--- a/site/static/docs/4.3/assets/img/examples/[email protected]
+++ b/site/static/docs/4.3/assets/img/examples/[email protected]