Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Jumbotron

Overview

Use the .bsk-jumbotron class to showcase key content.

You must pick a variant for each jumbotron, otherwise it will look strange. It is not enough to use .bsk-jumbotron on its own.

Variants

Default jumbotron

Add the .bsk-jumbotron-default class for a standard jumbotron.

Don't Panic!

This should be something snappy, to highlight a message and with a possible call to action.

Do something

<div class="bsk-jumbotron bsk-jumbotron-default">
  <h1>Don't Panic!</h1>
  <p>This should be something snappy, to highlight a message and with a possible call to action.</p>
  <p><a class="bsk-btn bsk-btn-primary bsk-btn-lg" href="#" role="button">Do something</a></p>
</div>

Image jumbotron

An image can also be used as a background for a jumbotron.

Additional CSS rules, such as the example below, are needed to use an image as a background:

background-image: url("/img/site-masthead-tom-welsh.jpg");
<div class="bsk-jumbotron bsk-jumbotron-default bsk-jumbotron-image-example">
</div>

Components

Jumbotron overlay

Use the .bsk-jumbotron-overlay class to add additional contrast around a jumbotron’s title.

Jumbotron caption

<div class="bsk-jumbotron bsk-jumbotron-default bsk-jumbotron-image-example">
  <h1><span class="bsk-jumbotron-overlay">Jumbotron caption</span></h1>
</div>

Sizes

Add one of these classes to alter the size of a jumbotron:

Jumbotron Size Jumbotron Size Class
Extra-large .bsk-jumbotron-xl
Large .bsk-jumbotron-lg

Don't Panic!

This should be something snappy, to highlight a message and with a possible call to action.

Do something

<div class="bsk-jumbotron bsk-jumbotron-default bsk-jumbotron-lg">
  <h1>Don't Panic!</h1>
  <p>This should be something snappy, to highlight a message and with a possible call to action.</p>
  <p><a class="bsk-btn bsk-btn-primary bsk-btn-lg" href="#" role="button">Do something</a></p>
</div>

Don't Panic!

This should be something snappy, to highlight a message and with a possible call to action.

Do something

<div class="bsk-jumbotron bsk-jumbotron-default bsk-jumbotron-xl">
  <h1>Don't Panic!</h1>
  <p>This should be something snappy, to highlight a message and with a possible call to action.</p>
  <p><a class="bsk-btn bsk-btn-primary bsk-btn-lg" href="#" role="button">Do something</a></p>
</div>

Layouts

Full-width jumbotron

If you want a jumbotron to be full width, but within a layout that uses a fixed-width container, place the jumbotron outside any containers, then place a container within the jumbotron.

Jumbotron contents 
<!-- Content before the jumbotron, possibly in a container -->

<!-- Jumbotron, not in a container -->
<div class="bsk-jumbotron bsk-jumbotron-default">
  <div class="bsk-container">
    <!-- Jumbotron contents only are contained in a fixed-width container -->
    Jumbotron contents
  </div>
</div>

<!-- Content after the jumbotron, probably in a container -->