とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ジャンボトロン

ジャンボトロン

JumboTron はソニーが1985年に発売した大型表示装置で、転じて大型ディスプレイを示す一般名詞として用いられています。.jumbotron は下記の様な部品を表示します。

<div class="jumbotron" style="width:30rem;">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit ...</p>
  <hr class="my-4">
  <p>It uses utility classes for ...</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

角の丸くないジャンボトロンを表示するには、.jumbotron-fluid を追加し、.container または .container-fluid を配置します。

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