Jumbotron

Bootstrap4 の Jumbotron は、重要なコンテンツを強調表示するための軽量で柔軟なコンポーネントです。ヒーローユニット、見出し、または単に注目を集めたいコンテンツに使用できます。

使用方法

Jumbotron を作成するには、.jumbotron クラスを <div> 要素に追加します。Jumbotron 内部のコンテンツは、Bootstrap のグリッドシステムを使用して配置できます。

クラスとユーティリティ

Jumbotron の外観と動作をカスタマイズするために使用できるクラスとユーティリティを以下に示します。

例

デフォルトの Jumbotron

これは、デフォルトの .jumbotron クラスを使用した Jumbotron の例です。

<div class="jumbotron">
  <h1 class="display-4">こんにちは、世界！</h1>
  <p class="lead">これは Bootstrap 4 の Jumbotron の例です。</p>
  <hr class="my-4">
  <p>詳細については、以下のボタンをクリックしてください。</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">詳細はこちら</a>
</div>

Fluid Jumbotron

これは、.jumbotron-fluid クラスを使用してコンテナいっぱいに拡張された Jumbotron の例です。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">これは、コンテナいっぱいに拡張された Jumbotron の例です。</p>
  </div>
</div>

参考資料

• Bootstrap 4 Jumbotron ドキュメント

よくある質問

1. Jumbotron の高さを変更するにはどうすればよいですか？

Jumbotron の高さは、コンテンツの量によって自動的に調整されます。高さを明示的に設定する場合は、カスタム CSS を使用できます。

2. Jumbotron に背景画像を追加するにはどうすればよいですか？

Jumbotron に背景画像を追加するには、インラインスタイルまたはカスタム CSS を使用して background-image プロパティを設定します。

3. Jumbotron をレスポンシブにするにはどうすればよいですか？

Jumbotron は、デフォルトでレスポンシブです。ただし、異なる画面サイズで外観を調整する場合は、Bootstrap のグリッドシステムとユーティリティクラスを使用できます。