<!-- Jumbotron -->
<div class="jumbotron border">
  <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 with background image -->
<div class="jumbotron bg-size-cover bg-position-center bg-no-repeat text-center" style="background-image: url(path-to-image);">
  <div class="bg-overlay rounded opacity-70">
  <div class="bg-overlay-content">
    <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>