rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

update jumbotron docs; fixes #11109

Browse Source
This commit is contained in:
Mark Otto 2013-10-15 14:11:21 -07:00
parent dc495fe9d9
commit acd4a0a140
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components.html
View File

@ -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>