src/scss/bootstrap-4.0.0-alpha.6/docs/components/jumbotron.md

   1 ---
   2 layout: docs
   3 title: Jumbotron
   4 description: Lightweight, flexible component for showcasing hero unit style content.
   5 group: components
   6 ---
   7
   8 A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
   9
  10 ## Example
  11
  12 {% example html %}
  13 <div class="jumbotron">
  14   <h1 class="display-3">Hello, world!</h1>
  15   <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  16   <hr class="my-4">
  17   <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  18   <p class="lead">
  19     <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  20   </p>
  21 </div>
  22 {% endexample %}
  23
  24 To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
  25
  26 {% example html %}
  27 <div class="jumbotron jumbotron-fluid">
  28   <div class="container">
  29     <h1 class="display-3">Fluid jumbotron</h1>
  30     <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  31   </div>
  32 </div>
  33 {% endexample %}