色と背景

Color and background

背景色とコントラストを確保した前景色を設定します。

項目

概要

色と背景のヘルパーは、.text-*ユーティリティと.bg-*ユーティリティを1つのクラスにまとめたものです。Sassのcolor-contrast()関数を使用して、特定のbackground-colorに対してコントラストを確保したcolorを自動的に決定します。

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

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

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>

支援技術に意味を伝える

色を使用して意味を付加することは、視覚的な表示を提供するだけであり、スクリーンリーダーなどの支援技術の利用者には伝わりません。色で示される情報は、コンテンツ自体（例：可視テキスト）から明らかですが、.visually-hiddenクラスで隠された追加テキストなど、別の手段で含まれていることを確認してください。

コンポーネントで使う

バッジのように、.text-*と.bg-*を組み合わせたクラスの代わりに使うことができます。:

Primary Info

html

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

カード上でも使うことができます。:

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

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>