Bootstrap class: .jumbotron

Do not have time to learn all the Bootstrap classes?

Try drag & drop Bootstrap builder

<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

Code copied to the clipboard.

Copying failed

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

More in Bootstrap Jumbotron