v4のジャンボトロンのクラス(
.jumbotron
, .jumbotron-fluid
)はv5.0.0で削除されたため、ここでは他のユーティリティクラスを使用した設定例を表示。
【Bootstrap4.xとの変更箇所】
.jumbotron
⇒.bg-light.p-5.my-4.rounded
.jumbotron.jumbotron-fluid
⇒.bg-light.p-5.mb-4(.border-top)
基本のジャンボトロン
見本 画像で表示
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>
【設定】
div.container
>div.bg-light.p-3.p-sm-5.my-4.rounded
幅一杯のジャンボトロン
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%;
}
【設定】
- [
div.bg-light.p-3.p-sm-5.mb-4(.border-top)
>div.container
]《ジャンボトロン》 +div.container
《ページのコンテンツ》