diff options
| author | Mark Otto <[email protected]> | 2013-10-15 14:11:21 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-10-15 14:11:21 -0700 |
| commit | acd4a0a1403bb4675fc492d8fed45f512878243a (patch) | |
| tree | 28964a1840f78d2e5499b52b816ea82d8533a375 | |
| parent | dc495fe9d94f693591dd0c4023c4ac8b7d96e2ec (diff) | |
| download | bootstrap-acd4a0a1403bb4675fc492d8fed45f512878243a.tar.xz bootstrap-acd4a0a1403bb4675fc492d8fed45f512878243a.zip | |
update jumbotron docs; fixes #11109
| -rw-r--r-- | components.html | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/components.html b/components.html index ce2fde5e6..7af5c9fd8 100644 --- a/components.html +++ b/components.html @@ -2111,25 +2111,30 @@ body { padding-bottom: 70px; } <div class="page-header"> <h1 id="jumbotron">Jumbotron</h1> </div> - <p>A lightweight, flexible component that can optionally 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> + <p>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.</p> <div class="bs-example"> <div class="jumbotron"> - <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" role="button">Learn more</a></p> - </div> + <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" role="button">Learn more</a></p> </div> </div> {% highlight html %} <div class="jumbotron"> + <h1>Hello, world!</h1> + <p>...</p> + <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> +</div> +{% endhighlight %} + <p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p> +{% highlight html %} +<div class="jumbotron"> <div class="container"> - <h1>Hello, world!</h1> - <p>...</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> + ... </div> </div> {% endhighlight %} + </div> |