2014-07-14 16:14:48 +00:00
---
2015-08-15 05:45:55 +00:00
layout: docs
2014-07-14 16:14:48 +00:00
title: Jumbotron
2016-10-03 01:19:47 +00:00
description: Lightweight, flexible component for showcasing hero unit style content.
2015-08-06 00:47:45 +00:00
group: components
2014-07-14 16:14:48 +00:00
---
2014-03-17 02:03:53 +00:00
2014-12-31 18:20:12 +00:00
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
2014-07-14 16:14:48 +00:00
2015-01-20 04:03:08 +00:00
## Example
2014-07-14 16:14:48 +00:00
{% example html %}
2014-03-17 02:03:53 +00:00
< div class = "jumbotron" >
2015-08-13 03:28:46 +00:00
< h1 class = "display-3" > Hello, world!< / h1 >
2014-09-18 03:03:32 +00:00
< p class = "lead" > This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.< / p >
2016-09-09 05:16:28 +00:00
< hr class = "my-2" >
2015-08-13 03:28:46 +00:00
< p > It uses utility classes for typography and spacing to space content out within the larger container.< / p >
< p class = "lead" >
< a class = "btn btn-primary btn-lg" href = "#" role = "button" > Learn more< / a >
< / p >
2014-03-17 02:03:53 +00:00
< / div >
2014-07-14 16:14:48 +00:00
{% endexample %}
2014-12-31 18:20:12 +00:00
To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
2014-07-14 16:14:48 +00:00
2014-12-31 18:20:12 +00:00
{% example html %}
< div class = "jumbotron jumbotron-fluid" >
2014-03-17 02:03:53 +00:00
< div class = "container" >
2015-08-13 03:28:46 +00:00
< h1 class = "display-3" > Fluid jumbotron< / h1 >
2015-09-07 14:07:35 +00:00
< p class = "lead" > This is a modified jumbotron that occupies the entire horizontal space of its parent.< / p >
2014-03-17 02:03:53 +00:00
< / div >
< / div >
2014-12-31 18:20:12 +00:00
{% endexample %}