Bootstrap 5 テキスト/レイアウト
- 前のページ BS5 グリッドベース
- 次のページ BS5 カラーパレット
Bootstrap 5 のデフォルト設定
Bootstrap 5 のデフォルト font-size を 1rem（デフォルトは 16px）に、line-height を 1.5 に設定しています。
さらに、すべての <p> 要素に margin-top: 0 Bootstrap 5 は黄色の背景色と少しのインセットを使用して設定します。 margin-bottom: 1rem （デフォルトは 16px）。
<h1> - <h6>
Bootstrap 5 では、HTML タイトル（<h1> から <h6>のスタイルをより太い font-weight と応答的な font-size に設定することもできます。
例
必要に応じて、他の要素上に .h1 から .h6 クラスを使用して、タイトルとして表示できます：
例
<p class="h1">h1 Bootstrap タイトル</p> <p class="h2">h2 Bootstrap タイトル</p> <p class="h3">h3 Bootstrap タイトル</p> <p class="h4">h4 Bootstrap タイトル</p> <p class="h5">h5 Bootstrap タイトル</p> <p class="h6">h6 Bootstrap タイトル</p>
display タイトル
display タイトルは、通常のタイトルよりも強調（より大きな font-size とより細い font-weight）され、6つのクラスが選択できます：.display-1 から .display-6:
例
<blockquote>
他のソースの内容ブロックを引用する場合、以下の要素のスタイルを設定してください： .blockquote クラスを追加します： <blockquote>「世界自然保護基金のウェブサイトから」のような名前の元を示す場合、以下を使用してください： .blockquote-footer クラス：
例
さらにレイアウトクラス
以下の Bootstrap 5 クラスは、HTML 要素のスタイルに追加できます：
| クラス | 説明 | 例 |
|---|---|---|
.lead |
段落を強調します。 | 試してみる |
.text-left |
テキストを左揃えに指定します。 | 試してみる |
.text-break |
長いテキストがレイアウトを壊さないようにします。 | 試してみる |
.text-center |
テキストを中央揃えに指定します。 | 試してみる |
.text-decoration-none |
リンクの下線を削除します。 | 試してみる |
.text-end |
テキストを右揃えに指定します。 | 試してみる |
.text-nowrap |
テキストの改行を指定します。 | 試してみる |
.text-lowercase |
小文字のテキストを指定します。 | 試してみる |
.text-uppercase |
大文字のテキストを指定します。 | 試してみる |
.text-capitalize |
大文字のテキストを指定します。 | 試してみる |
.initialism |
<abbr> 要素内のテキストを少し小さなフォントで表示します。 | 試してみる |
.list-unstyled |
リストアイテムのデフォルトの list-style と左外側マージン（<ul> と <ol> に適用）を削除します。 このクラスは直接の子リストアイテムにのみ適用されます。 内包リストからデフォルトのリストスタイルを削除する場合は、これを内包リストにも適用してください。 |
試してみる |
.list-inline |
すべてのリストアイテムを一行に配置します。 各 <li> 要素の .list-inline-item と一緒に使用してください。 |
試してみる |
- 前のページ BS5 グリッドベース
- 次のページ BS5 カラーパレット
