テキストユーティリティ（Text）

※HTML5のインライン要素による文字の装飾については、文字の体裁に掲載。

文字の配置（Text alignment）v5.0.0-alpha1クラス追加、一部廃止、v5.0.0-beta1一部クラス名変更

文字をテキスト配置クラスでコンポーネントに簡単に配置させる。行頭揃え、行末揃え、中央揃えの場合は、グリッドシステムと同じビューポート幅のブレークポイントを使用するレスポンシブ・クラスが使用できる。

定義済クラスの種類

設定例

<p class="text-end">...</p>

テキストの折り返しとはみ出し（Text wrapping and overflow）

※テキストの省略（.text-truncate）はヘルパーに移動

テキストの折り返し

テキストを .text-wrap クラスで囲む。

見本

設定例

<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
  このテキストは折り返す必要がある。
</div>

.text-nowrap クラスで、テキストが折り返されないようにする。

見本 見やすいよう色と枠を付け、画面からはみ出す場合はその部分を非表示に設定しています

設定例

<div class="text-nowrap bg-body-secondary border py-2" style="width: 8rem;">
  折り返したくない文字をココに入れると、ハミ出してしまいます。
</div>

単語の改行（Word break）

.text-break を使用して word-wrap: break-word と word-break: break-word を設定することにより、長いテキスト文字列がコンポーネントのレイアウトを壊さないようにする。より幅広いブラウザのサポートをするため、より一般的な overflow-wrap の代わりに word-wrap を使用し、非推奨の word-break: break-word を追加して、フレックスコンテナの問題を回避。

見本

設定例

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

文字の変換（Text transform）

文字の大文字小文字のクラスを使用してコンポーネント内の文字を変換。

.text-capitalize がどのようにして各単語の最初の文字だけを変更するかに注意。他の文字の場合は影響を受けない。

変換の種類

設定例

すべて小文字<p class="text-lowercase">Lowercased Text.</p>

すべて大文字<p class="text-uppercase">Uppercased text.</p>

最初の文字が小文字⇒大文字<p class="text-capitalize">capitalized text.</p>

フォントサイズ（Font size）v5.0.0-alpha3新設

テキストの font-size を迅速に変更。見出しクラス（.h1〜.h6 など）は、font-size, font-weight, line-height を適用するが、ここでのユーティリティは font-size のみを適用。

見本

フォントサイズの種類

<p class="fs-1">...</p>

$font-sizes Sassマップを変更すれば、使用できる font-size がカスタマイズできる（※デフォルトの設定はマップに掲載）。

文字の太さとイタリック体（Font weight and italics）v5.0.0-alpha3クラス名変更、v5.3.0クラス追加

これらのユーティリティを使用して、テキストの font-weight や font-style を迅速に変更。font-style ユーティリティは .fst-* と、font-weight ユーティリティは .fw-* と省略。

字体の種類

Bootstrap5.xの設定例 緑背景が変更箇所

太めの文字<p class="fw-bold">Bold text.</p>

より太めの文字<p class="fw-bolder">Bolder weight text.</p>

若干太めの文字<p class="fw-semibold">Semibold weight text.</p>

中間の太さの文字<p class="fw-medium">Medium weight text.</p>

通常の太さの文字<p class="fw-normal">Normal weight text.</p>

細めの文字<p class="fw-light">Light weight text.</p>

より細めの文字<p class="fw-lighter">Lighter weight text.</p>

イタリック体<p class="fst-italic">Italicized text.</p>

フォントスタイルなし<p class="fst-normal">Text without font style</p>

※Bootstrap4.xの設定例 赤背景が変更箇所

太めの文字<p class="font-weight-bold">Bold text.</p>

より太めの文字<p class="font-weight-bolder">Bolder weight text.</p>

通常の太さの文字<p class="font-weight-normal">Normal weight text.</p>

細めの文字<p class="font-weight-light">Light weight text.</p>

より細めの文字<p class="font-weight-lighter">Lighter weight text.</p>

イタリック体<p class="font-italic">Italicized text.</p>

行間（Line height）v5.0.0-alpha1新設

.lh-* ユーティリティを使用して行間を変更。

行間の種類

設定例

.lh-1 の場合<p class="lh-1">これは、要素の行の高さがユーティリティによってどのように影響を受けるかを示すために書かれた長めの段落。...</p>

等幅フォント（Monospace）v5.0.0-alpha1クラス名変更

.font-monospace を使って等幅フォントスタック（font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace）に選択変更できる。

見本

設定例

<p class="font-monospace">This is in monospace<br>日本語の場合</p>

色の継承（Reset color）

テキストやリンクの色を .text-reset でリセットし、親要素から色を継承。

見本

設定例

<p class="text-body-secondary">
  <a href="#" class="text-reset">リンクの色をリセットした</a>二次Body色のテキスト。
</p>

テキストの装飾（Text decoration）v5.0.0-alpha1クラス追加

コンポーネント内のテキストをテキスト装飾クラスで装飾。

装飾の種類

設定例

下線<p class="text-decoration-underline">このテキストには下線があります。</p>

取消線<p class="text-decoration-line-through">このテキストには取消線があります。</p>

装飾なし<a href="#" class="text-decoration-none">下線の付いていないリンク</a>

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.2.0変更、v5.3.0変数から名称変更

デフォルトのタイプとフォント関連のSass変数：

デフォルトの設定

scss/_variables.scss 内 font-variables の設定// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-rootは、フォントサイズ、パディング、マージンにも使用される `rem`の値に影響
// $font-size-baseは、本文のフォントサイズに影響
$font-size-root:              null;
$font-size-base:              1rem; // ブラウザのデフォルト、通常は `16px`を想定
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-medium:          500;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Sassマップ（Sass maps）v5.3.0マップから名称変更

フォントサイズのユーティリティは、ユーティリティAPIと組み合わせて、このマップから生成。

デフォルトの設定

scss/_variables.scss 内 font-sizes の設定$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

フォントとテキストのユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-text の設定"font-family": (
  property: font-family,
  class: font,
  values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
  rfs: true,
  property: font-size,
  class: fs,
  values: $font-sizes
),
"font-style": (
  property: font-style,
  class: fst,
  values: italic normal
),
"font-weight": (
  property: font-weight,
  class: fw,
  values: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    bolder: $font-weight-bolder
  )
),
"line-height": (
  property: line-height,
  class: lh,
  values: (
    1: 1,
    sm: $line-height-sm,
    base: $line-height-base,
    lg: $line-height-lg,
  )
),
"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: left,
    end: right,
    center: center,
  )
),
"text-decoration": (
  property: text-decoration,
  values: none underline line-through
),
"text-transform": (
  property: text-transform,
  class: text,
  values: lowercase uppercase capitalize
),
"white-space": (
  property: white-space,
  class: text,
  values: (
    wrap: normal,
    nowrap: nowrap,
  )
),
"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word),
  rtl: false
),