bootstrap_divのtextContentに対する_foreground-color

 

bootstrap で div や p, span内の

text contentに対するforeground colorを設定するためのclassには、

どのようなものがあるのでしょうか？

↓

Bootstrap では、

テキストの前景色（フォアグラウンドカラー）を設定するために、

以下のようなクラスを使用します。

これらのクラスを `div` や `p`、`span` 内の

テキストコンテンツに適用することができます。

---

### 基本的なテキストカラークラス

Bootstrap には以下のような標準のテキストカラークラスがあります。

| クラス名            | 説明                            

|---------------------|------------------------------|

| `text-primary`      | プライマリカラーを適用               |

| `text-secondary`    | セカンダリカラーを適用               |

| `text-success`      | 成功を示す緑色を適用              |

| `text-danger`       | 警告やエラーを示す赤色を適用         

| `text-warning`      | 注意を示す黄色を適用            |

| `text-info`         | 情報を示す青色を適用             

| `text-light`        | ライトテーマの明るいテキスト色        |

| `text-dark`         | ダークテーマの暗いテキスト色          |

| `text-body`         | ボディの標準的なテキスト色を適用      |

| `text-muted`        | 薄いグレーの muted テキスト色を適用  |

| `text-white`        | 白色のテキスト色を適用            |

| `text-black-50`     | 黒の半透明（50%）             |

| `text-white-50`     | 白の半透明（50%）             |

---

### 使用例

```html

<div class="text-primary">This is primary text.</div>

<p class="text-danger">This is danger text.</p>

<span class="text-success">This is success text.</span>

```

---

### カスタムカラーを追加したい場合

独自のテキストカラーを設定する場合は、

以下のようにカスタム CSS を作成して適用できます。

```html

<style>

  .text-custom {

  

    color: #ff8800; /* オレンジ色 */

  }

  

</style>

<p class="text-custom">This is custom color text.</p>

```

---

### 色の変更を柔軟にしたい場合

`!important` を回避するためにも、

Bootstrap のカスタム変数を使ってテーマを設定する方法が推奨されます

（`SCSS` の場合など）。

必要に応じて、この方法も検討してください！