とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > ジャンボトロン

ジャンボトロン

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

Sample

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
Code
<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 を配置します。

Sample

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
Code
<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>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/jumbotron.html