CSSで100vhクラスを使用したブートストラップの高さの設定方法

HTMLファイル内でブートストラップを読み込みます。以下は例です:

<link rel="stylesheet" href="bootstrap.css">

ブートストラップのクラスを使用して要素の高さを設定します。以下は基本的な例です:

<div class="container-fluid" style="height: 100vh;">
  <div class="row">
    <div class="col">
      コンテンツをここに追加します
    </div>
  </div>
</div>

上記の例では、container-fluidクラスを使用して親要素をフル幅に設定し、その下に行と列を追加しています。style="height: 100vh;"を使用して、親要素の高さをビューポートの高さに設定しています。

必要に応じて他のクラスやスタイルを追加して、デザインをカスタマイズすることができます。例えば、背景色やテキストの色を変更する場合は、追加のクラスやスタイルを使用します。

<div class="container-fluid custom-bg" style="height: 100vh;">
  <div class="row">
    <div class="col custom-text">
      コンテンツをここに追加します
    </div>
  </div>
</div>
<style>
.custom-bg {
  background-color: #f2f2f2;
}
.custom-text {
  color: #333;
}
</style>

上記の例では、.custom-bgクラスと.custom-textクラスを追加して、背景色とテキストの色を変更しています。

これらの手順を使用すると、ブートストラップの高さを100vhに設定して、レスポンシブなデザインを実現することができます。必要に応じて他の要素やスタイルを追加して、デザインをカスタマイズすることもできます。