色と背景

前景色と対照的な背景色を設定します。

このページでは

概要

v5.2.0 で追加

色と背景のヘルパーは、.text-*ユーティリティと.bg-*ユーティリティのパワーを1 つのクラスに結合します。Sass 関数を使用して、特定color-contrast()のの対比を自動的に決定します。colorbackground-color

注意喚起！現在、CSS ネイティブ color-contrast関数はサポートされていないため、Sass 経由で独自の関数を使用しています。これは、CSS 変数を使用してテーマの色をカスタマイズすると、これらのユーティリティで色のコントラストの問題が発生する可能性があることを意味します。

対照的な色のプライマリ

対照的な色のセカンダリ

対照的な色で成功

対照的な色の危険

対照的な色で警告

対照的な色の情報

対照的な色の光

対照的な色の暗い

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

コンポーネント付き

バッジ.text-*のように、結合された.bg-*クラスの代わりにそれらを使用します:

主要な情報

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

またはカードで：

ヘッダ

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。

ヘッダ

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>