Update jumbotron

* Defaults to no rounded corners and full width in the viewport
* When in a container, the jumbotron has extra padding and will have
rounded corners
* Updates default jumbotron example to show the full width default
display

Fixes #9759.

1 files changed, 11 insertions, 7 deletions

diff --git a/components.html b/components.html
index eb6a31938..147f05984 100644
--- a/components.html
+++ b/components.html
@@ -1768,19 +1768,23 @@ body { padding-bottom: 70px; }
     <div class="page-header">
       <h1 id="jumbotron">Jumbotron</h1>
     </div>
-    <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
+    <p>A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p>
     <div class="bs-example">
       <div class="jumbotron">
-        <h1>Hello, world!</h1>
-        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-        <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+        <div class="container">
+          <h1>Hello, world!</h1>
+          <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+          <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+        </div>
       </div>
     </div>
 {% highlight html %}
 <div class="jumbotron">
-  <h1>Hello, world!</h1>
-  <p>...</p>
-  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+  <div class="container">
+    <h1>Hello, world!</h1>
+    <p>...</p>
+    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+  </div>
 </div>
 {% endhighlight %}
   </div>