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.
2026-06-08 17:22:31 +03:00 · 2013-08-17 20:33:52 -07:00
parent d9e38312d2
commit d713f8341c
9 changed files with 48 additions and 27 deletions
@@ -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>
@@ -31,10 +31,11 @@ body {
  border-top: 1px solid #e5e5e5;
 }

-/* Custom container */
-.container-narrow {
-  margin: 0 auto;
-  max-width: 700px;
+/* Customize container */
+@media (min-width: 768px) {
+  .container {
+    max-width: 730px;
+  }
 }
 .container-narrow > hr {
  margin: 30px 0;
@@ -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="jumbotron">
+      <div class="container">
        <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 -->
@@ -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;