---
title: "Jumbotron"
group: bootstrap-ui
---
<div class="row">
  <div class="col-sm-12 col-lg-10 offset-lg-1">
    <div class="mb-4">
      <div>
        <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"><button class="btn btn-primary">Learn More</button></p>
        </div>
      </div>
    </div>
    <h5 id="Fluid-Jumbotron">Fluid Jumbotron</h5>
    <div class="mb-4">
      <div>
        <div class="jumbotron jumbotron-fluid">
          <div class="container-fluid">
            <h1 class="display-3">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>