Bootstrapで利用可能なテキスト色クラス

ナビゲーションバーでタイトルとしてテキストを入力して、サインアップページを開発しています。それらのテキストに異なる色を付けたいです。この目的のために、別のCSSファイルを使用していますが、ブートストラップのCSSファイルを使用してこれを実行したいと考えています。

誰かがブートストラップで利用可能なカラークラスをリストできますか？

ブートストラップ3ドキュメントのヘルパークラス下のリストこの： Muted、Primary、Success、Info、Warning、Danger。

ブートストラップ4ドキュメントユーティリティの下のリストこの- >色、そしてより多くのオプションを持っています： primary、secondary、success、danger、warning、info、light、dark、muted、white。

それらにアクセスするには、 class text-[class-name]

したがって、たとえば青色のテキストが必要な場合は、次のようにします。

<p class="text-primary">This text is the blue primary color.</p>

これは膨大な数の選択肢ではありませんが、いくつかあります。

通常、ナビゲーションバーのテキストは、bootstrap.cssファイル内の次の2つのcssクラスのいずれかを使用して色付けされます。

まず、デフォルトのナビゲーションバー（灰色のナビゲーションバー）を使用する場合、.navbar-defaultクラスが使用され、テキストは濃い灰色で表示されます。

.navbar-default .navbar-text {
  color: #777;
}

もう1つは、反転ナビゲーションバー（黒いバー）を使用する場合のテキストの色はgray60です。

.navbar-inverse .navbar-text {
  color: #999;
}

だから、好きなように色を変えることができます。ただし、別のcssファイルを使用して変更することをお勧めします。

注：セクションで、が提供するカスタマイザを使用することもできます。Twitter BootstrapNavbar

テキストクラスを使用できます。

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

必要に応じて、任意のタグでテキストクラスを使用します。

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

必要に応じて、独自のクラスを追加するか、上記のクラスを変更できます。

Bootstrap 4（最近のバージョンで追加）には、他の回答で言及されていないクラスがいくつかあります。

.text-black-50そして.text-white-5050％の透過性です。

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>