diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md index b32dd4379d..db7df7465a 100644 --- a/docs/components/jumbotron.md +++ b/docs/components/jumbotron.md @@ -3,7 +3,7 @@ layout: page title: Jumbotron --- -A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. +A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. {% example html %}
@@ -13,15 +13,16 @@ A lightweight, flexible component that can optionally extend the entire viewport
{% endexample %} -To make the jumbotron full width, and without rounded corners, place it outside all `.container`s and instead add a `.container` within. +To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within. -{% highlight html %} -
+{% example html %} +
- ... +

Fluid jumbotron

+

This is a modified jumbotron that occupies the entire horizontal space of it's parent.

-{% endhighlight %} +{% endexample %} Jumbotrons also come with an adaptive `hr`—just add `.jumbotron-hr` to the element and the `border-top-color` will be tinted based on the jumbotron background. diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss index e2aaa451c7..8ca6befedf 100644 --- a/scss/_jumbotron.scss +++ b/scss/_jumbotron.scss @@ -8,11 +8,7 @@ margin-bottom: $jumbotron-padding; color: $jumbotron-color; background-color: $jumbotron-bg; - - .container &, - .container-fluid & { - @include border-radius($border-radius-lg); // Only round corners at higher resolutions if contained in a container - } + @include border-radius($border-radius-lg); } .jumbotron-heading { @@ -25,16 +21,16 @@ @include media-sm { .jumbotron { - padding: ($jumbotron-padding * 1.6) 0; - - .container &, - .container-fluid & { - padding-right: ($jumbotron-padding * 2); - padding-left: ($jumbotron-padding * 2); - } + padding: ($jumbotron-padding * 2) $jumbotron-padding; } .jumbotron-heading { font-size: ($font-size-base * 4.5); } } + +.jumbotron-fluid { + padding-left: 0; + padding-right: 0; + @include border-radius(0); +}