display-

bootstrap5.css

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

bootstrap5.css

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

bootstrap5.css

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

bootstrap5.css

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

html bootstrap5 Sample

displayで文字の大きさを変える：display-*

h3（標準）

h3.display-1

h3.display-2

h3.display-3

h3.display-4

  <h3>h3（標準）</h3>
  <!-- 高さも変わる、h1よりさらに大きく -->
  <h3 class="display-1">h3.display-1</h3>
  <h3 class="display-2">h3.display-2</h3>
  <h3 class="display-3">h3.display-3</h3>
  <h3 class="display-4">h3.display-4</h3>

ジャンボトロン：jumbotron

Jumbotron

これはジャンボトロンのサンプルです。

  <!-- ジャンボトロンは、大型表示で、トップ見出しなどに使う用語 -->
  <div class="jumbotron">
    <h4 class="display-3">Jumbotron</h4>
    <p class="lead">これはジャンボトロンのサンプルです。</p>
  </div>

ジャンボトロンを全幅で表示する：jumbotron-fluid

Fluid jumbotron

これは全幅のジャンボトロンのサンプルです。

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h4 class="display-3">Fluid jumbotron</h4>
      <p class="lead">これは全幅のジャンボトロンのサンプルです。</p>
    </div>
  </div>