Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. Even you can use jumbotrons to have a page header, like our Overview page.

  1. Basic usage
  2. Color variation
  3. Alignment
  4. Background image

Basic usage

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">
  <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" href="#" role="button">Learn more</a></p>
  </div>
</div>

Sizes

You can make your jumbotron smaller by adding .jumbotron-sm class. Also it could be use as an aside for your main content. Don't forget that we have .jumbotron-lg and .jumbotron-xl as well.

Customization options

Nunc viverra ex nec pulvinar aliquam. Donec id elit mauris. Donec at ipsum varius, tempus metus eget, ornare eros. Nulla non sem faucibus velit sagittis maximus at ut purus. Pellentesque nec magna scelerisque, gravida sem in, porta mauris. Ut interdum metus nec mauris scelerisque condimentum. Aliquam suscipit feugiat diam semper ultricies.

Expect more detail?

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

Learn more


<div class="row">
  <div class="col-md-6">
    <h3>Customization options</h3>
    <p>...</p>
  </div>

  <div class="col-md-6">
    <div class="jumbotron jumbotron-sm">
      <div class="container">
        <h4>Expect more detail?</h4>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </div>
</div>

Color variation

You can simply change background-color of jumbotron by adding contextual color classes to the .jumbotron. Supported classes are:

  • .jumbotron-primary
  • .jumbotron-success
  • .jumbotron-info
  • .jumbotron-warning
  • .jumbotron-danger
  • .jumbotron-purple
  • .jumbotron-teal
  • .jumbotron-dark
  • .jumbotron-white

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 jumbotron-teal">
  <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-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Alignment

You can align the text of jumbotron by adding one of the following classes:

  • .text-left default
  • .text-center
  • .text-right

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 jumbotron-info text-center">
  <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-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Background image

Make it fancier by adding a background image.

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 text-white text-right overlay-black" style="background-image: url(assets/img/jumbotron-bg.png)">
  <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-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>