Don't want to learn Bootstrap classes? Go to Bootstrap builder for busy developers.

Bootstrap class: .jumbotron

<div class="jumbotron">
  <h1 class="display-3">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-2">
  <p>It uses utility classes for typography and
     spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Some action</a>
  </p>
</div>

Preview

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.

Some action

Sass source

/* _jumbotron.scss:1 */
.jumbotron {
  padding: $jumbotron-padding ($jumbotron-padding / 2);
  margin-bottom: $jumbotron-padding;
  background-color: $jumbotron-bg;
  @include border-radius($border-radius-lg);

  @include media-breakpoint-up(sm) {
    padding: ($jumbotron-padding * 2) $jumbotron-padding;
  }
}

Uses variables

/* _jumbotron.scss:1 */
$jumbotron-padding
$jumbotron-padding
$jumbotron-padding
$jumbotron-bg
$border-radius-lg
$jumbotron-padding
$jumbotron-padding