<!-- Jumbotron -->
<div class="jumbotron">
  <h1>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-4">
  <p class="pb-3">It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a href="#" class="btn btn-primary btn-shadow" role="button">Learn more</a>
</div>

// Jumbotron
.jumbotron
  h1 Hello, world!
  p.lead This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
  hr.my-4
  p.pb-3 It uses utility classes for typography and spacing to space content out within the larger container.
  a(href="#", role="button").btn.btn-primary.btn-shadow
    | Learn more

<!-- Jumbotron with background image -->
<div class="jumbotron bg-size-cover bg-position-center bg-no-repeat text-center" style="background-image: url(path-to-image);">
  <h1 class="text-light text-shadow">Hello, world!</h1>
  <p class="lead text-light text-shadow">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4 hr-light">
  <p class="text-light text-shadow pb-3">It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a href="#" class="btn btn-primary" role="button">Learn more</a>
</div>

// Jumbotron with background image
.jumbotron.bg-size-cover.bg-position-center.bg-no-repeat.text-center.mb-0(style="background-image: url(path-to-image);")
  h1.text-light.text-shadow Hello, world!
  p.lead.text-light.text-shadow This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
  hr.hr-light.my-4
  p.text-light.text-shadow.pb-3 It uses utility classes for typography and spacing to space content out within the larger container.
  a(href="#", role="button").btn.btn-primary
    | Learn more