Bootstrapで赤文字を表示する方法をサンプルコード付き解説!

BootstrapではHTMLタグのclass属性に提供されているクラスを指定するだけでテキストの文字色を変更することができます。今回は、Bootstrapで赤文字を表示する方法とその赤文字をカスタマイズする方法をサンプルコード付きで解説しています。

コンテンツ [表示]

  1. 1Bootstrapで赤文字を表示する方法
  2. 2Bootstrapの赤文字の色をカスタマイズする方法
  3. 2.1Bootstrapを導入する2つの方法
  4. 2.2自作のCSSでカスタマイズする
  5. 2.3Bootstrapを直接カスタマイズする
  6. 3まとめ

BootstrapとはCSSのフレームワークで、あらかじめスタイルが定義されたクラスが用意されているため、HTMLのタグに該当のクラスを適用するだけで簡単に整ったデザインのページを作成することができます。

今回はそんなBootstrapを使って文字色を赤色にする方法を解説します。

Bootstrapで赤文字を表示する方法

Bootstrapで文字色を変更するには、text-{文字色}というクラスを指定します。

その中でも文字色を赤色に変更するには、text-dangerクラスを指定することで赤色にすることができます。

文字色を赤色に変更する

<p class="text-danger">danger</p>

Bootstrapで他の色の文字色に変更したり、背景色を変更する方法については下記の記事で紹介していますので、ぜひあわせて読んでみてください。

あわせて読みたい
Bootstrapで文字色や背景色を変更する方法を解説!のイメージ
Bootstrapで文字色や背景色を変更する方法を解説!
この記事では、Bootstrapで文字色と背景色を変更する方法を解説します。Bootstrapに用意されている色についてのクラスを使うと、文字色と背景色を簡単に変更することができます。色とクラスの組み合わせも全て紹介します。

Bootstrapの赤文字の色をカスタマイズする方法

上記で解説したように、Bootstrapで赤文字を指定する方法はtext-dangerクラスを指定します。

Bootstrapで提供している赤文字を指定するクラスはtext-dangerだけであり、他の赤色を表現することができません。

そのため、ここでは他の赤色を表現するために赤文字の色をカスタマイズする方法を解説します。

Bootstrapを導入する2つの方法

カスタマイズする前にBootstrapを導入する2つの方法を紹介します。

その方法は下記の2つです。

  • 既にホストされているファイルをインターネット経由で読み込む
  • ソースをダウンロードして、ローカルに配置してから読み込む
それぞれの導入方法別に、Bootstrapの赤文字の色をカスタマイズする方法を紹介します。

自作のCSSでカスタマイズする

まずは「既にホストされているファイルをインターネット経由で読み込む」方法でBootstrapを導入した場合のカスタマイズする方法を紹介します。

この方法で導入した場合は、自作のCSSでカスタマイズすることができます。

bootstrap.css

.text-danger {
  color: #dc3545!important;
}

Bootstrapでは.text-dangerクラスを上記のようにcolorプロパティに#dc3545!importantという値を定義し、提供しています。

そのため、自作のCSSでは下記のように記述します。

index.css

.text-danger{
  color: #ff2c41!important;
}

自作のCSSでも同じ.text-dangerクラスを用意して、上書きするようにしてあげることでカスタマイズすることができます。

また、この時Bootstrapを読み込むタグを記述した後に、自作のCSSを読み込むタグを記述するように注意してください。

そうしなかった場合には、上書きすることができなくなり赤文字の色をカスタマイズすることができません。

Bootstrapを直接カスタマイズする

次に「ソースをダウンロードして、ローカルに配置してから読み込む」方法で導入した場合のカスタマイズする方法を紹介します。

この方法で導入した場合は、上記の「自作のCSSでカスタマイズする」方法でもカスタマイズすることは可能ですが、ここではダウンロードしてきたBootstrapファイルを編集して直接カスタマイズします。

bootstrap.css

.text-danger {
  color: #dc3545!important;
}

インターネット経由で読み込んだ場合と同様、上記のように10132行目辺りに.text-dangerクラスが記述されています。

bootstrap.css

.text-danger{
  color: #ff2c41!important;
}

この.text-dangerクラスのcolorプロパティの値を直接書き換えてあげることで、赤文字の色をカスタマイズすることができます。

まとめ

Bootstrapの赤文字の色をカスタマイズする方法を紹介してきましたが、上記の方法で他のクラスをカスタマイズすることも可能です。

しかし、あまりカスタマイズしすぎてしまうとBootstrapを使用するメリットが少なくなってしまいますので、カスタマイズのしすぎには注意が必要です。

GeekHive採用サイト

関連記事