The default jumbotron supports a title (.title
), paragraph of text (p
),
a small, uppercase paragraph (.small-heading.text-uppercase
), and a call-to-action button.
I am a small intro heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.
Call To Action<div class="jumbotron">
<p class="small-heading text-uppercase">I am a small intro heading</p>
<h1 class="title">the main heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repudiandae quos reiciendis vitae eum.
</p>
<a class="btn btn-lg btn-primary" href="#">Call To Action</a>
</div>
You can add an image by applying a background image to the jumbotron container.
When you use this class, the text is white by default, as it expects the background image to be dark. You can change this behavior using the .text-black
helper class.
I am a small intro heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.
Call To Action<div class="jumbotron" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/streaming-anywhere-hero-off.jpg?auto=format,compress&w=100&fit=crop');">
<p class="small-heading text-uppercase">I am a small intro heading</p>
<h1 class="title">the main heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repudiandae quos reiciendis vitae eum.
</p>
<a class="btn btn-lg btn-primary" href="#">Call To Action</a>
</div>
You can add a looping background video to your jumbotron using the following rules, along with the crds-jumbotron-video package.
.bg-video
selector, a nested video
tag with the selectors .bg-jumbotron-video .hide
, and JavaScript customization.data-aspect-ratio
should be added to the div.jumbotron.bg-video
element when the aspect ratio of the provided video is anything other than 16/9. data-aspect-ratio
accepts numbers with decimals.video
tag has a class of .hide
on it. This is because the video element gets hidden from view until the video has finished loading. Once loaded, JavaScript dynamically removes that class from the video
element.autoplay
, loop
, muted
, and playsinline
are necessary to cause the video to start playing after loading for all devices, both desktop and mobile.src
tag needs to point to an absolute url of where the video is stored, and, according to HTML5 video tag documentation, that url should end with a common video extension, such as .mp4.crds-jumbotron-video package also supports playing a YouTube video inline, covering the jumbotron content during playback. Consider the following when implementing an inline video player.
.jumbotron
wrapper must also contain an .inline-video
class..inline-video-trigger
class. If no content is found within this element, a play icon will be added automatically.data-video-id
attribute on the video trigger element to know which YouTube video to load inline.You can adjust the height of the jumbotron by adding a sizing class, as shown below.
<div class="jumbotron jumbotron-sm">
<h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-md">
<h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-lg">
<h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-xl">
<h1 class="title">the main heading</h1>
</div>