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

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

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

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

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

Bitnami