mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
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.
This commit is contained in:
+11
-7
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user