Bootstrap Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

Torus Kit new features for Jumbotron
Background image Background overlay

Overview

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

Pro

Background image

Use Torus Kit’s Background image utility to place an image into jumbotron background. Add .has-bg-img class to parent .jumbotron element and give a desired <img> a .bg-img class.

Hello, world!

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

Learn more Background Image
<div class="jumbotron text-white text-center has-bg-img">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <a class="btn btn-outline-light" href="#" role="button">Learn more</a>
  <img src="/assets/img/slide-img-03.jpg" class="bg-img" alt="Background Image">
</div>

Basic example

Hello, world!

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


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Fluid jumbotron

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Background color

Add .bg-{color} class to .jumbotron to add a background color.

Hello, world!

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

Learn more
<div class="jumbotron bg-primary text-white text-center">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <a class="btn btn-outline-light" href="#" role="button">Learn more</a>
</div>
Free

Background overlay

To make a better contrast between background and a content, use an Overlay utility. There is a little modification needed - wrap the inner content into .overlay class and because the .jumbotron has its own padding, give it a .p-0 class that will remove it.

Default overlay

To give a jumbotron default black overlay, add .overlay. It’s recommended to give it some padding, too. In this case it’s a .p-6 and .rounded class to make it rounded like a parent jumbotron.

Hello, world!

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

Learn more
Background Image
<div class="jumbotron text-white text-center has-bg-img p-0">
  <div class="overlay rounded p-6">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <a class="btn btn-outline-light" href="#" role="button">Learn more</a>
  </div>
  <img src="/assets/img/slide-img-02.jpg" class="bg-img" alt="Background Image">
</div>

Color overlay

If default overlay color is not suitable, the Background color alpha utility can be used. But again, wrap the inner content in some wrapper and add it .bg-{color} with .bg-a-{value} class.

Hello, world!

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

Learn more
Background Image
<div class="jumbotron text-white text-center has-bg-img p-0">
  <div class="bg-primary bg-a-50 rounded p-6">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <a class="btn btn-outline-light" href="#" role="button">Learn more</a>
  </div>
  <img src="/assets/img/slide-img-02.jpg" class="bg-img" alt="Background Image">
</div>

Shadow

To make jumbotron stand out from the rest, the Shadows utility can be used.

Hello, world!

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

Download now Learn more
<div class="jumbotron bg-white shadow">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <a class="btn btn-primary" href="#" role="button">Download now</a>
  <a class="btn btn-outline-grey" href="#" role="button">Learn more</a>
</div>