文字&背景色ヘルパー（Color and background） v5.2.0新設
コントラストが対照的な文字色と背景色を一括で設定する。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.2.0新設
概要（Overview）
文字&背景色ヘルパーは、.text-* ユーティリティと .bg-* ユーティリティの機能を1つのクラスにまとめたもの。Sassの color-contrast() 関数を使用して、特定の background-color のコントラスト color を自動的に決定。
注意！現在、CSSネイティブの
color-contrast 機能はサポートされていないため、Sass経由で独自の機能を使用。つまり、CSS変数を使用してテーマカラーをカスタマイズすると、これらのユーティリティで color のコントラストの問題が発生する可能性がある。
色の種類
高いコントラストのPrimary：
.text-bg-primary（= .text-white.bg-primary）高いコントラストのSecondary：
.text-bg-secondary（= .text-white.bg-secondary）高いコントラストのSuccess：
.text-bg-success（= .text-white.bg-success）高いコントラストのDanger：
.text-bg-danger（= .text-white.bg-danger）高いコントラストのWarning：
.text-bg-warning（= .text-black.bg-warning）高いコントラストのInfo：
.text-bg-info（= .text-black.bg-info）高いコントラストのLight：
.text-bg-light（= .text-black.bg-light）高いコントラストのDark：
.text-bg-dark（= .text-white.bg-dark）設定例
<div class="text-bg-primary p-3">...</div>【設定】
<div>や<span>などの要素に.text-bg-{themecolor}（文字&背景色ヘルパー、上記の「色の種類」から選択）を入れる{themecolor}は、primary,secondary,success,danger,warning,info,light,darkのいずれかを選択
アクセシビリティのヒント：意味を付加するために（"赤"とか"青"とか）カラー名を使用しても、視覚的な表示を提供するだけでスクリーン・リーダーのような支援技術のユーザーには伝わらない。意味は、（十分なカラーコントラストを持つ可視テキストなどの）文脈自体で明白にするか、
.visually-hidden クラスで非表示にした追加テキストなどの代替手段を入れるように心がけて下さい。
コンポーネント付き（With components）
1.バッジで使用
バッジのように、.text-* クラスと .bg-* クラスを組み合わせる代わりに使用。
見本
Primary
Info
設定例
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
2.カードで使用
カードでも同様に使用。
見本
ヘッダ
カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。
ヘッダ
カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。
設定例
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">ヘッダ</div>
<div class="card-body">
<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">ヘッダ</div>
<div class="card-body">
<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
</div>
</div>CSS v5.3.0Sassから名称変更
Sassループ（Sass loops)
デフォルトの設定
scss/helpers/_color-bg.scss 内の設定// このSassのバグにより、全角の`RGBA()`関数を使用: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
.text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}