Bootstrapで文字色や背景色を変更する方法を解説！

Bootstrapではクラスを指定するだけで文字色や背景色を変更することができます。

Bootstrapには色を指定するためのクラスがいくつか用意されており、その中から選んで任意の色に変更することができます。

Bootstrapで文字色を変更するには、text-{文字色}というクラスを指定します。「文字色」の部分には、設定したい色に合わせて適切な文字列が入ります。

このように設定すると、このクラスを指定した要素全体の文字の色が指定した文字色に変更されます。

「文字色」の部分に入れる文字列と色は以下のようになります。

下の2つ、black-50とwhite-50はそれぞれ　blackとwhiteの透明度が50%という意味で、下の背景の色が透けて見えます。

例えば、一番上の青色にしたい場合は以下のように指定すれば良いというわけです。

Bootstrapで背景色を変更するには、bg-{背景色}というクラスを指定します。「背景色」の部分には、設定したい背景色に合わせて適切な文字列が入ります。

「背景色」の部分に入る文字列と色は以下のようになります。

例えば、一番上の青色にしたい場合は以下のように書けば良いというわけです。

いかがでしたでしょうか？

• 文字色を変更したい場合はtext-{文字色}
• 背景色を変更したい場合はbg-{背景色}