Bootstrap5 カラー
Bootstrap 5 には、代表的な意味を持つ色クラスがいくつか用意されています：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(デフォルトカラーは黒色) and.text-light:
例
<div class="container">
<h2>指定された意味を表すテキストカラー</h2>
<p class="text-muted">ミュートされたテキスト。</p>
<p class="text-primary">重要なテキスト。</p>
<p class="text-success">成功を示すテキスト。</p>
<p class="text-info">情報を示すテキスト。</p>
<p class="text-warning">警告テキスト。</p>
<p class="text-danger">危険を示すテキスト。</p>
<p class="text-secondary">補助テキスト。</p>
<p class="text-dark">濃い灰色のテキスト。</p>
<p class="text-body">デフォルトカラー、黒色。</p>
<p class="text-light">明るい灰色のテキスト（白い背景では見づらい）。</p>
<p class="text-white">白いテキスト（白い背景では見づらい）。</p>
</div>
試してみる »
テキストの色の透明度を50%に設定できます。.text-black-50 或 .text-white-50クラス:
例
<p class="text-black-50">透明度50%の黒いテキスト、背景は白。</p>
<p class="text-white-50 bg-dark">透明度50%の白いテキスト、背景は黒。</p>
試してみる »
リンクでの使用
例
<div class="container">
<h2>テキストカラー</h2>
<p>マウスをリンクに移動。</p>
<a href="#" class="text-muted">ミュートされたリンク。</a>
<a href="#" class="text-primary">主要なリンク。</a>
<a href="#" class="text-success">成功のリンク。</a>
<a href="#" class="text-info">情報テキストのリンク。</a>
<a href="#" class="text-warning">警告リンク。</a>
<a href="#" class="text-danger">危険なリンク。</a>
<a href="#" class="text-secondary">補助テキストのリンク。</a>
<a href="#" class="text-dark">濃い灰色のリンク。</a>
<a href="#" class="text-light">明るい灰色のリンク。</a>
</div>
試してみる »
背景色
背景色を提供するクラスは次のとおりです：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkと.bg-light。
注意：背景色はテキストの色を設定しません。一部の例では、.text-*クラスと一緒に使用する必要があります。
例
<div class="container">
<h2>背景色</h2>
<p class="bg-primary text-white">重要な背景色。</p>
<p class="bg-success text-white">成功の背景色。</p>
<p class="bg-info text-white">情報の背景色。</p>
<p class="bg-warning text-white">警告の背景色</p>
<p class="bg-danger text-white">危険な背景色。</p>
<p class="bg-secondary text-white">補助テキストの背景色。</p>
<p class="bg-dark text-white">黒の背景色。</p>
<p class="bg-light text-dark">明るい灰色の背景色。</p>
</div>
試してみる »