※ジャンボトロン（Jumbotron） v5.0.0-alpha1クラス廃止

ジャンボトロンの実例

基本のジャンボトロン

見本 画像で表示

Bootstrap5.xの設定例 緑背景が変更箇所

コピー<div class="container">
  <div class="bg-light p-3 p-sm-5 my-4 rounded">
    <h1 class="display-4">こんにちは!</h1>
    <p class="lead">これは単純なヒーローユニット、注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンスタイルのコンポーネントです。</p>
    <hr class="my-4">
    <p>より大きなコンテナの範囲内でコンテンツに空間をあけるため、文字の体裁と空白ユーティリティクラスを使用している。</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">もっと学ぼう</a>
  </div>
  <h1 class="mt-2">ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="container">
  <div class="jumbotron mt-4">
    <h1 class="display-4">こんにちは!</h1>
    <p class="lead">これは単純なヒーローユニット、注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンスタイルのコンポーネント。</p>
    <hr class="my-4">
    <p>より大きなコンテナの範囲内でコンテンツに空間をあけるため、文字の体裁と空白用のユーティリティクラスを使用している。</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">もっと学ぼう</a>
  </div>
  <h1>ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

 

幅一杯のジャンボトロン

1. 背景色を使用

見本 画像で表示

Bootstrap5.xの設定例 緑背景が変更箇所

コピー<div class="bg-light p-3 p-sm-5 mb-4 border-top">
  <div class="container">
    <h1 class="display-4">幅一杯にジャンボトロン</h1>
    <p class="lead">これは親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンです。</p>
    <hr class="my-4">
    <p>より大きなコンテナの範囲内でコンテンツに空間をあけるため、文字の体裁と空白ユーティリティクラスを使用している。</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">もっと学ぼう</a>
  </div>
</div>
<div class="container mt-2">
  <h1>ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">幅一杯にジャンボトロン</h1>
    <p class="lead">これは親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンです。</p>
  </div>
</div>
<div class="container">
  <h1>ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

2. ジャンボトロンの背景に画像を入れる

見本 画像で表示

Bootstrap5.xの設定例 緑背景が変更箇所

HTMLコピー<div class="p-3 p-sm-5 mb-4 bg-img">
  <div class="container">
    <h1 class="display-4">こんにちは!</h1>
    <p class="lead">これは単純なヒーローユニット、注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンスタイルのコンポーネントです。</p>
    <a class="btn btn-outline-primary btn-lg" href="#" role="button">もっと学ぼう</a>
  </div>
</div>
<div class="container mt-2">
  <h1>ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

CSSコピー.bg-img {
  background-image: url("xxx.jpg");
  background-size: cover;
  background-position: center 60%;
}

※Bootstrap4.xの設定例 赤背景が変更箇所

HTML<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">こんにちは!</h1>
    <p class="lead">これは単純なヒーローユニット、注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンスタイルのコンポーネントです。</p>
    <a class="btn btn-outline-primary btn-lg" href="#" role="button">もっと学ぼう</a>
  </div>
</div>
<div class="container">
  <h1>ブランド</h1>
  <p>ココにサイトの文章が入ります。</p>
</div>

設定例

css.jumbotron {
  background-image: url("xxx.jpg");
  background-size: cover;
  background-position: center 60%;
}