0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Bootstrap/docs/components/jumbotron.md
Mark Otto 86af1f39ab Merge branch 'master' into derp
Conflicts:
	Gruntfile.js
	_config.yml
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/_includes/components/button-groups.html
	docs/_includes/components/jumbotron.html
	docs/_includes/components/media.html
	docs/_includes/components/navs.html
	docs/_includes/customizer-variables.html
	docs/_includes/footer.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/js/carousel.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/popovers.html
	docs/_includes/js/tooltips.html
	docs/_includes/nav/getting-started.html
	docs/_includes/nav/javascript.html
	docs/_layouts/default.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/docs.min.js
	docs/assets/js/raw-files.min.js
	docs/browser-bugs.html
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/examples/justified-nav/index.html
	less/_forms.less
	less/_tooltip.less
	less/navs.less
	less/theme.less
2014-11-09 22:02:53 -08:00

1.3 KiB

layout title
page Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

{% example html %}

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

{% endexample %}

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

{% highlight html %}

...
{% endhighlight %}

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.

{% example html %}

Jumbotron hr

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


Learn more

{% endexample %}