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.

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.
d713f834 · Mark Otto · d9e38312 · d713f834 · d713f834 · d713f834
Commit d713f834 authored Aug 17, 2013 by Mark Otto
9 changed files
--- 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>
+        <div class="container">
-        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+          <h1>Hello, world!</h1>
-        <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+          <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>
+  <div class="container">
-  <p>...</p>
+    <h1>Hello, world!</h1>
-  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+    <p>...</p>
+    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
+  </div>
 </div>
 {% endhighlight %}
  </div>

--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -5177,7 +5177,7 @@ a.list-group-item.active > .badge,
 }
 .jumbotron {
-  padding: 30px;
+  padding: 30px 15px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
@@ -5195,10 +5195,18 @@ a.list-group-item.active > .badge,
  line-height: 1.4;
 }
+.container .jumbotron {
+  border-radius: 6px;
+}
 @media screen and (min-width: 768px) {
  .jumbotron {
-    padding: 50px 60px;
+    padding-top: 50px;
-    border-radius: 6px;
+    padding-bottom: 50px;
+  }
+  .container .jumbotron {
+    padding-right: 60px;
+    padding-left: 60px;
  }
  .jumbotron h1 {
    font-size: 63px;

--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/examples/jumbotron-narrow/index.html
+++ b/examples/jumbotron-narrow/index.html
@@ -18,7 +18,7 @@
  <body>
-    <div class="container-narrow">
+    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>

--- a/examples/jumbotron-narrow/jumbotron-narrow.css
+++ b/examples/jumbotron-narrow/jumbotron-narrow.css
@@ -31,10 +31,11 @@ body {
  border-top: 1px solid #e5e5e5;
 }
-/* Custom container */
+/* Customize container */
-.container-narrow {
+@media (min-width: 768px) {
-  margin: 0 auto;
+  .container {
-  max-width: 700px;
+    max-width: 730px;
+  }
 }
 .container-narrow > hr {
  margin: 30px 0;

--- a/examples/jumbotron/index.html
+++ b/examples/jumbotron/index.html
@@ -59,15 +59,16 @@
      </div>
    </div>
-    <div class="container">
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
-      <!-- Main jumbotron for a primary marketing message or call to action -->
+      <div class="container">
-      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit 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">Learn more &raquo;</a></p>
      </div>
+    </div>
+    <div class="container">
      <div class="body-content">
        <!-- Example row of columns -->

--- a/examples/jumbotron/jumbotron.css
+++ b/examples/jumbotron/jumbotron.css
@@ -13,10 +13,6 @@ body {
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
-  /* Let the jumbotron breathe */
-  .jumbotron {
-    margin-top: 20px;
-  }
  /* Remove padding from wrapping element since we kick in the grid classes here */
  .body-content {
    padding: 0;

--- a/examples/screenshots/jumbotron.jpg
+++ b/examples/screenshots/jumbotron.jpg
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -4,13 +4,14 @@
 .jumbotron {
-  padding: 30px;
+  padding: 30px 15px;
  margin-bottom: 30px;
  font-size: (@font-size-base * 1.5);
  font-weight: 200;
  line-height: (@line-height-base * 1.5);
  color: @jumbotron-lead-color;
  background-color: @jumbotron-bg;
  h1 {
    line-height: 1;
    color: @jumbotron-heading-color;
@@ -19,9 +20,19 @@
    line-height: 1.4;
  }
+  .container & {
+    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
+  }
  @media screen and (min-width: @screen-tablet) {
-    padding: 50px 60px;
+    padding-top: 50px;
-    border-radius: @border-radius-large; // Only round corners at higher resolutions
+    padding-bottom: 50px;
+    .container & {
+      padding-left: 60px;
+      padding-right: 60px;
+    }
    h1 {
      font-size: (@font-size-base * 4.5);
    }