Removal of one of the most iconic components of Bootstrap: the jumbot…

…ron (#28876)

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;

scss/bootstrap.scss

@@ -35,7 +35,6 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
-@import "jumbotron";
 @import "alert";
 @import "progress";
 @import "list-group";

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 @@ <h4 class="text-white">Contact</h4>
 
 <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 @@ <h1>Album example</h1>
 
 </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>

site/content/docs/4.3/examples/blog/index.html

@@ -42,7 +42,7 @@
     </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>

site/content/docs/4.3/examples/navbar-bottom/index.html

@@ -4,7 +4,7 @@
 ---
 
 <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>

site/content/docs/4.3/examples/navbar-fixed/index.html

@@ -30,7 +30,7 @@
 </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>

site/content/docs/4.3/examples/navbar-static/index.html

@@ -30,7 +30,7 @@
 </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>

site/content/docs/4.3/examples/navbars/index.html

@@ -310,7 +310,7 @@
   </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>

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`

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."

site/data/nav.yml

@@ -40,7 +40,6 @@
     - title: Dropdowns
     - title: Forms
     - title: Input group
-    - title: Jumbotron
     - title: List group
     - title: Modal
     - title: Navs